Accessibility in React

Accessibility (a11y) is very important for Developers to take into consideration. We need to design our applications so that ALL people can effectively use our applications. The internet is becoming more integral to our lives and we need to make sure that everyone can use them regardless of their abilities. Disabled people also account for a large percent of the population; over 25% of the US population is disabled in some way.

Accessibility can help people other than disabled people that’s another reason why implementation is so crucial. For example, making sites accessible can help people who might have slow internet or unusual devices who do not have the ability to load images.

We should strive to design our applications with accessibility in mind even though it may seem unnecessary to the actual functioning of it; we should it supports social inclusion for people. It might be difficult to figure out how to do this in our applications but, thankfully React has set up standards and documentation for making our apps easily accessible. In web development when we want to implement accessibility we want to allow assistive technology to interpret web pages that we create.

A good place to start when thinking about accessibility is The A11Y Project’s checklist. This is not only pertinent to React but all web content. The checklist follows WCAG’s guidelines for accessibility. The checklist gives us clear and simple things that we can do to make our site better for everyone. Following these guidelines also makes our code cleaner and easier to understand.

In React, accessibility for the most part, follows the same principles as HTML as they are carried over into JSX. As developers this makes the learning curve simple and easy. The React documentation on accessibility gives us a straightforward way we can implement

Alt Tags

Using alt tags in images is very easy way to make a site more accessible. This helps people that might be visually impaired. An example of an alt-tag is shown below. This coupled with semantic HTML i.e. elements with meaning help us to make websites that can be read by screen readers.

<img src =”image-location” alt=”this is where your image description goes”>

Page Titles

Page titles are very important for users who use screen readers and again it is a very simple way to make our sites accessible. A react example is shown below.

componentDidMount() {  document.title = “this is the page title”;}

Keyboard Navigation

Having keyboard navigation is crucial as many assistive devices use keyboard controls to navigate the site. People that have motor disabilities or even people who lack fine motor controls use a keyboard for navigation. A very important aspect of this is the use of tab to navigate through links on a page.

The WAI-ARIA

The WAI-ARIA shows us how to build JavaScript widgets that are fully accessible. This allows us to add semantics to elements that might not have any native semantics. This is basically a “description” for assistive technologies to read and transmit to the user. Below is an example of an input tag that utilizes aria HTML attributes.

<input
  type="text"
  aria-label={labelText}  
  aria-required="true"  
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Implementing accessibility is something we as developers should strive for. The standards put in place allow us to build website that are close to being universally accessible and it should be our duty as developers to keep the web open for all.