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.
Also See, Dropdown in React JS, Hooks in React JS
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
|
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
|
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:
- Color Contrast Checker on WebAIM
- Color Contrast Analyzer by The Paciello Group
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.
252+ registered 
