What is Accessibility A11y?
In any website, accessibility refers to a specific design or a website’s development that comes under the banner of user-friendliness. Website accessibility makes sure that there is enough comprehension for every website visitor. The visitors also include people from different categories, age groups, and disabilities.
For example, people having auditory, cognitive, neurological, physical, speech, or any visual disability. By implementing accessibility, the developers make sure that people from every category can easily comprehend everything that is going on. Accessibility commonly means the tools and technologies to make the websites and applications easy to access for customers.
The accessibility of an application or a website usually refers to the clickable buttons, the dropdowns, space to search or write a comment, and related components. They are famously known as A11y, a numeronym given to it as it starts from “A” followed by eleven more letters and ends with a “y.” React supports inculcating accessibility in websites by utilizing standard HTML techniques.
Need of Web Accessibility
Accessibility is an important part to consider throughout the development process. Accessibility ensures a better user experience for all potential customers, including people with disabilities. Websites that use accessibility features make sure to think out of the box instead of the typical layouts and designs to better user reach. The usability of a site increases by implementing best accessibility practices. Accessibility provides equal chances of usage to disable people just like others. Accessibility practices must be inclusive in the design and not treated as a feature separately.
Potential Users of Accessibility Techniques
Usually, the developers use accessibility techniques to cater to people having some kind of disability. On the other hand, these techniques also prove beneficial for users who do not have any disability. These users include the following:
Smart Devices Users: Users who have intelligent devices such as mobile phones, smartwatches, smart TVs, and various other devices having smaller screens. These numerous devices also have different input modes, which the users need to cater to differently.
Older People: The old-aged users have difficulty adjusting to websites and designs, changing too often.
Temporarily Disabled: Some users often go through temporary disability. For example, going through a broken arm or eyesight problem.
Situationally Limited: Some users might face situational limitations. For example, using devices in sunlight or being stuck in a scenario where they cannot hear audio from the device properly.
Network Connectivity Issues: A wide range of users face situations like slow internet connection or a limited or expensive bandwidth issue.
Standards and Guidelines for Accessibility
There are specific guidelines that ensure the end-product is fully accessible to its users while developing a website. Some prominent features to include in the accessibility are the support for screen readers, keyboard usability, and caption on photos. Some of the crucial guidelines for accessibility are following:
WCAG
The W3C process developed WCAG in cooperation with individuals and companies globally to maintain standard web content for every user worldwide. The Web Content Accessibility Guidelines (WCAG) give proper guidelines to create accessible websites. It includes the WCAG checklist from Wuhcag, the WCAG checklist from WebAIM, and the checklist from the A11y Project. The guidelines are about the non-text content, audio-only and video-only content, captions, sequences, usage of colors, keyboard functionalities, pause, stop and hide, and many more.
WAI-ARIA
The Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA) document contains techniques for building fully accessible widgets of JavaScript. It is helpful in dynamic content, and advanced user interface controls. Ajax often develops these HTML, JavaScript, React, and other similar technologies.
Semantic HTML
Assistive technologies like screen readers do not quickly parse the non-semantic code. Hence, the app becomes non-accessible. Therefore, there is a need to use semantic HTML to increase the accessibility of websites and applications. Semantic HTML is the correct use of HTML markup to reinforce the meaning of the information in web pages and web applications instead of just making the code presentable. Using semantic HTML proves beneficial for developers and testers. The best practice is to use < > or <fragment> in the code to avoid using too many <div> and creating an obstacle in understanding and debugging the code.
Example
A simple example of using semantic HTML is following:
import React, {Fragment} from 'react';
function EmployeetList() {
return (
<Fragment>
<dt>1</dt>
<dd> John Doe</dd>
</Fragment>
);
}
Accessibility in React Applications
There are various SOPs to achieve accessibility in React applications. Some of the options to ensure accessibility is following:
Casing
Semantic HTML practices for React Components require attention to the casing of attributes. For example, in React, most of the HTML attributes are developed in the camel case. Some of the simple examples of this casing are following:
maxlength is converted into maxLength tabindex is converted into tabIndex contenteditable is converted into contentEditable
On the other hand, JSX supports the aria-* attributes of HTML. Also, these are recognized by hyphen-cased kebab-cased compared to plain HTML. An example of this is following:
aria-label={labelText}
aria-required=”true”
Reserved Words
There is a clash on some reserved words in HTML and JavaScript as they mean entirely different in both languages. A simple example of class and for in React as the reserved terms are followed.
for is converted into htmlFor class is converted into className
Page Titles
Page titles are considered important for screen readers. Setting up correct page titles increases the accessibility of an application. Page titles are announced first by the screen readers. It enables locating the customers in an application by updating the fresh content shown in the browser tab. Setting up page titles proves helpful in Search Engine Optimization (SEO). Developers can set the page titles by using the following piece of code:
componentDidMount() {
document.title=” the page title”;
}
For React, there is a plugin named react-helmet which helps in handling head tags per page or per component. The plugin is used in the following example:
import React from “react”;
import {Helmet} from “react-helmet”;
class Sample extends React.Component{
render() {
return (
<div className=”sample”>
<Helmet>
<meta charset=”utf-8” />
<title> Page Title </title>
<link rel=”canonical” href=http://site.com/example/>
</Helmet>
</div>
);
}
};
Using Text Alt for Content
The most optimal format for any content is its text. Using text alternatives for every content is essential, especially for non-textual content. It helps recognize the content even if there is a delay in loading the page or content. Following is an example of using alt in React:
<img src=”bird.png” alt=” This is a picture of a bird”/>
Moreover, to increase the understandability of the web page, the user interface can include certain labels. Following is an example of using labels:
<div role=” navigation” aria-label=” Primary”> <ul> <li> This is a list of links </li> </ul> </div> <div role=” navigation” aria-label=” Secondary”> <ul> <li> This is a list of links </li> </ul> </div>
Handling Headers
Another option to maintain accessibility in an application or a page is to use headers correctly. It is crucial to make screen readers use headers correctly to serve their purpose instead of confusing their working process. A good practice is to use a separate CSS file for the styling of headers if needed for the document. An illustrative example regarding the purpose of headers is following:
<h1> Main Heading </h1> <h2> Sub Heading </h2> <h3> Sub Sub Heading </h3>
Moreover, there are numerous other options to implement while focusing on increasing accessibility in the application or a web page. For example, handling live announcements, focusing on the keyboard, using fragments, and utilizing other technological tools for accessibility.
