Learn / Compliance / Lesson 19

Accessibility

Alt text, colour contrast and keyboard navigation. Three habits that make a site usable for people with disabilities, and that courts have started to enforce.

Last updated: 2026-09-19

What it is

Accessibility means people can use your site whatever their abilities: with a screen reader, with low vision, with only a keyboard, with shaking hands. The shared standard is the Web Content Accessibility Guidelines (WCAG) 2.2, and level AA is the usual target.

Why it is a rule

• Robles v. Domino's (US, 2019). A blind customer could not order a pizza on Domino's website or app with his screen reader. Domino's argued the law did not cover websites. The court of appeals disagreed, and the US Supreme Court declined to hear Domino's appeal. Since then, website accessibility lawsuits have become common.
• The reason is bigger than lawsuits. The World Health Organization estimates about one in six people live with a significant disability. Many more have a temporary one, a bright screen in the sun, or an old phone.

How to do it

Alt text

Every image gets an alt.

<img src="chart.png" alt="Sales rose from 1.2M in Q1 to 1.9M in Q2">
<img src="swirl.svg" alt="">
<button aria-label="Close"><i class="icon-x"></i></button>

• An image with meaning describes the meaning, not the pixels.
• A decorative image gets an empty alt="", so screen readers skip it.
• An icon-only button needs a name, or a screen reader says only "button".

Contrast

Check both light and dark themes. Measure the worst spot, such as text over a gradient or a moving background, not the average. And never use colour as the only signal: a red cell also needs an icon or text.

Keyboard

• Everything a mouse can do, Tab plus Enter or Space can do, in reading order.
• A visible focus ring on every focusable element. outline: none with no replacement leaves keyboard users lost.
• Dialogs keep focus inside while open, close on Escape, and return focus to the button that opened them.
• A "skip to content" link on pages with a long menu.
• Respect prefers-reduced-motion for people who get sick from motion.

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }

Use real elements

A <button> is focusable, clickable with the keyboard and announced as a button, for free. A <div onclick> is none of those until you rebuild all of it by hand.

How we do it here

Our public screens are checked against a contrast gate in both themes. Animated backgrounds are hidden from assistive technology and slow down or stop for people who prefer reduced motion. Lessons like this one keep a visible focus ring on every link.

Benefits

• Usable by everyone, including the one in six with a disability.
• Better for everyone else too: captions in a noisy room, keyboard shortcuts for power users, contrast in bright sunlight.
• Search engines read alt text and headings the same way a screen reader does.

Disadvantages

• Custom widgets (data grids, date pickers) take real work to make fully keyboard- and screen-reader-friendly.
• Strict contrast limits some design choices, especially faint text on busy backgrounds.
• Automated checkers catch only part of the problems; testing with a real screen reader takes time.

Checklist

• Every image has fitting alt text; decorative ones have alt="".
• Text meets 4.5 : 1 in both themes.
• Everything works by keyboard, with a visible focus ring.
• Motion respects prefers-reduced-motion.

Sources

• W3C — WCAG 2.2
• W3C WAI — ARIA Authoring Practices Guide
• WebAIM — Contrast Checker
• Robles v. Domino's Pizza, LLC, US Court of Appeals for the Ninth Circuit, 2019.

Read this lesson as Markdown