A guide to web accessibility for frontend developers

null

A frontend developers’ job is to present visual information that looks good and gives users cues to help them understand content quickly. Even a static, text-only web page is more than a collection of words. The page has a title that appears at the top. The title may be bold or in a large font size. In the body of the text, words are grouped into sentences that end with periods, and related sentences are grouped into paragraphs. Certain words in a sentence may be emphasised with bolding, underlining, or italics. These examples barely scratch the surface of the many, minute details of visual web page design.

These components may seem basic and unimportant, but for many people, accessing and reading text on a web page is difficult. For example, individuals with visual impairments often struggle to read the text. When I think of visual impairment, I picture a person who is blind, but there are many other types of visual impairment to consider, including colour blindness, low vision, sight problems caused by degenerative disorders, etc. The range of disabilities and handicaps users may have extends far beyond the visual category to include hearing, cognitive, motor, and other types of issues. Therefore, making sure a website or application is accessible rises to the utmost importance. 

Since frontend developers handle the visual presentation and functionality of web pages and applications, it’s important to be aware of and address the accessibility issues that exist for those who have disabilities and handicaps. While I all have a moral imperative to do my best to make websites and applications accessible, frontend developers in many countries also have a legal obligation to do so.

This post will define what accessibility means and will discuss what kinds of issues frontend developers need to be conscious of in terms of providing accessibility. This post will also review some of the available methods, tools, and resources to address these issues.

What is web accessibility and why do you need to be involved?

The World Wide Web was created for the purpose of sharing research amongst atomic physicists at CERN. As the web grew, the World Wide Web Consortium (WC3) was created to govern it. The WC3’s mission states that the web was created to enable human communication to benefit all people, no matter where they live or what physical and/or mental abilities they may have.

Web accessibility ensures that people with physical and non-physical disabilities have equal access to the web. It helps people with impaired auditory, cognitive, neurological, physical, speech, or visual functions perceive, understand, navigate, interact with, and contribute to the internet. To help web developers and designers make their pages and applications accessible, the WC3 launched the Web Accessibility Initiative (WAI), which provides guidelines for making the web available to people with disabilities. Providing accessibility also helps other groups, such as users of mobile technologies, older people, people who have temporary disabilities (e.g., someone who is recovering from an injury caused by a physical accident), and people in certain locations and countries with limited bandwidth.

Beyond the basic obligation to help fellow human beings, there are also practical reasons for providing equal accessibility. No matter what type of organisation I work for, be it commercial, non-profit, governmental, etc., I need to accommodate all users and customers. If I understand what users need and provide methods to meet those needs, any person, no matter their physical or other limitations, can buy our products and use our services.

As the reach of the internet spreads to individuals with limited income and to less developed countries, I risk losing huge numbers of potential customers if I don’t make products accessible to them. According to the World Health Organisation (WHO), one out of seven people of the world’s population is disabled or handicapped in some capacity. So, if I fail to meet this population’s needs, I’m missing out on approximately one billion potential consumers.

In some countries, frontend developers are also legally required to provide accessibility. Many governments around the world have adopted the WC3’s Web Content Accessibility Guidelines (WCAG) 2.0. WCAG 2.0 provides guidelines for implementing solutions, but it isn’t tied to any specific technologies. The UN and local initiatives have also used WCAG 2.0 as the basis for their accessibility legislation. Countries that currently have laws governing web accessibility include Australia, Brazil, Israel, the United Kingdom, the United States, and the member states of the European Union.

How to provide web accessibility

Since I have a limited amount of space in this post, I’ll concentrate on vision and cognitive impairments for specific examples of how to provide web accessibility.

One of the simplest ways to accommodate these users is to provide good page semantics. Semantics are the elements and structure of a page that give it meaning to a human reader. A page’s semantics are created by applying the correct HTML elements in the right sequence (e.g., using page headings H1 and H2 in the correct order). You can also differentiate between different types of content by using bulleted and numbered lists. Page semantics matter because assisted reading technologies, such as screen readers, use them to process the page and read it aloud to people with visual impairments.

Page semantics are also important for helping individuals with cognitive disorders. For example, people who have dyslexia can see words and pictures, but they have difficulty extracting meaning from the raw, visual input because of difficulties with processing contextual information like letters and word order.

There are a variety of ways to make information accessible for users with disabilities and handicaps. To help people with low vision and dyslexia, you can use a high-contrast colour palette. You can achieve this contrast by using a dark colour like black as the background colour and a bright colour like white or yellow for the foreground text.

Frontend development and accessibility

Frontend developers have the power to make equal accessibility a reality. There are a number of tools to use to build and test web accessibility. Let’s discuss some of the best tools:

ARIA

The Angular, React, and Vue frameworks all provide support for the Accessible Rich Internet Applications (ARIA) toolkit

ARIA is a WIA platform that standardises how developers can build web-accessible applications and present content for people with disabilities. It provides the required functionality for assistive technologies (e.g., means to control input devices for people with limited/impaired motor functions and screen readers for people who have visual impairments).

ARIA can be used as an indicator of the state of a web component to a screen reader or an input device. In a web application, components indicate their current state visually. If the state of the component changes, the object’s presentation changes. For example, a checkbox indicates the values are true by displaying a checkmark, and false by leaving the box blank. To support assistive technologies, additional semantic information is required so that the component’s state can be presented to the user.

To provide this information, add the ARIA-checked label to the component. If the page is read by a screen reader, it will use a label to inform the user if the box is checked or not. If the page is being used by a person with limited mobility, component state changes can be indicated via haptic feedback.

Ally.js

While ARIA can help identify components and provide state information to users, it doesn’t have any built-in support for navigating web pages. In this context, navigating a page refers to two things: moving between page components and indicating the order in which they should be used. For example, if a website requires a user to change their password, it will ask them to type a password into one text box, retype it into a second text box, and then press the submit button. After each step is completed, visual cues in the application tell the user what to do next and where to place the required input. For a user who is unable to use conventional input devices, it’s difficult to enter the information in the correct location and navigate to the next component in the correct order.

Ally.js is a library that enables users with restricted mobility and limited vision to navigate web pages. It does this by providing an accessibility tree that shows the structure of the page and indicates any objects and components that have semantic significance. The accessibility tree defines a web page’s Sequential Navigation Focus Order, which is a list that determines the sequence in which components are accessed via an input device.

Test Automation

There are many available tools for testing web accessibility but testing often involves boring and repetitive tasks. So, there are many tools and frameworks for automating functional, regression, and visual testing. Testing accessibility can be done by using the same methods and tools. The best tool for the job is the aXe platform, which is an open-source project that provides assertions for accessibility testing and integrates with a large range of testing and CI systems.

Conclusion: Committing to making the web accessible to all

Everybody, no matter what mental or physical restrictions they may have, should have equal access to the web. There are clear moral, economic, and legal reasons to make the web accessible, and there are also guidelines, techniques, and technologies available that can help frontend developers actually make it happen.

With the many tools available, creating accessible web pages and applications has never been easier. Accessibility support is baked into the major platforms via ARIA for frontend developers. If you need extra functionality that isn’t provided by your framework of choice, you can use ally.js. You can even do automated testing with the aXe platform to test your applications for web accessibility. With empathy, understanding, and the proper tools, frontend developers have the power and the responsibility to make the web accessible to all.

Gil Tayar, Senior Architect, Applitools
Image Credit: Moon Light PhotoStudio / Shutterstock