Web accessibility

You can also read this post on my blog: blog.kamilbugno.com

If you are an owner of 20/20 vision you probably never spent much time thinking of how lucky you are. But did you know that vision impairment and blindness concern around 285.4 mln people? That’s according to the Centers for Disease Control and Prevention (CDC). Other statistics show that every single year 1 to 2 million people become blind¹. Regardless of these considerable numbers, vision impairment or blindness has a huge influence on a given person - not only in a physical world but also in a virtual one. How can we, as programmers, help to make the virtual world more accessible?

It is not a new idea

The concept of creating highly accessible websites isn't new. The accessibility of the websites is based on an international standard that has been in force since 1999. That was the year the first version of this standard was published. In 2008 version 2.0 was released, which sets out the standard for developers for creating websites that are accessible to people with disabilities. This standard is called WCAG² - Web Content Accessibility Guidelines and specifies requirements for three levels of accessibility: A (basic accessibility), AA (medium accessibility), and AAA (the highest level of accessibility). Even though several years have passed from the first version of that guideline, there are still a lot of websites that are not very friendly towards people with visual impairments. In Poland, access to websites for people with disabilities is regulated by a legislative act - but this applies only to public institutions. Unfortunately, commercial websites are exempt from this obligation and a lot of these websites are not accessible to people with visual impairments.

See how people with visual impairments see the world

Before I started developing a project that had to meet strict accessibility requirements I wasn't aware of that problem. I had never wondered before how the visually impaired people browse the Internet. When I used a screen reader for the first time, I realized how important the accessibility is for people with visual impairments. You can conduct a small experiment and install two extensions for your browser. ChromeVox Classic Extension³ is a screen reader and every webpage you browse is simply read out loud to you by this extension. Thanks to it blind people can hear the content of the site. All audio descriptions presented in this post come from this extension. The second is NoCoffee Vision Simulator⁴ and it allows you to observe how people with visual impairments see.

The following gif shows how Wikipedia page can look like for a visually impaired person using this extension:

So, for a short period, you can feel like a person with colour blindness, glaucoma, or another vision impairment and experience what your favourite websites look like, given these circumstances. It made a big impression on me.

Several steps that you can take today to make your website more accessible

Now it is time for us to focus on the technical side of accessibility. I will show you several methods that you can use to improve the accessibility of your website.

Use semantic HTML

I wanted to understand what the main difficulties of visually impaired people are when it comes to using Internet, so I decided to talk with Andrzej Janik, who represents the Mir foundation⁵ and is a blind person.

"It is much easier for me to browse the page if it is divided into appropriate sections. The website menu, headers from H1 to H6, article section, and footer are important elements for people with visual impairment".

According to him, we should use semantic HTML wherever possible.

Let's assume that we have this menu item:

And here is a code for it:

<div class="navigation">
 <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#gallery">Gallery</a></li>
   <li><a href="#about">About</a></li>
  </ul>
</div>

You can see that we use 'div' HTML tag. How does the screen reader present this menu bar to a visually impaired person? When the user focuses on the first element, they can hear:

'List with four items. Home. Internal link list item.'

This menu bar doesn't use the power of semantic HTML. Why? Because the screen reader doesn't know that this is a menu on our page - 'div' tag is not very descriptive. We can correct it by using 'nav' tag instead of 'div'.

<nav class="navigation">
 <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#gallery">Gallery</a></li>
   <li><a href="#about">About</a></li>
  </ul>
</nav>

Thanks to it the visually impaired person can hear the following description of the menu:

'Navigation list with four items. Home. Internal link list item.'

The similar situation occurs when it comes to creating buttons. We can create buttons in different ways. Let's assume that we have three following buttons:

<div class="main-button">First</div>
<input type="button" class="main-button" value="Second">
<button class="main-button">Third</button>

How will the screen reader describe these elements?

• 'First' - for 'div' tag
• 'Second. Button' - for 'input' tag with type="button"
• 'Third. Button' - for 'button' tag

As you can notice, using 'div' tag provides no real value for screen readers. Only two last methods of creating a button can provide an appropriate description for a visually impaired person. So, if you would like to improve the accessibility of your website, you should consider the following tags instead of 'div'⁶:

• 'nav',
• 'button',
• 'header',
• 'footer',
• etc.

Skip to content link

Usually, the majority of websites have many items at the top. A very extensive menu, additional links etc. For example, when you visit the New York Times website, you can see these elements:

People with a visual impairment often use a keyboard to navigate the page, not a mouse. As a result, that person must press 'tab' or 'shift+tab' to switch between the various content of the site. Can you imagine how many times they have to press 'tab' to skip all items in the header section? Too many. As a solution for this issue, a lot of websites implement 'Skip to content' link.

New York Times website also has this link. It is visible only when you are navigating the page using 'tab'. Thus a visually impaired person can save a lot of time using this link because they do not have to press 'tab' for every element in the header. How can we implement a link like this?

<a href="content" class="skip my-style">Skip to content</a>

.skip {
  position: absolute;
  top: auto;
  left: -1000000000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.skip:focus {
  position: static;
  margin: 10px;
  height: auto;
  width: auto;  
}

This skip to content link can also be used in other situations.

"One of the Poland news websites usually publishes articles with a video player embedded inside. It is really hard to skip this player because it has a lot of different buttons" said Andrzej Janik.

It seems that in this situation 'Skip to content' link can also be helpful.

Add description to the photos

Let's assume that we want to add a photo to our website. We can do it with the following code:

<img class="image" src="./../assets/myPhoto.png" />

How does the screen reader describe this element?
'My photo image'

It is important that the screen reader uses filename when there is no alt text or description. On some websites, I can find images with really strange filenames that are not related to the content of the image, for example, pexels-photo_1920x485.jpg. When a visually impaired person comes across the element like this they can feel really confused. How can we improve it?

We can simply add alt text:

<img class="image" alt="Description of the photo" src="./../assets/myPhoto.png" />

Thanks to it, the screen reader will now read the description of the image.

Another important thing about images is a meaningful description. Andrzej Janik told me about a situation where the local authority organized an event and posted an article about it to their website. Unfortunately, all information about that event was included within a poster, so he was not able to access them. In such a situation it can be better to write the details of that event in the description of the image instead of adding an overly generic description like "The poster about our new event". This example shows us one good practice: we should describe the information that is contained within the photo, not the photo itself.

Connect label with an input element

Let's imagine that we have a huge form, and one of its sections is about choosing one of two elements. We can select either Cat or Dog option.

This functionality can be achieved by using the following code:

<div>                    
  <input id="dog" type="radio" name="animal" /> Dog
  <input id="cat" type="radio" name="animal" /> Cat
</div>

When a user focuses the cursor on the first option, they can hear:

'Radio button selected.'

It doesn't provide any details about the selected option. The first step to improve the accessibility of it is to add a label element.

<div>
 <label>
   <input type="radio" name="animal" /> Dog
 </label>
 <label>
   <input type="radio" name="animal" /> Cat
 </label>
</div>

Then we can hear:

'Dog, radio button selected.'

We can improve this solution even more. How? Let's talk about 'role' attribute!

Use 'role' attribute

Do you remember what I recommended about semantic HTML? When it is possible we should use it. But what can we do when we really need to use a simple 'div'? It turns out that there is a special HTML attribute. It is called 'role' and thanks to it we can describe what the main goal of a given section of HTML is.

Let's go back to our radio buttons. This solution can be improved by adding 'role' attribute.

<div role="radiogroup">
   <label>
     <input role="radio" type="radio" name="animal" /> Dog
   </label>
   <label>
     <input role="radio" type="radio" name="animal" /> Cat
   </label>
</div>

And instead of hearing: 'Dog, radio button selected' we now can hear: 'Dog, radio button one of two selected'.

This works for alerts as well. A website can show alert if the user should take immediate action:

We can implement such an alert using 'div' tag:

<div class="alert">
  <i class="fa fa-close close-button"></i> 
  <strong>Important!</strong> You have to confirm your e-mail.
</div>

When the focus is on that element, the screen reader will describe it as 'Important. You have to confirm your e-mail'. As a result, it is not known that this message is an alert. We can add this information by using role="alert" attribute.

<div class="alert" role="alert">
  <i class="fa fa-close close-button"></i> 
  <strong>Important!</strong> You have to confirm your e-mail.
</div>

Thanks to it, the user will hear 'Important. You have to confirm your e-mail. Alert'. At first glance, this one additional word doesn't seem to be very important, but for a visually impaired person, it is helpful information.

Use 'aria-...' attributes

Not only can we use 'role' attribute in order to make our website more friendly for visual impaired people, but also we have 'aria-...'⁷ attributes at our disposal. It is good to know that aria stands for Accessible Rich Internet Applications and is meant to provide additional information about HTML elements to people with disabilities.

aria-label

One of the most popular 'aria-...' attributes is 'aria-label' and as a name suggests it provides an additional label to a given element.

Let's assume that we want to use a button without any visible text:

We can do it by writing:

<button class="btn">
   <i class="fa fa-close"></i>
</button>

When the screen reader is used to describe that element, we can only hear: 'Button'. This solution doesn't provide sufficient information for visually impaired people. We can improve it by using 'aria-label' attribute:

<button class="btn" aria-label="Close">
   <i class="fa fa-close"></i>
</button>

Now we can hear 'Close button'.

This attribute is also really helpful when we have a loading icon. If a user has to wait for some data to load, it is a good practice to explain to them the reason why said data isn't shown immediately. Instead of rendering only the loading icon, we should add an 'aria-label' attribute with an explanation like 'Please wait, the page is loading'.

aria-labelledby

Very similar attribute to 'aria-label' is a 'aria-labelledby' attribute. Instead of explicitly writing the content of the label, we can point out that we want to use different HTML element as a label. It can be most helpful in cases when we want to concatenate labels from several other nodes. We can simply add id's of desired elements as arguments to 'aria-labelledby'.

Let's imagine that we have the following form:

We want to add to the fields the information about both the name of the form's section and the label of the input. We can do it by using 'aria-labelledby' attribute.

<h1 id="employee">New employee</h1>   
<label id="fName">
  First Name:
  <input type="text" aria-labelledby="employee fName"/> 
</label>
<label id="lName">
  Last Name:
  <input type="text" aria-labelledby="employee lName"/> 
</label>

Screen reader describes the first input as: 'New employee, first name, edit text'. It can be most useful when the form is really big and contains several sections. Thanks to it, a visually impaired person can be more aware of the context of a given field.

aria-valuemin, aria-valuemax

Another example where we can use 'aria-...' attribute is a slider.

We can implement it in this way:

<input type="range" aria-label="Choose the value" min="1" max="100" value="60">

But as a result, screen reader will only mention the current value. So, we can hear 'Choose the value. Sixty, slider'.

When we change the solution to the one shown below, we will hear: 'Choose the value. Sixty, slider. Min one, max one hundred'.

<input type="range" aria-label="Choose the value" aria-valuemin="1" aria-valuemax="100" min="1" max="100" value="60">

aria-required

In a form, we can have required fields like "Your name".

It can be implemented using this HTML:

 <label>
    Your name: 
   <input type="text" id="name" required/>
 </label>

Screen reader describes it as 'Your name, edit text'. Unfortunately, the information that this field is required is not presented for a visually impaired user. But when we add 'aria-required' attribute, then the user knows that they have to fill in this field:

 <label>
    Your name: 
   <input type="text" id="name" aria-required="true" required/>
 </label>

As a result, we can hear: 'Your name, edit text, required'.

How to check if my website is accessible?

In an ideal world, it would be great to use the potential of people with visual impairment for this task. As Andrzej Janik said

"before any website is made available for users it is verified by a QA team. A similar strategy we can use for testing the accessibility of the page. Why not hire visually impaired people who can verify it from the practical perspective?".

Although this idea is really interesting, if we don't have that possibility, we can use special tools to test the accessibility of our site. These tools usually don't check everything, so we shouldn't expect that thanks to them our website will be 100% accessible - but they can help us with the most important issues. One such tool is WAVE⁸.

WAVE shows crucial problems related to accessibility, like missing alt texts, skipping headings, missing labels, etc. Similar functionalities are also offered by Chrome Lighthouse⁹. You can audit your site to see what accessibility recommendations are not met:

I believe that these tools can provide good support in creating more accessible pages.

Summary

In this article, I discussed what accessibility is, how it influences the comfort of browsing the internet by visually impaired people, and how we can improve the accessibility of our website. I hope that you will soon have an opportunity to use this knowledge to help in removing virtual barriers for people with disabilities!

References:

1. Report of the Institute of Healthcare: "Choroby oczu – problem zdrowotny, społeczny oraz wyzwanie cywilizacyjne w obliczu starzenia się populacji"
2. Official WCAG website
3. Official website of Chrome Vox extension
4. Official website of NoCoffee extenstion
5. Official website of Mir Foundation
6. More examples of semantic HTML tags from w3schools
7. More info about ARIA properties from W3
8. Official website of WAVE extenstion
9. Official website of Lighthouse extenstion