Developer Weekly Blog #3 - Web Accessibility

This week I was studying accessibility on the web. There are a lot of lessons that I take about a course that I take about the topic. To summarized what I learned what do you need to check in order to have good accessibility is to assure you include in your web or component is:

• The usage of semantic HTML in your tags
• Guarantee a similar experience with screen-readers and how the people use it
• Have a good contrast with your text in order to be easy to read it
• Guarantee that the focusable sequence between elements makes sense and is similar as the default experience
• Use LightHouse to measure and get further accessibility improvements

Using these key points you will guarantee a good experience for all kinds of people in your website and these will get you extra points at the SEO(Search Engine Optimization) because it indicates the meaning of the content on the page. So let’s dive deep into each of these points.

Usage of semantic HTML in your tags

When we are writing HTML we have the freedom to write in whatever way we want to make it, but using the tags introduced by HTML 5 we have the opportunity to correctly label some common parts of our website like the header, the navigation bar or the footer. Using them allows a blind person, for example, that is not able to see the page to get more information about where he is located at the moment and give more valuable information. Take into account this two examples:

<p> Steps to make a toast </p>
<p> Take out your bread </p>
<p> Turn on your stove </p>
<p> Put the pan </p> 
<p> Put the bread into the pan </p> 
<p> Wait 2 to 5 minutes </p>
<p> Remove the bread </p>

When some screen-reader goes through this text will read something like: “paragraph steps to make a toast, paragraph take out your bread, paragraph, turn on your stove” but this is more like a step by step tutorial, it would be better if you use a list to describe it, something like this:

<p> Steps to make a toast </p>
<ol>
  <li>Take out your bread</li>
  <li>Turn on your stove </li> 
  <li>Put the pan </li> 
  <li>Put the bread into the pan</li> 
  <li>Wait 2 to 5 minutes </li> 
  <li>Remove the bread</li> 
</ol>

With the same text, a screen-reader now we can go something like this: “paragraph steps to make a toast, ordered list, first take out your bread, second turn on your stove” this will make more sense to the user that is reading the content with this assistance. But this not only applies with content related to text, you also need it to take into account at the moment of creating the layout of the page and use the appropriate tags.

If you want to create a header, don’t use the generic with a class <div class="header" > prefer to use the header tag <header> so for the user it is clearer where they are standing. There are around 100 semantic elements but you can start with the basics on how to create a basic layout with these tags: <header>, <nav>, <section>, <article>, <aside> and <footer>. To start creating understanding on how to structure a complete page.

Guarantee similar experience with screen-readers

When navigating on our page it is common to have hidden elements, when you hide elements you are thinking in hiding it just visually and neglect that you need to hide it as well for people that don’t operate the website in the same way as the rest. In order to hide it you need to use ARIA (Accessible Rich Internet Applications) attributes, those are HTML attributes devoted to accessibility that indicates the state or give more information about an element, there are a lot of attributes that you are able to use, if you want to look a more complete list you can look at the documentation in MDN about ARIA states and properties.

In this case where we want to hide an element apart from hiding from the screen we need to use aria-hidden and this attribute receive a boolean value so you need to use it in this way <div class="card" aria-hidden="true" /> so this element is skipped by the reading sequence of assistive technologies.

But other scenario where you can use it is to give more information to the user about what is about this part of the page you can use something like aria-label and aria-description to indicate an user what is this part about, if you have a carousel about the products that you are selling, you can use these tags to give more context about where they are navigating.

<div 
  aria-label="carrusel"
  aria-description="List of the best selling products"
>
    <!-- ... --> 
</div>

Adding more information and helping to guide a larger audience will make your application easy to use for them. The best way to guarantee a similar experience is to get the basics to navigate with a screen-reader and navigate through your app and see if there is a similar experience with what you see with the way you are navigating with the screen-reader technology.

If you never used a screen-reader before you can start using it in Windows and Mac, in Windows there is a pre-installed program called narrator that you can turn on and off using the shortcut Windows logo key + Ctrl + Enter if you want more information you can access the official documentation here. In Mac exist voice over

Have a good contrast in your text

Sometimes we want to be super creative with the colors of our website and we forget to make the texts readable and the texts are super important because it is the main content that you see when you enter a website. Could you imagine how the app of your bank would look like without the text? Or how would the app that allows you to buy a ticket for a flight look like? It would look really confusing without the text.

So in order to help the people that go to the website include good contrast in your text and to do it you can use a metric called contrast ratio. This number indicates how much difference  exists between the background and text. If you want to check this number you can use this tool: color contrast checker to be able to know this number, you can start with a minimum of 4 of contrast, but if you want to be really great you need a contrast ratio of 7.

As you see, texts are important so take care of them in order to guide the people that come to your website.

Guarantee that the focusable sequence between elements makes sense and is similar as the default experience

Yeah this is a long title but I didn’t come up with an idea that expresses those two things at the same time. Sadly most of evaluation of something to be accessible is a manual process, this is the reason that if you want to become great in accessibility you need to be able to use some screen reader or be able to navigate a website with just your keyboard because in that way you are able to verify by yourself if the experience is the same across different type of people.

For example, modals, this is a polemic component to get done well, one of the aspects that could go wrong is this: have you ever encountered a modal that does not have a close button? Or worse yet the button is so tiny that it is almost impossible to click on it? Now imagine how the experience is for the people that are not able to see a screen and do not have a button to close the modal. For them not having a closing button would make it more difficult to navigate in that kind of website.

And the same applies for elements that are not visible, when something is out of the screen or shouldn’t be visible there is an attribute that you can use in order to hide it called aria-hidden, if you have an element in the page but is not displaying at the moment use this property to help other type of users to skip that content, that would make them more satisfied with the navigation of your website.

Use LightHouse to measure and get further accessibility improvements

If You Can’t Measure It, You Can’t Improve It, this is the basis of any quality control management so be pragmatic with this matter and use a tool like LightHouse that helps you with puntual suggestions that make the experience for any type of user better. If you know about another tool I’m open to hear it.

So leverage from the existing tools, if you have an project use a static analyzer in order to prevent earlier any problem with the HTML of your website, you can check on this plugin that you can add to your linter called eslint plugin JSX a11y for React that help you at detect those errors. For other libraries or frameworks you can check this accessibility list of linters.

Last thoughts

For me studying about accessibility help me to understand better how other people are able to use this websites, this features were added to help people with some kind of limitation like someone blind but this improvements shouldn’t apply only to them, imagine if you have some kind of problem with your mouse and now you are only able to use a website with your keyboard or think about how difficult some programs were difficult to use just because the text has small fonts or low contrast. So this is not only for this kind of person, it is to help out a larger range of people that you don’t know how this is going to impact.

In general, thinking of different types of people using your product will help you to reach a broader audience.