Introduction

An important consideration when designing a website is how people will work with it. We want to design our websites in a way that they are useable by everyone in our anticipated audience - bet that everyone in the world, university students, employees at our company, or customers of our business. But there is a segment of each of these audiences that is often overlooked - those with disabilities.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Sir Tim Berners-Lee

Globally, about 15% of the world’s population experiences some form of disability. The UN Convention on the Rights of Persons with DIsabilities recognizes access to the Web, and the information it makes available, as a basic human right. Many countries have followed suit, even codifying accessibility requirements into laws like the Americans with Disabilities Act.

In short, it is vital when you author a website, you consider how those with disabilities will interact with it. Moreover, building your website to be accessible will also make your website more usable for all users.

Accessibility Standards

The W3C has crafted a number of accessibility standards, as introduced in the following video Introduction to Web Accessibility and W3C Standards created by the Web Accessibility Initiative:

The specific W3C standards covering web accessibility are:

Web Content Accessibility Guidelines (WCAG)

The WACG is built around four principles for content delivered through the web. It should be ¹:

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses).

2. Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

3. Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

A discussion of the WCAG standards and the standards themselves can be found on the W3C WCAG page.

Authoring Tool Accessibility Guidelines (ATAG)

These guidelines apply to software tools made to help people author web content (i.e. wikis, content management systems, and web publishing tools). Increasingly, these are web apps that people use to author websites and other web apps. A discussion of the WCAG standards and the standards themselves can be found on the W3C ATAG page.

User Agent Accessibility Guidelines (UAAG)

These guidelines apply to user agents - software that consumes and displays information from the web. The best-known of these are web browsers and media players. A discussion of the WCAG standards and the standards themselves can be found on the W3C ATAG page.

Perceivable Content

What makes web content perceivable? Broadly speaking, the user must be able to see the content through one of their senses. We primarily think about this in terms of sight - the user should be able to see the content of the rendered page. But what we hear can also be a critical piece of perception.

Vision

We often think of vision as the primary sense for engaging with web content - after all we read text and view pictures and videos. So where does perception through vision have potential issues?

Screen Resolutions

Let’s start by revisiting an idea we covered in Chapter 4, responsive design. When a website that does not use responsive design is viewed on a cell phone screen, it is rendered at a larger screen size, then scaled down to fit in the actual viewport. This helps preserve the layout of the page as it was designed, but also means the text is scaled too small to read, and the user must zoom in and pan to see it. Responsive design avoids this pitfall by using a more appropriate layout on a smaller screen.

Browser Zoom

Most browsers also support zooming in and out using either a keyboard shortcut ([ctrl] + [+] to increase, or [ctrl] + [-] to decrease) or a menu option. This can make it easier to read (much like large-print books), but changes the viewport size much like described above. Thus, responsive websites work much better with browser zoom.l

Screen Magnification

This also reflect the experience of using a computer for many low-vision users. They often utilize magnification tools that are built into modern operating systems to zoom in on a section of the screen. Try it yourself using the tool available on your operating system:

• Windows Magnifier
• Mac Zoom
• Chromebook Magnifier
• Android Magnification
• iOS Magnifier

You will likely find that while it makes a portion of the screen easier to see, you now must pan carefully to see the full content of a page. Keep this in mind as you consider complex layouts where text flows around elements. While they may be visually appealing at normal sizes, these disjunctions can be difficult to follow when using a magnification tool.

Colorblindness

Colorblindness is a condition where a person cannot distinguish the difference between certain colors. It is a very common condition affecting 1 in 12 men, and 1 in 200 women. Broadly it is categorized into categories by what colors are difficult to perceive differences between:

• Shades of red and green
• Shades of blue and yellow
• Any colors In addition, as eyes age the lenses yellow, which causes blue light to scatter when entering the eye. Older people may therefore have trouble distinguishing shades of blue, green, and violet.

When using colors to convey meaning to your users, it is therefore a good idea to:

• Use strongly contrasting colors (i.e. opposites on the color wheel, along with highly contrasting shades)
• Provide an alternative method for communicating the meaning implied by color choices (i.e. use icons or words along with the color)

Screen Readers

A second important tool for the visually impaired is a screen reader - a program that reads the content of a screen. As with magnifier tools, screen readers are built into modern operating systems. Find yours and give it a try:

• Windows Narrator
• Mac Voiceover
• Chromebook ChromeVox
• Android TalkBack
• iOS Spoken Content

Some important things to keep in mind for screen readers:

1. Images should always have a descriptive alt attribute to describe what the image conveys.
2. Table-based layouts (a staple of 90’s web development) are a bane for screen readers. Try using a screen reader to read the 1996 Space Jam Website - you’ll quickly see why that is a terrible idea. Tables should be reserved for tabular data.
3. Interactive widgets constructed from DOM elements are largely ignored by screen readers, unless you’ve used ARIA tag attributes. Whenever possible, use the widgets that are part of standard HTML, as these will be read correctly. If not, make sure you use ARIA (we’ll discuss that soon).
4. Likewise, elements like <div> don’t convey any kind of role to a screen reader. Consider using the semantic equivalents, i.e. <main> for main content, <aside> for sidebars, <nav> for navigation elements, etc. Otherwise, include aria-role attributes in your <div> elements.
5. Labels and inputs need to be linked with the for attribute so that the screen reader associates the label with the right input.

Audio

Other content is delivered through sound - especially video and audio recordings. Video can (and should) be provided with the option of closed captioning. Audio and video both can have a script provided.

Operable Content

In short, the user should be able to interact effectively with your website. There are two primary tools we use to interact with websites - the mouse and the keyboard. Additionally, many assistive technologies mimic one or both of these.

Keyboard-Only Control

While most of us use a mouse as our primary control tool for working with any software, many users cannot use a mouse effectively. For these users, it is important that the entire web page can be controlled using the keyboard.

Tab Order

An important mechanism for replacing mouse movement in a keyboard-only control scheme is the use of the [Tab] key to move focus to a particular element on the page. Try using your tab key on this page - you’ll notice that different interactive elements of the page are highlighted in turn (i.e. links, buttons, videos, inputs, etc.). Pressing [Enter] while a link is focused will follow the link. Pressing [Space] will start or stop a media element (video or audio).

The order that the [Tab] key moves through the elements on the page is known as the tab order, and generally will be in the order the elements appear on the page. However, this can be overridden in HTML by the setting the tabindex attribute. This attribute can also make an element that is not normally in the tab order (like a <p> tag, tabbable).

Accessible Rich Internet Applications (ARIA)

Many web applications utilize regular HTML elements to create interactive experiences. When these rely on vision and mouse interaction (for example, image carousels), they can be inaccessible for many people. The roles and attributes defined by ARIA seeks to provide a mechanism to allow these widgets to interact more effectively with assistive technologies.

They do this in two ways - through the use of roles (which describe the role of the element in the page) and through attributes (which convey information to assistive technologies).

ARIA Roles

The roles describe the intent of an HTML tag that has no semantic meaning - i.e. a <div>. This can help convey through a screen reader what most users would deduce visually. For example, if we were displaying a math equation, we could use the math role:

<div role="math">
  y = 1/2x + 3
</div>

Likewise, an image containing an equation could be labeled with the math role:

<img src="line-eq.png" alt="The equation for the line y = 1/2x + 3" role="math">

ARIA began as an extension to HTML, but many of its ideas have now been integrated directly into HTML through semantic equivalents.Where possible, use HTML5 equivalents, i.e.

• article use <article>
• figure use <figure>
• img use <image> or <picture>
• main use <main>
• navigation use <nav>
• region use <section>

You can find a complete list of roles and recommendations for using them in the MDN documentation.

ARIA Attributes

ARIA attributes convey information to assistive technologies. For example, the aria-hidden attribute signals to assistive technologies that a particular element can be ignored by the assistive technology. Consider a product logo that appears in multiple locations on the page.

<img src="logo.png" alt="logo" aria-hidden="true"/>

The aria-hidden here indicates to a screen reader that it does not need to call out to the viewer the existence of the logo.

You can find a full list of ARIA attributes in the MDN Documentation.

Understandable Content

Understandable content means that the user can easily make sense of it. This clearly includes of reading and understanding the text of the page. You should strive to use proper grammar, correct spelling, and write to your audience’s expected reading level (or slightly below).

But this requirement also covers users understanding how to make use of interactive elements, especially graphical user interfaces. Making your content understandable benefits all users of your website, and is a staple to good web design.

Finally, it also means that navigation, especially finding information on your website - should be clear and understandable. Universities are rightly criticized for having difficult-to navigate web sites. No doubt you’ve encountered this yourself.

Consider that a staple how-to design manual for web development is titled “Don’t Make me Think”:

Robust Content

Finally, content should be able to be accessible even as technology advances. A robust website will continue to function well into the future. This is best done by following the existing accessibility standards.

Development Tools

Just as you can use W3C’s validator to help validate your HTML, tools exist to help evaluate the accessibility of your websites. The easiest of these are integrated into the developer tools of your browser. The following video covers using Chrome developer tools to address accessibility bugs:

We’ve also talked about Screen Readers and Magnifiers, which are typically integrated into your operating system. You can use these to experience your web page the same way a disabled user might.

Similarly, a colorblindness simulator can alter the colors in your screen to simulate what a colorblind person might see. A good example is Color Oracle, a free and open-source tool that runs on Windows, Mac, and Linux.

Summary

In this chapter, we discussed the need to build our websites to be accessible to all users. We also discussed many common disabilities that users may have, and strategies for addressing these in your web design. We also reviewed tools that we can take advantage of to build accessible websites.

We also learned that many of these techniques benefit all users. Strong color contrast can help both the vision impaired, and also help make your site visible on a screen outside on a bright day. Designing your user interface to be intuitive means it will be easier for all users to navigate.