As front end developers, our 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 emphasized 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 we think of visual impairment, most of us automatically picture a person who is blind, but there are many other types of visual impairment to consider, including color blindness, low vision, sight problems caused by degenerative disorders, etc. The range of disabilities and handicaps our users may have extends far beyond the visual category to include hearing, cognitive, motor, and other types of issues. Therefore, making sure your website or application is accessible rises to the utmost importance.
Since front end developers handle the visual presentation and functionality of web pages and applications, we need to be aware of and address the accessibility issues that exist for those who have disabilities and handicaps. While we all have a moral imperative to do our best to make websites and applications accessible, front end 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 front end developers need to be conscious of in terms of providing accessibility. We’ll 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 our basic obligation to help our fellow human beings, there are also practical reasons for providing equal accessibility. No matter what type of organization we work for, be it commercial, non-profit, governmental, etc., we need to accommodate all users and customers. If we understand what our 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, we risk losing huge numbers of potential customers if we don’t make our products accessible to them. According to the World Health Organization (WHO), one out of seven people of the world’s population is disabled or handicapped in some capacity. So, if we fail to meet this population’s needs, we’re missing out on approximately one billion potential consumers.
In some countries, front end 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 we have a limited amount of space in this post, we’ll concentrate on vision and cognitive impairments for our 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 color palette. You can achieve this contrast by using a dark color like black as the background color and a bright color like white or yellow for the foreground text.
Front End Development and Accessibility
As front end developers, we have the power to make equal accessibility a reality. There are a number of tools you can use to build and test web accessibility. We discuss some of the best tools below.
ARIA
The Angular, React, and Vue frameworks all provide support for the Accessible Rich Internet Applications (ARIA) toolkit.
ARIA is a WIA platform that standardizes 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, you can 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 you 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
We all agree that 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 front end developers actually make it happen.
With the many tools we have at our disposal, creating accessible web pages and applications has never been easier. Accessibility support is baked into the major platforms via ARIA for front end 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, front end developers have the power and the responsibility to make the web accessible to all.
To learn more about Applitools’ visual UI testing and application visual management (AVM) solutions, check out the tutorials on the Applitools website. To get started with Applitools, request a demo, or sign up for a free Applitools account.
