---
title: Accessibility
summary: 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.
topic: compliance
order: 3
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`.
```html
```
- 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
| What | Minimum ratio |
| --- | --- |
| Body text | 4.5 : 1 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 |
| Input borders, focus rings, meaningful icons | 3 : 1 |
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.
```css
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }
```
### Use real elements
A `
```
- 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
| What | Minimum ratio |
| --- | --- |
| Body text | 4.5 : 1 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 |
| Input borders, focus rings, meaningful icons | 3 : 1 |
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.
```css
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }
```
### Use real elements
A `