Introduction to web accessibility

Summary

This page contains:

• An introduction to web accessibility,
• An explanation of the "a11y" numeronym,
• The case for web accessibility,
• And an introduction to the web content accessibility guidelines.

What is web accessibility?

Web accessibility means that people with disabilities can use and understand the web.¹

The goal of web accessibility is that all people can perceive, understand, navigate, interact with, and contribute to the Web.

What is "a11y"?

"A11y" is a numeronym of the word “accessibility”.² Numeronyms are abbreviations that use numbers to shorten/abbreviate words. "Accessibility" becomes "a11y" by taking the first and last letters, "a" and "y", and tallying the remaining letters in between. In this case, there are 11 letters between "a" and "y", so it becomes "a11y". Another similar example is "i18n", which is the numeronym for "internationalization".

It's often joked that the "a11y" numeronym is not accessible. It's not immediately understood, without explanation. So why use it?

1. It's shorter. Social media platforms like Twitter have character limits. "A11y" uses nine fewer characters than the full word "accessibility".
2. It's discoverable. The "a11y" numeronym is most often used in the context of "web accessibility", specifically. Because the word "accessibility" is used in so many other contexts, searching with "a11y" rather than "accessibility" will yield more relevant search results on web accessibility.

Tatiana Mac explains this in a tweet thread far more eloquently than I'm attempting to here -- check that out.⁵

The case for web accessibility

Web accessibility is a basic human right. It increases business potential, and it's increasingly required by law.³

Web accessibility is a basic human right

The Web is an important resource in many aspects of life. For example: education, employment, government, commerce, health care, recreation, and more. The Web must be accessible to provide equal access and opportunity to all people. The United Nations Convention on the Rights of Persons with Disabilities (CRPD) is an international human rights treaty. The CRPD defines access to technology like the Web as a basic human right.

Accessibility supports social inclusion for:

• people with disabilities
• older people
• people in rural areas
• people in developing countries

Web accessibility increases business potential

Accessible websites provide an improved user experience for everyone. A user with a positive experience navigating your website will be more likely to take action. For example, signing up for a newsletter, buying a product, etc.

Web accessibility widens your potential customer base. Why would you choose to alienate potential customers?

Web accessibility is increasingly required by law

Countries are increasingly legislating protections for equal access to the web. This is a quickly-changing legal landscape. Building with accessibility in mind minimizes current and future legal risk. High-profile example cases include Domino's and Target.

The Web Content Accessibility Guidelines (WCAG)

The World Wide Web Consortium (W3C) maintains the Web Content Accessibility Guidelines (WCAG). The goal of WCAG is to provide a single shared standard for web accessibility.

The Four Guiding Principles of Accessibility

The current version of WCAG is 2.1. WCAG version 1.0 focused heavily on techniques and checkpoints for achieving web accessibility. Version 2 focuses instead on four main guiding principles of accessibility. Those four principles are perceivable, operable, understandable, and robust (together known as "POUR")⁴.

The following section is almost verbatim from a tweet thread by Carie Fisher⁶ (with minimal tweaks). Thank you Carie for this breakdown!

Perceivable

Users must be able to perceive the information being presented. It cannot be imperceptible to all their senses.

• Questions to consider
  • Is there anything on our website or app that a person with a disability would not be able to perceive?
  • Does this work with different types of assistive technology devices? Make sure to consider as wide a variety of disabilities as possible.
• Examples
  • Adding text alternatives to non-decorative images.
  • Adding captions and transcripts to videos.
  • Making sure the color is not the only method used to convey meaning.

Operable

Users must be able to operate the interface. The interface cannot require interaction that a user cannot perform.

• Questions to consider
  • Can users control interactive elements of our website/app?
  • Does our website have any keyboard traps? Does it work for mobile and touch devices?
• Examples
  • Using keyboard-only navigation.
  • Making sure slideshows and media players have all of the controls shown.
  • Making sure users have enough time to fill out a form.

Understandable

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.

• Questions to consider
  • Is all of the content clearly written?
  • Are all of the interactions easy to understand?
  • Does the order of the page make sense?
• Examples
  • Write content at a 9th-grade reading level – don’t use a scrabble word when a simpler word will do.
  • Make sure your website is predictable.
  • Make sure any error messages on your website are clear and easy to resolve.

Robust

Users must be able to access content as technologies advance. As technologies and user agents evolve, the content should remain accessible.

• Questions to consider
  • Does our website only support the newest browsers or operating systems?
  • Is our website developed with best practices?
  • Does this work in both landscape and portrait orientations?
• Examples
  • There are no real examples of this. Make sure to test your website/app as it evolves. After initial testing, test again when new features or functionality are added. Consider a11y an on-going maintenance task.

Read on

Pour another cup and move on to quick wins.