Getting started with web accessibility in ReactJS

React is a widely preferred frontend UI library, used in nearly 50 million projects every month. React, which is supported by Facebook, has dominated the web development market for more than nine years and boasts a number of notable clients (startups to Fortune 500 companies).

Source

Web accessibility is one of the most significant, but least considered, topics by web developers. It is simple to forget accessibility when creating new fancy web applications with React or even to forget the native features that React offers to make the website more accessible. This comes with a price to pay.

In this detailed tutorial on accessibility tools in React, we will walk you through the various methodologies through which you can make your React application accessible to everyone.

So, let’s get started!

What is Web Accessibility

Web accessibility is the practice of designing and building websites and digital tools so that people with different abilities can use them without difficulty.

A new set of accessibility features and problems have emerged as web applications become more complex and dynamic. Numerous semantic elements, such as “main” and “section,” have been added to HTML. Instead of focusing only on presentation, semantic HTML gives the web page important meaning. This makes it easier for web browsers, search engines, screen readers, RSS readers, and ultimately users, to comprehend.

A website that is accessible eliminates obstacles and guarantees that users with and without disabilities have equal access to the website’s functionality. Web accessibility also affects people with temporary disabilities, such as someone who has broken an arm, or situational limitations – such as when a person is unable to hear the audio due to loud background noise. Accessibility support is required for assistive technology to interpret web pages.

How to Make a React Application Accessible

ReactJS fully supports the creation of accessible websites, which usually make use of conventional HTML methods. You can ensure that your web application is as quickly and easily accessible as possible by following a few simple steps:

Using HTML Semantics:  

The distinguishing characteristic of a semantic element is that it makes its meaning clear to both the developer and the browser. These elements clearly define its content. 

Use semantic HTML whenever possible to make your website accessible to screen readers and to make your code more understandable. Semantic HTML tags can be used by search engines and other user devices to assess the significance and context of web pages.

Following the basic Structure

Design the interface with everything interconnected so that the user has a path to follow. In addition to structuring, headings, sections, navbars, etc. must be placed in proper locations. These semantic components serve as logical sections and improve the website’s structure.

    source

Regardless of size or complexity, an accessible semantic structure will enable accessibility on any website. Your website’s accessibility will be worse as it grows if it lacks a strong semantic foundation. Setting the right structure early in the development process helps your website stay navigable as it expands.

Keyboard Focus

When implementing accessible websites, keyboard focus is an important point to keep in mind. If you don’t make sure that keyboard focus is properly managed, users who can’t use other input methods will find it difficult to interact with your website. It is a good idea to create an outline around the input section to let the user know which input element is currently selected.

This implementation is noticeable on the Google Home page.

This can be implemented by using useRef in React so that we can access the input element and focus on it when the user clicks or hovers through the input section. The code for this is illustrated below:

Issues with keyboard accessibility on websites occur when designers or developers use techniques that go against standard keyboard functionality.

Accessible Rich Internet Applications (ARIA)

Web content and web applications can be made more accessible for people with disabilities by implementing a set of attributes called Accessible Rich Internet Applications. ARIA defines semantics for many popular UI controls so that screen readers and other assistive technologies can understand what our DOM nodes stand for.

Let’s understand ARIA with a small example.

You can see that we have provided the aria-label attribute and the screen readers know that it is a button because we used a button tag and the aria-label tells us that this button is to increment something. 

Using React Fragments

Fragments are a common pattern in React for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. In some cases, using <div> elements in React may violate HTML semantics, resulting in difficult-to-understand page structures or invalid HTML.

Let’s look at an example where we need to use fragments:

We know that in React, we should only have one parent JSX element. If we try to wrap the list items in the above example in a <div> ,it will result in having an invalid list. In this situation, it is ideal to use fragments.

Fragments hold HTML valid and understandable, especially for users who may rely on screen reader technologies or other users who may not have access to the page’s visual elements.

Labeling

In order to make the forms accessible, labeling is used. Every HTML form control must have an accessible label. A textual label should be provided for each control.

Screen readers can better understand the context of the control they are interacting with when a label is provided. To indicate where it labels in HTML, we use the for attribute; in React, we use the htmlFor attribute. 

We have seen several ways in which we can increase web accessibility. There are some countries that have some regulations that require the website to be accessible to everyone.

Let’s now look at some of the tools that can help us identify accessibility issues in your React application.

Accessibility Tools for React Applications

Thanks to the size and constant growth of the React ecosystem, there are many tools available that can assist developers in creating web applications that are more accessible. 

Although you can detect some common accessibility issues using these tools, they won’t complete your task for you. It is your duty as a developer to make a concerted effort to create more inclusive and accessible digital products from the very beginning of the project.

eslint-plugin-jsx-a11y

To identify accessibility problems in React applications, this plugin performs a static evaluation of the JSX. Use it in combination with @axe-core/react to test the accessibility of the rendered DOM since it only detects errors in static code. Always test your apps using assistive technology, treating these tools as just one step in a larger a11y testing process.

You can make sure you are strictly adhering to some accessibility standards right away with real-time understanding if you are using an editor linting plugin. This plugin has 33 testable rules enabled, including label-has-for and alt-text.

When you use create-react-app to create a React project, it already has this tool configured, but it only has a portion of the configurable accessibility rules enabled by default. You can enable more rules by creating a .eslintrc file.

axe-core-react

The axe-core-react can be used in a React project in development to highlight accessibility issues whenever a component updates in the Chrome DevTools console.

You can run the axe-core-react plugin with the default configuration or you can add additional options.The following code shows how to run axe-core-react in your application.

react-aria-modal

It is a fully accessible and flexible React modal built according to WAI-ARIA Authoring Practices.

The React team advises using this modal library because it complies with web accessibility guidelines. It controls keyboard focus, key mapping, and ARIA roles to make sure that screen readers can access your modal.

Your component will be wrapped in a modal component that makes it simple to use, customizable, and enforces accessibility standards. This tool is extremely helpful because modals are some of the least accessible features of websites.

The axe accessibility linter VS Code extension

You can use the axe accessibility linter extension for Visual Studio Code to check React, HTML, Vue, and Markdown for some common accessibility flaws. It identifies the accessibility issues in Javascript, JSX, typescript, Vue, HTML, and markdown files.

The advantage of this extension is that it doesn’t require configuration. After installation from the VS Code Marketplace, it immediately begins linting compatible files for accessibility faults without requiring any further configuration. Installation can occasionally require a few minutes. Axe accessibility linter will start operating on compatible source files after this step is finished.

Web AIM Color Contrast Checker

According to the Web Content Accessibility Guidelines, the normal text should have a color contrast ratio of 4.5:1 for Level AA. The normal text must have a contrast ratio of 7:1 to reach Level AAA.

The two colors you’ve chosen will be analyzed by this tool, which will also provide the color contrast ratio. When creating a color scheme, you can check to see if it will go against any accessibility standards.

Google LightHouse

You can perform an accessibility audit of your website using Google’s Lighthouse Chrome DevTools. It produces a report that you can use to improve your website’s flaws.

The Google Lighthouse, like the majority of accessibility tools, evaluates web content in reference to the Web Content Accessibility Guidelines (WCAG). WCAG, which is published by the World Wide Web Consortium (W3C), is the accepted digital accessibility standard.

WAVE Evaluation Tool browser extension

You can use this additional Chrome browser extension to find accessibility problems with your website. Before using this extension to audit your web application for accessibility flaws, you must host the app. 

By adding icons and indicators to your page, it gives users a visual indication of how accessible your web content is. WAVE facilitates human evaluation and informs users about accessibility issues, but no automated tool can tell you whether your page is accessible. The browser handles all analysis, enabling secure evaluation of local, password-protected, intranet, and other sensitive web pages.

Axe DevTools browser extension

The free Axe DevTools browser extension is a fast, lightweight, yet powerful testing tool driven by the world’s most trusted accessibility testing engine, axe-core, developed by Deque.

The need for manual testing is drastically reduced when accessibility issues are proactively found and fixed using axe DevTools, giving you quick wins without slowing down development. The extension is available for Google Chrome, Mozilla Firefox, and Microsoft Edge. 

Conclusion

Congratulations on reaching this far! We are glad you read the article.

In this detailed blog on accessibility for React applications, we have covered various ways to make websites accessible. We have also discussed various best practices and accessibility tips and tricks.

Now you know how to make your React application accessible.

Happy Reacting!