Accessibility In React

When developing applications it’s easy to continue coding without accessibility in mind. When in fact there are features in React that provide help in making the web more accessible. Today we will be going over some basic features that React enables and/or supports, as well as some basic implementations.

Why Web Accessibility

People who are visually impaired or those with motor disabilities and cannot use a track pad or a mouse pointer, for instance, succumb to the problem of not being able to have a relatively equal experience to the average user. We program with Inclusivity in mind by thinking about every user, equally. It’s important to move forward with the mindset that web accessibility is a ‘must-have’ and not just a feature.

Accessibility Standards and Guidelines

WAI-ARIA or the Web Accessibility Initiative — Accessible Rich Internet Applications is a set of standards for making the web accessible. Their documentation contains techniques for building fully accessible JavaScript components. It especially helps with web content that utilizes Ajax, and other JavaScript related technologies like React. It includes step by step instructions on creating dynamic content and beautifully illustrates how to make the web a lot more inclusive.

Find the link here

WCAG or the Web Content Accessibility Guidelines provides guidelines for creating accessible websites. This was created with the goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organisations, and governments internationally.

Find the link here

ARIA, or Accessible Rich Internet Applications is a set of attributes that define ways to make Web content and Web applications more accessible for users with disabilities. There is a large set of built-in HTML attributes to define ‘roles’ for an element, to provide more information to users using assistive technology, and/or provide effective navigation routes for our users. JSX actually fully supports ARIA attributes, and therefore can be used as attributes for elements and components in React.

List of ARIA roles here

What is Web Accessibility ?

Web Accessibility is the design of pages, tools and technologies on the web that can be used by everyone. Everyone here includes people with auditory, cognitive, neurological, physical, speech and visual disabilities. Accessibility support is necessary to allow assistive technology to interpret web pages and applications.

Building Accessibility web components in React ?

It can be hard to make accessibility a priority if one is utilizing unsemantic code. Using JSX in inefficient ways can cause major problems when it compiles. This can cause your code to not exactly render out semantic HTML, and where there is unsemantic HTML there are assistive technologies like screen readers that find it difficult to parse the content as it was intended. Therefore, making your application inaccessible.

Next, I’ll run through several strategies and tips in order to increase the accessibility of your application. These are tactics that will help you to write code with semantic value.

React Fragment

Fragments are a component provided by React that allow one to return multiple elements with their own semantic value. Doing this also allows you the freedom to not wrap multiple elements in

tags.

To ensure that every code block is accessible we must write good HTML semantic code. Let’s review the classic div/button mistake.

<div onClick={this.onClick} className=”button”>
<span>Click me</span>
</div>

This would render a button, but it is not an accessible HTML button, a screen reader would not be able to interpret this. This code has no role or other properties it can announce to the user to grasp the understanding or purpose of this button. A more accessible and semantic code that
does the same thing is this:

<button onClick={this.onClick}>
Click me
</button>

Explicitly set Live Announcements

import React from "react";

Function LiveTesting() {

return (
<div aria-live="polite" aria-atomic="true" className="listContainer">
<ul className='list>
   <li>item 1</li>
   <li>item 2</li>
</ul>
</div>
)}
};

export default LiveTesting;

aria-live with the polite value indicates that the screen reader waits till everything else is read before reading the updated content.

aria-atomic attribute set to true tells the screen reader that all page content would be announced, not just the updated content.
After the announcement component has been created, to use the live.

Accessibly Lint & Test Your Code

One of the best ways to lint your code inaccessible practices is to install and use the plugin eslint-plugin-jsx-a11y in your project. This plugin comes with numerous rules enabled, including alt-text and label-has-for. A similar tool, but just as useful is react-ally. After installing this tool properly, it’ll then send you warnings in your console when your app renders pertaining to accessibility.

Lastly, there's Lighthouse. This is a more of a all around performance, accessibility, SEO report center and those features will certainly come in handy. Lighthouse was developed by Google as an automated tool for auditing the performance and accessibility of web pages. It can be used within Chrome DevTools, from the command line, or as a Node module.

Here is an example of a report generated by Lighthouse.

Web Accessibility may seem like a daunting task but each day it is getting easier. I hope this post has helped you to create more widely accessible React Applications.

Resources:

Link for eslint-plugin-jsx-a11y - Here
Link to react-ally - Here
Link to lighthouse - Here