A short guide to accessibility in ReactJS and the importance of ARIA for accessibility!

Tilak Oli
6 min readJan 28, 2023

--

What is Accessibility?

Accessibility in web development refers to the practice of making web pages and applications usable by people with a wide range of abilities, including those with visual, auditory, motor, and cognitive impairments or just power users who like to navigate through the site with keyboard. This can include people who use assistive technologies such as screen readers, magnifiers, and alternative input devices. Web accessibility is also referred to as a11y.A11y is a numero-nym that stands for accessibility as “a” followed by 11 more letters, followed by “y”. It is the design and creation of websites that can be used by everyone.

In this blog post, we will discuss how to add accessibility features to a React application and the importance of using ARIA attributes in your code.

Why is Accessibility needed?

  • Accessibility support is necessary to allow assistive technology to interpret web pages.
  • Accessibility is the necessary tool or ways in which a website can be made easy to access by the user with features like clickable buttons or drop downs or spaces to write a comment and stuff.
  • Accessibility also helps in power users may find it faster to interact with your application using a keyboard, rather than a mouse or touch screen. Especially for applications involving a large amount of data entry, good keyboard navigation support can dramatically increase user productivity.

Accessibility Standards and Guidelines:

There are some standard guidelines available for achieving accessibility which helps us to achive accessibility for building websites.Some of them are:

WCAG:

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

  • Natural information such as text, images, and sounds
  • code or markup that defines the structure, presentation, etc.

WAI-ARIA:

Web Accessibility Initiative — Accessible Rich Internet Applications (WAI-ARIA) is the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.

Now let's talk about the ARIA attributes that most of us as developers do know that they exist but don’t really know what/how they are used for.

ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to provide additional information about the element’s role, state, and properties.

This information is used by screen readers and other assistive technologies to provide a better user experience for users with disabilities. By using ARIA attributes, you can ensure that your React application is more accessible to users with disabilities. Some of the ARIA attributes that are mostly used are:

1. role :

This role attribute is the one that tells screen readers what the element is and how it should be read. For example, adding the role attribute to a button will inform screen readers that the element is a button. Here’s an example of using the role attribute.

use of role attribute in button tag

2. aria-label :

Another important ARIA attribute is aria-label, which provides a text description of the element for screen readers. For example, if you have an icon that represents a search button, you can use the aria-label attribute to tell screen readers what the icon represents, like this:

image for use of aria label attribute

3. aria-describedBy :

Another useful ARIA attribute for accessibility features is the aria-describedBy attribute this is used to associate an element, such as a form field or button, with a description that provides more information about the element.

Here is an example of how the aria-describedby attribute can be used to provide a description for an image:

Note: The alt attribute should always be used for images and provide a brief summary of the image, and the aria-describedby is used to give more detailed information.

In the above example, the aria-describedby attribute is used to associate the img element with a p element that provides a description of the image. The value of the aria-describedby attribute is "image-description", which matches the value of the id attribute of the p element.

When a user interacts with the image using a screen reader, the screen reader will read the text in the p element as the description of the image. This allows users who are visually impaired to understand the context of the image.

Note: The value of the aria-describedby attribute should match the value of the id attribute of the element containing the description. This is how the assistive technology knows which element to read.

4. tabIndex :

The tabindex attribute is used to specify the order aka taborder, Its the order in which elements on a web page should be focused when a user navigates through the page using the keyboard's tab key. The attribute can be used on any HTML element, and its value should be an integer.

A positive integer value (1 or greater) indicates that the element should be included in the tab order and should be focused in the order specified by the value. A value of 0 indicates that the element should be included in the tab order, but its order should be determined by its position in the source code. A negative integer value (-1) indicates that the element should not be included in the tab order and cannot be focused using the tab key.

Here is an example of how the tabindex attribute can be used to specify the tab order of two buttons:

use of tabIndex for button

In the above example, the first button has a tabindex value of 1 and the second button has a tabindex value of 2. When a user navigates through the page using the tab key, the first button will be focused first, and then the second button. You can also use tabindex attribute to change the tab order of other interactive elements such as form fields, links, and other buttons.

It’s important to note that the tabindex attribute should be used with caution, as it can change the default tab order of the elements in the web page. You should use it only when it is necessary and make sure that the tab order makes sense and is easy to navigate for keyboard users.

Another way to add accessibility features is to use third-party libraries such as react-a11y. This library provides a set of React components and utilities that can be used to add accessibility features to your application. For example, it provides a FocusTrap component that can be used to trap focus within a specific area of the page, making it easier for users to navigate through the application using keyboard navigation.

In conclusion, adding accessibility features to your React application is an important step in ensuring that it is usable by people with disabilities. By using ARIA attributes and React’s built-in accessibility features, you can improve the accessibility of your application and provide a better user experience for users with disabilities.

With that being said there are a lot more factors that are responsible for the accessibility of a website than just the use of ARIA attributes. Here are some of the useful links I could find:

WACAG

WAI-ARIA

React’s official documentation for accessibility.

How do screen readers work? A regular screen reader user’s perceptive.

A good tutorial i could find on the internet that talks about this topic more in depth!

--

--