Any web application has users with diverse abilities, some of them may make use of assistive technology to navigate the web, this includes, screen readers, navigators, keyboards, and users not making use of the traditional mouse. In these cases, it becomes important to follow some basic practices to ensure that our application is usable and welcoming for all its users ❤️😄

Keyboard Focus

Browsers show a focus indicator around elements that are focused.

Sometimes we tend to remove focus indicators for aesthetic reasons, remember using the :focus selector and adding outline:none, if yes, removing the outline from focussed elements, is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. In case it's removed, it must be replaced by alternative indicators. In React we can use ref functions to handle where we want the user to focus on in our application.

Accessible Rich Internet Applications (ARIA)

As MDN says, Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

We could add certain roles and attributes to HTML elements, to define the kind of interactions that could be expected from them, consider this example,

<div id=“main-nav”>
<button id=“menu-button-1” aria-haspopup=“true” aria-controls=“menu-list-1”>Menu List 1</button>
<ul id=“menu-list-1” role=“menu” aria-labelledby=“menu-button-1”>
<li role=“none”><a role=“menuitem” href=“...”>Menu Item 1</a></li>
<li role=“none”><a role=“menuitem” href=“...”>Menu Item 2</a></li>
</ul>
</div>

Here, we consider a ul with the role of a menu, labelled by the element with ID menu-button-1, The aria-haspopup attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. The global aria-controls property identifies the element whose contents or presence are controlled by the element on which this attribute is set.

An important, but ignored principle in accessible web development is using the correct HTML semantics

The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Using the correct title for your document

The <title> tag defines the title of your document, As W3C says, Good page titles are particularly important for orientation — to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user goes to a different web page is the page title.

In single-page apps, particularly it's important to set the correct title for the current page, typically you could set the document title in the public/index.html file in your React code.

Add alternative text to images

The img tag in HTML has an alt attribute, which can be used to specify alternative text, screen readers make use of this text to describe the image, it is also shown in case the image fails to load, if the user has poor internet connectivity. Here is an example.

<img src="img.jpg" alt="this is alt text" />

Maintain Contrast Ratio

People with visual impairments may sometimes be unable to read text with a low contrast ratio (consider, grey text on a white background). For some people, extremely bright colors become unreadable. It is important that visual text meets some basic criteria related to contrast ratio. Web pages should have a minimum contrast by default: a contrast ratio of at least 4.5:1 for normal-size text. When browsers allow users to change the theme to suit their needs, the page should still work.

Regulate Flashing, Moving elements

Multiple Fast moving elements on web pages can sometimes cause seizures or discomfort to people with photosensitive epilepsy, especially if they occupy a large area of the screen. They also make it difficult to focus on the content of the page.

• Check if there are any moving, blinking, or flashing animations that start automatically and last for more than 5 secs.
• Users should have a way to manually hide these elements.
• No element should blink or flash for more than 3 times in a second (Three flashes or below threshold)

Testing for accessibility

Several tools are available to indicate the accessibility metrics.

• A11Y Compliance Platform by Bureau of Internet Accessibility
• axe-core - accessibility testing rules library by Deque Systems, Inc.
• Domain Accessibility Audit by Michigan State University

Next time while writing your piece of code, do incorporate some of these basic principles, to make the web a bit more accessible :)