Accessible design lets more people use a page
Accessible design means building a page so that people with different needs can use it: poor sight, no mouse, a screen reader, a small phone. It matters because these are not rare cases, and the fixes are small and cheap when you make them early.
The lab's shop has grey text on white that some people cannot read. You will measure how bad it is with a number.
By the end of this lesson
Note
I can check a page for contrast, text alternatives, labels and keyboard focus.
Key words
| Word | What it means |
|---|---|
| Accessibility | whether people with different needs can use the page |
| Contrast ratio | how different the text colour is from its background, from 1 to 21 |
| Alt text | words that stand in for a picture that cannot be seen |
| Screen reader | software that reads the page aloud |
| Label | words tied to a form box that name it |
| Focus | the item the keyboard is on right now |
The cells students fill in are left blank in this preview.
Contrast is the gap between text and background
The contrast ratio of two colours is a number from 1 to 21. Black on white is 21. Two equal colours give 1.
The usual contrast guideline asks for at least 4.5 for ordinary text, and at least 3 for large text. Below that, many people with poor sight, and anyone in bright sun, cannot read it.
Worked example: grey text on white by hand
| Step | Grey text #999999 | White background |
|---|---|---|
| Each colour channel as a share of 255 | 153 / 255 = 0.6 | 255 / 255 = 1.0 |
| Made linear, so that mid greys count fairly | 0.3185 | 1.0 |
| Lightness, the weighted sum of the three channels | 0.3185, because all three are equal | 1.0 |
| Ratio: (lighter + 0.05) / (darker + 0.05) | (1.0 + 0.05) / (0.3185 + 0.05) = 2.85 |
The cells students fill in are left blank in this preview.
Measure the shop's five colour pairs
docker exec jupyter python3 steps/contrast.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What the contrast script prints for the shop
| Where | Text on background | Ratio | Verdict |
|---|---|---|---|
| Body text | #999999 on #ffffff | 2.85 | too low |
| Headline | #222222 on #ffffff | 15.91 | enough |
| Links | #9fbfe8 on #ffffff | 1.89 | too low |
| Error text | #ff9999 on #ffffff | 2.05 | too low |
| Buy button | #ffffff on #f2c94c | 1.59 | too low |
The cells students fill in are left blank in this preview.
Pictures need alt text and boxes need labels
A person using a screen reader hears the page read aloud. It cannot describe a picture, so a picture needs alt text: a few words that say what it shows or does.
A form box needs a label tied to it. A placeholder is not enough, because it disappears when you type and a screen reader may not read it as the box's name.
Audit the shop's two pages
docker exec jupyter python3 steps/audit.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What the audit counts for the shop
| Page | Problem | Count |
|---|---|---|
| Home page | Pictures with no alt text | 3 of 4 |
| Home page | Links with vague text | 5 of 6 |
| Checkout page | Inputs without a label | 3 of 4 |
| Checkout page | Error messages that are only a code | 1 |
| Style sheet | Rules that remove the focus outline | 1 |
| Style sheet | Font sizes under 14 pixels | 2 of 3 |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people think accessibility is an extra for a small group. Everyone meets these limits at times: sun on a phone screen, a broken arm, a noisy train. A fix made for one need, such as a label or a clear contrast, helps almost everybody.
Keyboard users need to see where focus is
Some people cannot use a mouse. They press the Tab key to move from link to link and box to box. The focus outline shows where they are.
One rule in the shop's style sheet removes that outline. A keyboard user then has no idea where they are. The fix is to keep the outline or draw a clearer one.
Going further
Pick a page you use often. Write down its body text colour and its background, then work out the ratio with your function.
Try changing the grey to a darker one until the ratio reaches 4.5. How dark did you need to go?