Frontend Accessibility

In this article we will talk about the importance of accessibility on web pages. The web pages must be developed taking into account the type of user who may visit it, that is, we may have a person with some physical or mental disability. If the web page is not prepared for it, it will make the life of that person hard when he/she tries to navigate througth the webpage.

In this way, developers should always take into account all types of users, whether they have a disabilities or not.

There are some basic practices that all of us, as programmers, can take into account when doing frontend development.

Always use the existing HTML semantics.

For example, all the titles must use the elemen <h1>, <h2>, etc. To create buttons never use the <div> element, instead use the <button> element. This is because the <button> already has some properties that will help with accessibility, like role, using the text as a name, etc.

Correctly use HTML landmarks

Much like what was said in the previous point, we must correctly use our html elements. That is, use the <header> when we want to place a header on the page, <nav> for page navigation, <form> for forms, and so on.

Provide titles and subtitles whenever necessary

When we are adding any type of title in our page we must use the <h*> correctly, so that when a Screen reader is used it can correctly identify the element. Even when there is no visible title on the page, a “hidden” title should always be added so that screen readers can detect it. The order of these elements must corretly used, so if you are adding a subtitle you will use a <h2>, if it is a main title you will use <h1> and so on. If the title or subtitle in the design is smaller or bigger, use the css to modify it, while using the correct element.

Accessibility tree

The accessibility tree contains all the accessibility information related to most HTML elements. Web browsers convert markup into internal representations called a DOM tree. The DOM tree is made up of objects that represent all elements, attributes and text nodes. From there, browsers create the accessibility tree. This is based on the DOM tree, which is used by specific accessibility platforms, so that this representation can be understood by assistive technologies, such as screen readers.

There are four properties on an accessibility tree object:

Name

For example, a hyperlink with the text “Read more” might have the text as its own name.

Description

For example when we have an image in our webpage and someone with visual disability is using our webpage it cannot see the image, So, for that we need to add a description in our image, so that the screen reader can detect it and read the description to the user.

Role

Here we indicate what the role of a given element will be, for example we can say that a role of a <div> element is a button, that way the screen reader can detect that div as a button.

State

The state of the element must be checked if it has, for example, the state of checked or unchecked of a checkbox, collapsed or expanded of a dropdown, etc.

In the following image we can see the entire process from creating the HTML file, building the DOM and Accessibility tree to the user webpage visualization.

Pratical examples

Imagin that we have the following image with the corresponding HTML code:

<img src=”bees-2.jpg” alt=”bees swarming”/>        

We can visually see that this image contains a set of bees swarmimg in the honeycomb. However for a person who has a visual disability you will have to use a screen reader, or other software to be able to browse the pages.

In HTML, the <img> element is called the “alt” property that will make all the difference and should always be present in all the images we place on our site. The “alt” property is used to describe the image. This description will be used by the accessibility software so that it can describe the image to the user. When we don't put this property in, it's as if the image doesn't exist for that person.

The same goes for other HTML elements, as we can see in the following image:

CSS for accessibility

When we are styling our pages we need to think about accessibility and how our styles will impact the DOM and the Accessibility tree.

For example, when we are hidding some elements using CSS, we need to think if the styling will affect only the DOM or it will affect the Accessibility tree as well. Because at the end it is going to affect how a person with a disability will see our webpage.

As you can see in the image above, if we use the visibility and display properties, both of them will hide the content from both trees making them inaccessible. In other hand, we can use the opacity or the clip-path to hide the elements from the DOM and making them visible for the Accessible tree.

In the HTML, we have an attribute that can hide the element from the DOM, this attribute is the "hidden" attribute. But like the display and visibility properties, it will hide the element from both trees. The attribute "hidden" it is useful when the css is disabled.

Besides the "hidden" attribute we have another one, the "aria-hidden" attribute. This it will determine if the element is hidden from the accessibility API's " aria-hidden='true' " or not " aria-hidden='false' ". It is useful for hidding decorative or duplicated content (e.g. decorative icon or text).

In the following example, An icon next to text is duplicative for screen reader users, so we hide it from screen readers with aria-hidden

<button aria-expanded="false" id="menu-toggle">
   <svg viewBox="0 0 32 32" width="32px" height="32px" 
        aria-hidden="true" focusable="false">
   <!-- svg content -->
   </svg>
 
     Menu  
  </button>        

With css we can visually hide any element (mostly text) accessibly. As you can see in the following example:

.sr-only {

   clip: react(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;         

There are any other information that will help you through all the development to make your web page more accessible. For that you can go to the accessibility.digital.gov webpage.

In conclusion..

We must always remember that there are people in the world visiting your website that need to have any type of help to interact or navigate in your website. So, it is very important for all of us, as a programmers, to make sure that when we are developing we do thinking in every user that can and will use our webpage.

Always remember, we never know if someday it will be us that will need to access a webpage using some accessibility, like screen readers. So always care about your users and take time developing your page with accessibility in consideration.