REACT Accessibility

Sneha Mallik
Last Updated: May 13, 2022

Introduction 

React has developed a stigma within the accessibility community that the web applications created in React are not accessible. Many accessibility advocates and even developers who develop in the framework think accessibility is a huge challenge that can be almost impossible to achieve. The reality is, React can be accessible as any other framework out there. It just takes knowledge and the willingness to do so.

What is Accessibility?

Accessibility refers to an application's capacity to be utilized by anybody, including people with disabilities. It is our responsibility as a developer to ensure that everyone has a positive experience with our software. To make our React application accessible, we must first understand what accessibility is. 

 

Accessibility refers to the tool or methods by which a website can be made more user-friendly by including features such as clickable buttons, dropdown menus, and spaces to leave comments and other information.

 

React completely enables the creation of accessible websites, which is commonly accomplished through basic HTML(Hyper-Text Markup Language) approaches.

Web Content Accessibility Guidelines

The Web Accessibility Initiative (WAI), a W3C(World Wide Web Consortium) initiative, developed WCAG(Web Content Accessibility Guidelines) for providing developers with technical specifications and suggestions on how to improve web usability for individuals with disabilities. The most recent version of the WCAG is 2.1.

 

The WCAG is based on four basic principles:

  • Perceivable - All user interface components must be presentable to users in a way that they can understand, i.e., it cannot be invisible to all of their senses.
  • Operable - Users must be able to operate the user interface.
  • User-friendly - The user must be able to use the interface. Functionalities must not be incomprehensible to them.
  • Robust - It must be resilient enough that even as technology advances, people will still be able to access the material.

Users with impairments will be unable to access the web if any of the above is not true, according to the WCAG.

WAI-ARIA

Techniques for creating completely accessible JavaScript widgets can be found in the Web Accessibility Initiative — Accessible Rich Internet Applications(WAI-ARIA) publication. It's particularly useful for developing dynamic content and complex user interface controls using Ajax, HTML, JavaScript, and related technologies like React.

General React Accessibility Issues

 

  • Page/View Titles - One generic page title that cannot be changed.
  • Focus management - Applications can't be navigated using the keyboard due to focus management.
  • Keyboard Navigation and Events
  • Dynamically Added content
  • Component Libraries(packages)
  • Extra <div> and wrappers can cause semantic issues
  • It isn't easy to use semantic HTML

 

The list goes on and on, and while all of these are genuine accessibility concerns, they are all challenges that can be addressed inside the framework itself.

The easiest solution to overcome all of the stigmas mentioned above and worries is to raise awareness that React has a lot of accessibility built into the framework and a strong community of accessible add-ons that can assist you in creating accessible components.

Solve the React Accessibility Issues

 

  • By using the Semantic HTML
  • By taking advantage of the Component Life Cycles
  • By using Fragments wherever possible
  • By checking on the add-ons for accessibility
  • By taking advantage of the title package and services
  • By using the automation for testing the components

 

Why use React accessibility?

Since it includes a significant number of web users by default, not supporting web accessibility has been viewed as a very unpleasant way of thinking. People who can't see or can't utilize a trackpad or mouse pointer for whatever reason should have the same rights and access as those who can. The inclusive design begins by considering every web user equally; this will quickly lead you to regard web accessibility as a must rather than a feature. Web accessibility is also beneficial to persons who are not disabled, such as:

 

  • People who use mobile phones, smartwatches, smart TVs, and other small-screen gadgets with various input modes, etc.
  • People who are older and whose abilities are deteriorating as a result of their age.
  • Those who have "temporary disabilities" such as a broken arm or glasses that have been misplaced.
  • Those having "situational restrictions," such as being in direct sunlight or being unable to listen to audio.
  • Folks with a poor Internet connection or limited or high-priced bandwidth.

How to solve React Accessibility issue

React supports accessibility by using the standard HTML techniques. Let's discuss them one by one.

Semantic HTML

It is convenient for both the developer and the testing team, that is why semantic HTML is the core of web accessibility. To make our code work, we sometimes wrap it in too many <div> tags, which creates an issue with understanding and debugging the code.

To avoid this, we sometimes utilize components like <></> or <fragment></fragment> to our advantage. Remember that we should import fragments first.

import React, {Fragment} from 'react';
function employeeListPresent(){
return(
    <Fragment>
        <dt>CDN34412</dt>
        <dd>Stella Saha</dd>
    </Fragment>
);    
}

 

To know more, read React Fragments.

Label Property

Label HTML form controls to improve accessibility.There are numerous label features in React such as <input> and <textarea>. The value of a label's attribute is set or returned via the label attributes property.

<label htmlFor="name">Name: </label>
<input id="name" type="text" name="name" />

 

Note: The 'htmlFor' attribute is one of the label properties that sets or returns the value of the 'for' attribute.

Keyboard Focus

The part of the web application that accepts data or actions from the keyboard from the user is commonly referred to as the DOM(Document Object Model) input. We can use ref functions to control where the user's attention is drawn in our programme. We may control the focus by using React.createRef().This is the most common situation when a user fills out a form or any other type of input field.

  • To save a reference to the text input DOM, use the ref callback.
  • Make a ref to keep track of the textInput DOM element.

Good keyboard navigation support may greatly boost user productivity, especially in apps that require a lot of data entry.

Reference in React

In React accessibility, referencing is more similar to a key. It's a react attribute that allows you to save a reference to a specific react element. When we need to update the child element without utilizing the prop, it gives a solution to access the React element for reference.

Setting the Page Title

For screen readers, it's critical to set the page title. The first thing screen readers mention is the page title. It helps to notify where the user (who may be using a screen reader) is in the application by updating the information currently displayed in the browser. It also helps with search engine optimization.

Text Alt

For the non-text information, the alt attribute is critical. Because the text is the ideal approach for every type of content, hence include text alternatives.

<img src="tree.jpg" alt="a picture of a big tree" /> 

Color Contrast

Ensure that any viewable content on your website has sufficient color contrast so that users with poor eyesight may see it effortlessly. We can understand the ‘Color Contrast Requirement’ in the WCAG.

Manually calculating the right color combinations for all scenarios in our website might be tedious, therefore using Colorable will help us compute a comprehensive accessible colour palette for us.

Color contrast tests are included in both the aXe and WAVE tools described below, and both will report on contrast mistakes.

You can utilize these tools to improve your contrast testing abilities:

Mouse and Pointer Events

We have to make sure that all functionality accessible via a mouse or pointer event may also be accessed via the keyboard. Using merely a pointer device can result in numerous instances where keyboard users will be unable to utilize the react application.

Frequently Asked Questions

  1. What do you mean by React accessibility?

Ans: The primary goal of web accessibility is to create or develop websites or software so that individuals with impairments can benefit from its services.

Accessibility makes it possible to treat everyone equally without making any exceptions for a situation or a person.

Although there are no similarities between the accessibility of a website and the existence of air, the concept of both being accessible to everyone is comparable. The notion of website accessibility was created to ensure that everyone, regardless of their circumstances, has equal access to information.

 

2. What do you mean by Semantic HTML in React.js?

Ans: Semantic HTML in a web application is the foundation for accessibility. When we add <div> elements to our JSX to make our React code function, we sometimes break HTML semantics, which makes it difficult to comprehend and debug the code, especially when working with lists (<ul>, <ol> and <dl>) and the HTML <table>.

 

3. Why is react accessibility needed?

Ans: 

  • React accessibility support is required to allow assistive technology to interpret web pages.
  • Accessibility refers to the tool or methods by which a website can be made more user-friendly by including features such as clickable buttons, drop-down menus, and spaces to leave comments and other information.
  • Users may find it faster to engage with your program using a keyboard rather than a mouse or touch screen because of React accessibility. 

Key Takeaways

 

In this blog, we went over the fundamentals of React accessibility. With the correct understanding and know-how, React may be an accessible application framework. It is simply not true that it is not an accessible framework. It comes with some of the best built-in accessibility features available and a vast community of accessibility supporters who are developing material that is easy to consume in the app. Hopefully, this blog will assist in increasing your React writing efficiency and make your website more accessible.

 

Enroll in our Advance Front-end Web Development Course- React.js to deeply understand the concept of React accessibility in Web Development. 

Credits: GIPHY

 

Happy Developing!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think