How to Build an Accessible App With React (Why is It More Important Than Ever?)

“Accessibility allows us to tap into everyone’s potential.”
– Debra Ruh

Debra Ruh is a Digital Accessibility Technologist, the founder of TecAccess and Ruh Global. These American companies build solutions for people with disabilities, like designing websites and online learning tools. I look-up to women like Debra, who passionately try to bring an impartial stage for everyone, and even I want to make websites that are accessible by all.

This blog is a tutorial for building an accessible website using React Js. I am going to share my knowledge that I have throughly learned. This way, more and more software developers will get to know about accessibility and how to make react-apps more accessible. So let me start with the nitty-gritty.

What is Web Accessibility?

Accessibility refers to enabling ease of computer usage for people with disability or impairment by using specialized hardware or software. It uses features like text-to-speech, closed-captioning, and keyboard-shortcuts.

The term a11y is a generic term for accessibility, which is a numeronym where 11 is the number of characters omitted between the first and last characters. Web development keeping in mind accessibility ensures the inclusion of the total population using the web.

Web Accessibility begins by inclusive design that considers every web user is equal. Say, for instance, someone who is visibly impaired and cannot use the mouse pointer or trackpad, should also have equal rights and access to your website. Hence, developers should see a11y as a mandate and not just a feature. It not only benefits people with disabilities but also for those who:

• Use smartwatches, smart TVs, mobile phones, etc. with small display screens and different input modes
• Have changing abilities with aging
• Have temporary disabilities like a broken arm or lost glasses
• Have situational limitations like bright sunlight or are in an environment where they cannot listen to audio
• Have no internet connection or costly bandwidth usage.

Overall, accessible apps improve the website’s user experience UX by more intuitive interactions, high color-contrast, etc.

Standards and Guidelines for Web Accessibility

Here are a few guidelines developed by the W3C that govern how developers can achieve accessibility in building websites. These standards ensure that websites support screen readers, keyboard usability, and captions for images.

WCAG

The World Wide Web Consortium (W3C), in alliance with people and organizations around the globe, developed the Web Content Accessibility Guidelines, as a set of recommendations for making web content accessible for people with disabilities and all other user agents.

WAI-ARIA

W3C presented the Web Accessibility Initiative- Accessible Rich Internet Applications, which is a technical document that specifies how to improve the accessibility of webpages using Ajax, HTML, Javascript, and other related technologies like React.

Being a React enthusiast, I get annoyed when people raise myths like:

• Is React Accessible?
• How does the React handle the Accessibility Initiative?
• React doesn’t support Accessibility
• Developers should use accessible HTML instead of React
• React makes the website inaccessible

So, I decided to write a react a11y tutorial to make your lives easier. Accessible React components, react ARIA live, react-router accessibility, and more are used to build Accessible react applications. But in this post, I am going to show you how you can make any react application accessible simply by using some standard HTML techniques.

How to improve Web Accessibility using ReactJS

Below are depicted 08 HTML practices that help in building accessible React applications:

#1 Casing and Reserved Words

Following semantic HTML is ideal for React web applications, and HTML obeys proper casing of characters. Developers should follow camel-casing for writing HTML attributes. For example,

tabindex needs to become tabIndex
maxlength turns to maxLength 

Nonetheless, all the data-* and aria-* attributes should be hyphen cased (kebab-cased) in plain HTML such as,

aria-label={labelText}
aria-required=”true”

For some reserved words like ‘for’ and ‘class’ we change them like this,

for (a reserved work in Javascript) must be written as: htmlFor
Class (another reserved word of Javascript) becomes className

#2 Set page titles

The first thing the screen readers announce is the page title, and hence setting the title of your page is an essential step of making your application accessible. Now, as all React apps are SPAs (single page apps), the title element will display the same content throughout the browser session, which is not fair.

To overcome this issue, developers can dynamically change the global document. title property every time the page loads by implementing react’s lifecycle method- componentDidMount(). Screen readers can update the contents on the user’s browser tab and announce precisely where the user is on your application. Implementing this step also benefits your website because it is excellent for Search Engine Optimization.

You can set the page title of your website like this:

componentDidMount() {

 document.title = “Updated page title is this”;

}

Alternatively, there is a plugin react-helmet that developers can use that primarily handles head tags per page or component.

#3 Use Semantic HTML

To ensure each of your HTML block code is accessible by screen readers, you must write clear and understandable code. We generally make mistakes with buttons. Instead of creating tags, we create

tags, which is not ideally correct. Though it may bring the same outputs, screen readers will not identify the later one as a button.

#4 Mandate alt text and labels

As per the WCAG 2.0 all the non-text content presented to the user has a text alternative that serves a similar purpose.

Text is the most optimal content form, so make sure that you add alt text for all the image tags and for user interfaces, you can use the labels to describe the tags and their purpose.

< img src=”cat.png” alt=”An image of a big white cat.” / >
< div role="navigation" aria-label="First list" >
 < ul >
   < li >List of states< /li >
 < /ul >
< /div >
< div role="navigation" aria-label="Second list" >
 < ul >
  < li >List of cities< /li >
 < /ul >
< /div >

#5 Use headers correctly

You should program Assistive technology used in screen readers in an orderly fashion. Hence, even we should use HTML tags like headers h1-h5 appropriately. We cannot use randomly any header tag just because its font size matches our content need. It has to obey the hierarchy.

< h1 > Main Header < /h1 >
< h2 > Main Sub Header < /h2 >
< h3 > Sub Sub Header < /h3 >

#6 Handle live announcements

How does a visually challenged user get to know when you update some data on your webpage? For example, your webpage fetches some external data from an API, how does the screen reader get to know about it?

Live announcements handle this. Let us go through an example to understand it better,

import React from "react";
class Announcements extends React.Component {
 render () {
   return (
       < div aria-live="polite" aria-atomic="true"
         className="visuallyhidden" >
         {this.props.message}
       < /div >
   );
 }
};
export default Announcements;

We have created a live announcement here. Now, the screen readers will read the text out loud for your users depending on the choice accessibility attributes aria-live and aria-atomic. Then, we need to create a state property in the parent component.

this.state({
 message: null;
});

Next, you set the message for the users.

this.setState({
 message: “New Message for you!”
});

Finally, we have to include the announcement in the parent component like this,

< Announcements message={this.state.message} / > 

#7 Use Fragments

Fragments in React, allow grouping child elements together without creating additional DOM nodes. We all know that programmers should wrap every react element within an HTML element for its correct rendering. And most developers, including me, encase all elements within div tags. Such excessive and unthought use of div tags turns out to be non-semantic HTML. Reminding once again- Semantic HTML is a must for accessibility.

Here, fragments make screen readers’ work easy. For example, this structure turns out to be non-semantic HTML,

< ul >
< div >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
 < /div >
< /ul >

Instead, you should write fragments like this:

< React.Fragment >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
< /React.Fragment >

Or else, merely writing the fragment wrapped in empty angular brackets also makes semantic HTML output for screen readers.

< >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
< / >

#8 Keyboard focus

The keyboard focus is of prime importance when implying accessibility. Also, it is of crucial precision and hence judiciously-used. When users are not able to use the standard input mechanisms, they find it challenging to get through your website. It is thus, essential to handle the most crucial input-keyboard focus.

React introduced a ref function for keyboard focus handling. It can be used as shown in the below example:

< div ref={(contentHolder) => { this.contentHolder = contentHolder; }} tabIndex="-1" aria-labelledby="pageHeading" >

Create a ref function called contentHolder on the outermost parent div. The tabIndex=-1 will allow non-focusable div to receive keyboard focus via ref

Now that we have created the ref, let’s use it along with the lifecycle method to shift the keyboard focus on page load:

componentDidMount() {
    this.contentHolder.focus();
}

This way you may handle keyboard focus.

Apart from these HTML techniques, you can also use the vast React community support and make your apps available for everyone.

Accessibility Testing and Development Tools

The React ecosystem is vast and constantly expanding. It avails many ready tools for developers. Some of the useful tools for attaining accessibility in your web app are:

• eslint-plugin-jsx-a11y

This library is a linter plugin to check your code for accessibility since you start developing your website. It includes 33 testable rules that help you attain accessibility covering alt-text, and label-has-for.

• react-a11y

This one is analogous to the above plugin (eslint), but it is for run-time analysis. Developers can require this module in the main application, and it will throw warnings in the console on application-rendering.

• react-aria-modal

The React team recommends this modal library, which complies with the web accessibility standards. It checks if your website is accessible to screen readers and also handles keyboard focus, key mapping, and ARIA roles to ensure the same.

• Web AIM Colour Contrast Checker

This tool analyzes the two colors you choose for your website and gives you a contrast ratio to meet the accessibility guidelines.

• WAVE Browser Extensions

The WebAIM developed the WAVE (browser extension for firefox and chrome) in the form of community service. By using this extension, your data does not reach the server, and you can locally check any web-page for accessibility.

• Lighthouse

Google came with Lighthouse, which is an automated tool for improving the quality of web-pages by auditing their performance, accessibility, SEO, progressive web apps (PWA). You can use it with Chrome Dev Tools, command line, or as a Node module.

Upshot

I hope this post has opened up insights on accessibility and how to attain it with React. If you have other ways to achieve accessibility, do share your suggestions in the comments section below.

If you are looking for assistance to implement Web and Mobile Accessibility Solution for ADA, WCAG 2.1 & Section 508 Compliance, then Hire ReactJS Developer from us to create more accessible, interactive and discriminating web solution. We have certified Web Accessibility Specialist who can help you build a phenomenal website in accordance to meet your compliance goal.