The U.N. defines access to information, and to the web, as a human right. Yet much of the web excludes people despite robust technological support for accessibility. Find out what gets in the way of great experiences for all and learn how to build a friendlier web.

Disability is traditionally understood as a personal medical condition. This is known as the medical model and views disability as a problem with which individuals must struggle. Instead of acknowledging the inadequacies of the built environment, this view blames the user.

The social model views disability as the result of a mismatch between people and interactions. Disability is an experience rather than an individual attribute. It arises when a product does not accommodate a user’s mode of interaction.

Who Experiences Disability?

Disability can happen to anyone. This may include people with permanent or temporary impairments. But disability can also arise as a result of the user’s context and environment. Indeed, even people without impairments experience disability.

Disability can happen to anyone, whether or not they have impairments.

Disability can happen to anyone, whether or not they have impairments.

Image credit: Microsoft Inclusive Toolkit

Take sightedness for example. Designers and developers commonly assume that users are sighted and build experiences that simply won’t work outside of a visual context. But this assumption is wrong:

  • Blind users have a physical impairment that prevents them from using a product that assumes sightedness.
  • People with eye injuries may be temporarily impaired, preventing them from interacting with websites that only support a visual mode.
  • Automobile operators and those using voice-only devices are disabled by products that assume sight.

Accessibility to the Rescue

Accessibility refers to the qualities of a product that make it useful by as many people in as many contexts as possible. It can also refer to the discipline of making products accessible to everyone. Accessibility is an act.

On the web, accessibility, or a11y for short, is primarily governed by the W3C, which publishes the two most important standards: Web Content Accessibility Guidelines 2.0 and Accessible Rich Internet Applications Suite. Alone, they are dry reads. Fortunately, the W3C also publishes a friendlier guide.

Numerous companies publish their own recommendations built on WCAG. I highly recommend Vox Media’s Accessibility Guidelines. And Microsoft’s Inclusivity Toolkit is full of great resources.

But you needn’t memorize standards and checklists to do accessibility. There are some simple rules of thumb and a host of free tools available. The cost of building with accessibility in mind is actually quite low.

It’s Good UX

Accessibility is the foundation of good UX. An inaccessible product is a poor experience by definition. This point is easy to forget as designers strive for delightful visual experiences and developers strive for pixel perfection. We practitioners are heavily biased toward the visual experience. The web is more than a visual medium. Much more.

Design Tips

Make sure your designs remain accessible. While these tips are organized by discipline, both designers and developers can contribute to accessible design. Check each other’s work and celebrate opportunities to improve.

  • Ensure type size and color contrast meet the minimum ratios. The minimum contrast ratio for normal type sizes is 4.5:1 at AA rating, and 7:1 at AAA rating. Links should have at least a 3:1 contrast ratio with surrounding text.
  • Don’t rely on color alone. For example, ensure links have underlines or other visual separation from body text. Form validation states should include text, and possibly iconography, to indicate state.
  • Design color blind safe palettes if you can. Inspect your designs with a color blind simulation tool to ensure contrast.
  • Link text should make sense in isolation. Some users may not read or be able to read all surrounding text. “Click here” and “Learn more” are not sufficiently descriptive.

Development Tips

  • Valid, semantic HTML is accessible by default. HTML 5 contains a wealth of tags for expressing structure and semantic meaning. And use landmark elements where appropriate.
  • Indicate links among pages or views with <a>. Indicate actions with <button>. These are often used inconsistently.
  • Author accessible forms by ensuring all fields have associated form labels that are always visible (don’t rely on placeholders alone) and that keyboard accessibility is fully supported. Avoid custom-designed form elements, as they are usually inaccessible. A light touch on valid HTML form markup is the best approach. Let forms be forms: don’t fret if they appear slightly different in different browsers. Remember, the web is more than a visual medium.
  • Don’t rely on display: none; to visually hide meaningful information. This mistake is common with custom-designed form elements where the underlying form element is hidden. Screen readers may ignore this content, which may not be desirable.
  • Ensure useability with keyboard alone. Ensure proper navigation and form functionality. Notably, tab navigates among actionable elements, space toggles form elements such as selects and boolean fields, and return may activate links or trigger submit from anywhere within a form.
  • Use ARIA attributes where appropriate. ARIA attributes add an extra layer of meaning to HTML, making products more useful. All websites may benefit, but ARIA is especially useful in web apps where page content is dynamic.
  • Be sure to install the WAVE extension for Chrome, which simplifies accessibility evaluations. Depending on your frontend stack, some aspects of accessibility testing can even be automated.

Accessibility Is for Everyone

Whatever your role, you can help make the web more accessible. Being aware of accessibility concerns and following best practices gets us 80% there without a lot of extra effort. No matter the size of your project or the target market, it’s easy to get started. When the web is friendlier and more accessible, everyone benefits.