Accessibility Basics for React Web Development

#react #javascript #html #webdev

Accessibility is essential to consider when developing web applications. We want our content and services to be available and useful for each and every person. There are various resources and tools at your disposal to ensure you create a React application that can be utilized by as many people as possible.

Semantic HTML

Semantic HTML is one of our most important resources. When rendering HTML elements with JSX components, it is best practice to use semantic elements - those with meaning and behavior. The focus is on an HTML element's functionality, rather than appearance. A good example would be to use the <button> element when you want to render a button to the DOM, rather than creating a <span> with click functionality.
A semantic element has a clear purpose and it is easy to tell what content it holds.
Semantic code is necessary for screen readers and other assistive technologies to properly interpret what is being rendered to the page.

React Fragments

Fragments function much like <div> in that you can encapsulate other HTML elements to properly render them to the page with JSX. However, a Fragment is not an HTML element that gets rendered to the DOM like <div>. Therefore, Fragment will not break the semantic HTML of your page.

<Fragment>s are a good alternative to <div> when you need to enclose elements.

Development Tools

eslint-plugin-jsx-a11y

Use this with ESLint- a tool for identifying patterns in ECMAScript and JavaScript code to prevent bugs and support consistent code.

In your terminal, enter: npm install eslint --save-dev

For the react plug-in: npm install eslint-plugin-react --save-dev

The eslint-plugin-jsx-a11y is an accessibility plug-in for ESLint that provides feedback on how to make your HTML elements more user-friendly. It will provide you with an error, as well as a link to the docs for solutions.

In your terminal, enter: npm install eslint-plugin-jsx-a11y --save-dev

Example:

The error shows the word "picture" is redundant in the alt text. Once we remove the word "picture", the error disappears.

react-axe

react-axe is a library for testing the accessibility support of your web application. It tests the elements being rendered to the DOM during your app's runtime. The results are shown in the Chrome Devtools console. You can download it directly from the chrome web store.