The Accessible Web ↘

The Accessible Web
Jacob Vogelbacher
Development

An integral aspect of the Web is its usability by all people, to the greatest extent, without the need for adaptation. More specifically, the content presented through websites should be perceivable, navigable, and understandable to all.

Accessibility is often associated with disabilities. These may include auditory, cognitive, neurological, physical, speech, and visual impairments. However, accessibility also pertains to people without disabilities. For instance, someone could be using a device with an uncommon screen size or input method, such as a smart TV or video game console. A parent could be using a computer while holding their baby, temporarily limiting them to only one hand. Situational limitations can also play a role, as you could be browsing the web on your smartphone while outdoors in bright sunlight. Someone could also be in a quiet setting that would be inappropriate for playing audio, or perhaps they have a slow internet connection.

Accessibility is about building websites that recognize these limitations and prevent them from compromising people’s experience or even being a barrier to entry.

The Meaning of Accessibility

So who decides whether or not a website is accessible? Enter the World Wide Web Consortium (W3C). In 1997, the W3C launched the Web Accessibility Initiative (WAI) in an effort to develop standards specifically for accessibility on the Web. This led to the creation of the Web Content Accessibility Guidelines (WCAG), a set of recommendations intended to act as a single shared standard for web accessibility.

WCAG is guided by 4 principles of accessibility: Perceivable, Operable, Understandable, and Robust. Each of these principles contain guidelines with testable success criteria. There are three levels of conformance that can be achieved by meeting these criteria: levels A, AA, and AAA. Each level represents a higher degree of conformance and requires more criteria to be met. So in order to achieve Level AA, all criteria associated with levels A and AA must be met.

Motivators

Good accessibility practices tend to overlap with other best practices on the web, making the user experience more enjoyable for everyone. One major aspect of WCAG, under the Operable principle, is keyboard accessibility. This guideline recommends that all functionality of the website be completely operable through a keyboard, without the use of a mouse. Not only does this aid those with disabilities, but also results in well organized navigation and tends to make certain features like image galleries easier to use.

The positive impact of accessibility can also be felt in the realm of search results. Search engines have no way of “seeing” images or videos on a website, so text alternatives must be present in order for that content to be discovered. Preparing transcripts and captions for audio and video content will not only benefit search rankings, but also provide a text equivalent to those who would be unable to perceive the content otherwise.

Legality is also a significant consideration that is becoming increasingly prevalent. The Americans with Disabilities Act (ADA) prohibits discrimination on the basis of disability, and even though it does not specifically mention websites, it has been widely interpreted to apply to them. The Department of Justice has held that in order to be considered ADA compliant, a website must meet the WCAG Level AA criteria. But does the ADA apply to everyone? Title II and Title III of the ADA are the most relevant sections regarding web accessibility. Title II applies to local and state governments, while Title III applies to places of public accommodations (in other words, businesses that are open to the public). So if Title II or Title III apply to an organization, they also apply to that organization’s website.

Make My Site Accessible

The WCAG has a long list of criteria, but let’s walk through each of the principles and cover the primary considerations that they entail. This is by no means an exhaustive guide, but these points are a great place to start for those wishing to dive deeper into accessibility. 

Perceivable

“Information and user interface components must be presentable to users in ways they can perceive.”

This means text alternatives must be provided for all non-text content. For example, all “img” elements must make use of the “alt” attribute, even those that are purely decorative. There are too many situations that involve graphics in user interfaces to cover them all here, but the W3C has a guide that covers the many different uses of images and how to provide appropriate text alternatives.

Aside from text, another big aspect of this principle is the use of color. Color cannot be relied upon as the only visual means of conveying information. For instance, hyperlinks in a paragraph of text should have an underline or some other visual indicator that they are a clickable link. The color of text must also meet minimum contrast requirements, depending on the conformance level. There are many useful contrast checker tools online, but one that is particularly helpful to developers can be found in the Google Chrome DevTools. Click on the swatch next to the value of an element’s color property and it will provide the contrast ratio of that color, which conformance levels it meets (AA or AAA), and a visual indication of how much the color would need to change in order to meet the contrast requirements.

Operable

“User interface components and navigation must be operable.”

As mentioned earlier, this mainly relates to the ability to use the keyboard to operate the site. Using the Tab key, a user should be able to progress their focus throughout the elements on the page and use the Enter key to act upon components like links or buttons. There must also be a visible indicator of keyboard focus, so any element whose appearance would change on mouse hover should also change on keyboard focus.

Understandable

“Information and the operation of user interface must be understandable.”

This principle mostly has to do with making content readable, predictable, and providing some assistance when user input is required. The HTML element should indicate the language of the page through the use of the “lang” attribute, the navigation should be presented consistently throughout the site, and form fields should indicate errors and describe them to the user in text.

Robust

“Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”

A common assistive technology in the realm of web accessibility is the screen reader. This is a piece of software on your computer that parses the content of a web page and reads it aloud. In order to help screen readers do their job, web developers must write proper semantic markup and provide appropriate names and labels to interface components such as buttons and form fields.

Wrapping it Up

Building websites with accessibility in mind is certainly an investment, but it can have valuable returns. From the end user navigating the site to find their desired content, to the business stakeholders concerned with bounce rates and audience reach, to the developers maintaining the codebase, everyone stands to benefit from an accessible web.