BadNo accessible name
<input type="text">On this page
WCAG in Practice
Fix the barrier#
Do not memorize every criterion first. Start from a broken task, then map the fix.
Contrast#
Interactive demo
Contrast check
Contrast checker
Normal text sample — body copy at typical size.
Large text sample — 18pt / 14pt bold.
Contrast ratio: 17.40:1
- AA normal (4.5:1)
- Pass
- AA large (3:1)
- Pass
- AAA normal (7:1)
- Pass
Color-only cues#
Interactive demo
Color is not enough
Names and controls#
GoodLabel association
<label for="email">Email</label>
<input id="email" type="text">Visible text must map to an accessible name. Labels do that for inputs.
Interactive demo
Div vs button
Compare implementations
Save
- Markup
<div class="button" onclick="...">Save</div>- Role
- generic (no button role)
- Name
- not exposed as a control name
- Keyboard
- not focusable by default; no Enter/Space contract
- Behavior
- must be rebuilt: role, focus, keys, and state
Test
| Action | Expect |
|---|---|
Reproduce barrier | Task fails for a real method |
Patch semantics/UI | Name, role, contrast, or keyboard path fixed |
Re-test | Keyboard + inspection confirm the fix |