Unit 06
Access
By the end of this unit you can operate your own site with a keyboard alone, measure it against WCAG rather than a feeling, and name exactly who a specific failure excludes — and your Top 6 does not fail any of it.
Unit 5 ended by asking who can actually use your site. This unit is where that question gets an answer you can defend instead of a feeling you have.
Every objective below is a WCAG success criterion — a real, published bar, not a house rule — and every one of them is something you can run against your own Top 6 for a pass or a fail. Not “does this feel accessible.” Does it pass.
Text alternatives
An image says nothing to a screen reader unless you tell it what to say.
Alt text A word or short phrase in an img element's alt attribute, read aloud by a screen reader in place of the image. has one job: stand in for the image’s purpose, in context — not describe its appearance to someone who can already see it. “Photo of a laptop on a desk” describes a stock photo. “Sara’s finished Top 6, viewed on a phone” describes what that same photo is doing in your case study.
Some images are not information at all — a divider line, a background
flourish. Those get alt="", on purpose. An empty alt is not a mistake; it
is you telling a screen reader skip this, there is nothing here for you.
| What you wrote | What a screen reader does |
|---|---|
alt="Sara's finished Top 6, viewed on a phone" | Reads the description — the image is information. |
alt="" | Skips it cleanly — you said, correctly, that it carries nothing. |
No alt attribute at all | Often reads the filename instead — IMG_4021.jpg — which is worse than silence. |
Add this question to
Loading your meetings…
Your Top 6 has a decorative squiggle under each heading — pure flourish, no information. What should its alt text be?
Alt text serves the image's PURPOSE. When the purpose is none — pure decoration — the correct alt text is an empty string, stated on purpose, which is not the same as leaving the attribute off entirely.
Write it · html
Renders as you type · nothing leaves your browser
Nothing silently missing.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- Every image carries an alt attribute — none silently missing
Give the divider an empty alt and the photo a real one. Both pass this goal, because BOTH are correct — the machine can only check that nothing was left silently missing. Whether the photo's alt text actually serves its purpose is something your teacher reads, same as WD5.5's credit lines.
Structure for assistive technology
Turn off a stylesheet and a sighted reader still has shapes, position and
colour to navigate by. A screen reader never had any of that — it was always
navigating by structure alone. WD6.2 is the unit where you find out whether
yours has any.
Two things make that outline legible: landmarks — <nav>, <main>,
<header>, <footer> instead of anonymous <div>s — and headings that
nest without skipping, the same rule from WD1.6.B, back again because it
matters even more here. A screen reader user can jump straight to <main>
or list every heading on the page in one gesture. A <div> styled to look
exactly like a heading offers neither.
Write it · html
Renders as you type · nothing leaves your browser
Give it back its landmarks.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- The nav is a real nav landmark
- The main content sits in a main landmark
- The bottom block is a real footer landmark
- The page title is an h1
- Headings still nest without skipping a level
Nothing here changed how it looks — daisyUI's navbar, hero and footer classes don't care whether their wrapper is a div or the matching landmark tag. That is the whole lesson: structure and appearance were never the same decision, and you can fix one without touching the other.
Controls need the same honesty. A button whose visible label says one thing and whose accessible name says another is not a small inconsistency — it is two different instructions given to two different users.
Add this question to
Loading your meetings…
A button reads 'Add to favourites' on screen, and carries aria-label="Submit". A screen reader user and a sighted user asking someone to help them by voice — 'click submit' — will have two different experiences. What's actually wrong?
Whatever a control announces to assistive technology should match what a sighted user reads on it. Two people describing the same button to each other should be describing the same button.
Colour and contrast
You already have the tool for this — Unit 5’s mood lab, measuring the same number, for a different reason. There, you were choosing a mood. Here, you are checking that the choice actually clears a published bar.
| What | Minimum ratio |
|---|---|
| Body text | 4.5 : 1 |
| Large text — 18pt, or 14pt bold | 3 : 1 |
| Non-text — borders, icons, focus rings | 3 : 1 |
Contrast is a ratio between two relative luminances, which is a longer way of saying: swapping foreground and background never changes it. Light text on a dark ground and dark text on a light ground, same two colours, pass or fail together, always.
Remix it · one page, every mood
Nothing here is a picture — it is the real page, restyling
Find a pair that fails 4.5:1. Then fix it without abandoning the palette.
Theme
Palette
One person's opinion
The six best breakfasts in Cleveland
Ranked by someone who has eaten all of them more than once, which is the only credential this list claims.
Start at number sixThe diner on Detroit
Hash browns with actual edges. Coffee that tastes like a decision.
The bakery counter
Four tables, no menu, and a kolache worth the parking.
The place with no sign
You have driven past it a hundred times. Stop this time.
The one in the market
Standing room only, and the eggs come out in ninety seconds.
The corner spot
Cash only, which is either charming or a problem, depending.
<html data-theme="retro">
Some of these combinations pass and some don't — that's the point. When you find one that fails, the fix from WD6.3.A is specific: adjust LIGHTNESS, not hue. Keep the same colour family and move it darker or lighter until the readout clears 4.5:1, rather than swapping to a different colour because the first one 'felt' wrong.
Add this question to
Loading your meetings…
Your form marks a required field by turning its label red. Nothing else about it differs from an optional field. What's the accessibility problem?
Colour can decorate a signal, but something else has to carry it too — text, an icon, a pattern. A reader who cannot perceive the colour difference should still get the information.
Keyboard and focus
Unplug your mouse. Everything on your Top 6 that a visitor can do, you should still be able to do — reach every link and button with Tab, activate it with Enter or Space, and never once get stuck somewhere you can’t Tab back out of.
| Markup | Reachable by Tab? | Activates with Enter/Space? |
|---|---|---|
<button> or <a href> | Yes — built in | Yes — built in |
<div onclick> | No | No |
A menu that only opens on :hover | No — there is no hover state for a keyboard | — |
A <div> with a click handler looks identical to a button, to a mouse. To a
keyboard it does not exist. This is the same repair you made to a machine’s
markup back in Unit 4 — here you are making it to your own.
Write it · html
Renders as you type · nothing leaves your browser
Make it reachable.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- "Read more" is a real button or link, not a div
- Nothing is left clickable-but-unreachable
It can look identical — daisyUI doesn't care whether card-title's sibling is a div or a button. The difference is invisible to your eyes and total to a keyboard, which is exactly why 'it looks right' was never the test.
Add this question to
Loading your meetings…
A stylesheet includes `*:focus { outline: none; }` — added because the default blue focus ring 'looked messy' against the new palette. What did that actually break?
A focus ring is not decoration. Restyle it if the default clashes — a custom outline colour, a box-shadow, a different width — but WD6.4.B asks for it to stay visible, because deleting it deletes a keyboard user's only way of knowing where they are.
Add this question to
Loading your meetings…
Your Top 6's footer has five social icons, each 16 pixels across, packed edge to edge. On a laptop with a precise mouse this is fine. What does WD6.4.C say about it on a phone?
A cursor is a pixel. A thumb is not. Size and space interactive elements for the least precise input that will realistically be used on them.
Auditing
You now know enough to check your own work with a tool instead of a guess.
Your browser’s dev tools ship an automated accessibility audit. Run it. It will report real failures — missing alt text, insufficient contrast, a landmark that’s missing — and it will also report nothing at all about plenty of things you just spent this unit learning to judge yourself, like whether alt text actually serves its purpose or a heading order actually makes sense read aloud.
Add this question to
Loading your meetings…
An automated audit gives your Top 6 a perfect score. Which of these could still be true?
An automated audit proves the absence of mechanically detectable failures. It cannot prove the presence of a good experience — that still needs a keyboard walkthrough and a person reading the outline.
Write it · html
Renders as you type · nothing leaves your browser
Reflow to 320px, no horizontal scroll.
index.html
Tab indents. Press Esc first to tab out of the box.
Result
- One column at the narrowest phones actually ship grid-cols-1, with md:grid-cols-3 to bring the three columns back on a laptop — this is Unit 3's mobile-first prefix, back for a WCAG reason this time.
- Three columns from md up
320px isn't an arbitrary number — it's WCAG 1.4.10's own floor, roughly the narrowest phone still in real use. Drag the preview to 320 and confirm nothing clips or forces a horizontal scrollbar. Everything here is Unit 3's own toolkit; this objective is that toolkit, run at the width that actually breaks things.
Submit for review · text
Read by a human · you can resubmit
Run an accessibility audit — automated tool, plus your own keyboard walkthrough — on your own Top 6. Find one real failure. Name WHO it excludes, specifically, and HOW: what does that person actually experience when they hit it?
What earns points5 pts
- 2 Names a specific, real failure on their own page
- 2 Names who it excludes, specifically
- 1 Describes what that person actually experiences
WD6.5.C is the objective underneath all the others: a WCAG code is a proxy for a person. If you can only cite the code, you have memorised a rule. If you can say who it protects and how, you understand it.
That is the unit: images that say something or say nothing, on purpose
(WD6.1); structure that survives with no styling at all (WD6.2); colour
that clears a published number, not a feeling (WD6.3); a page you can
operate without a mouse (WD6.4); and the habit of checking with a tool,
then checking what the tool couldn’t (WD6.5).
Your Top 6 should now hold up under all of that. Unit 7 is where you stop working alone — a real team, a shared board, and a way to show what you, specifically, delivered.
Where you are
Not startedAnswer the checks above whenever you like. They're not graded, and you can retry any of them.
Kept in this browser only, unless you sign in.
Signing in carries this — and everything else you've done here — onto any device, and keeps it if you clear this browser.
Intro to Web Design · members' unit
Access is behind a locked door
Units in Intro to Web Design are for people taking the course. Getting in takes a link or a key — signing in on its own doesn't do it.
What's in this unit · 9 min read
- Text alternatives
- Structure for assistive technology
- Colour and contrast
- Keyboard and focus
- Auditing
6 quick checkslive HTML/CSS sandboxcode exercises
1 Sign in
With your school Google account. This is how your work reaches the gradebook — it doesn't open the unit by itself.
A key unlocks this browser and keeps your progress here; signing in keeps it with you across devices. Either way the key itself is only ever checked as a hash. Manage all of this on your account, read what signing in stores, or go back to Intro to Web Design.
Sources
- Gilmour Academy — Intro to Web Design
- W3C — Web Content Accessibility Guidelines (WCAG) 2.2