Practice accessibility design vocabulary: WCAG, contrast ratio, accessible name, focus management, aria-label, and colour-blind-friendly design.
0 / 5 completed
1 / 5
WCAG 2.1 Success Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text. What does a contrast ratio of 4.5:1 mean?
Contrast ratio is calculated from relative luminance (WCAG formula). A ratio of 1:1 is no contrast (identical colours); 21:1 is maximum (black on white). WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text. Tools: Figma's Contrast plugin, WebAIM Contrast Checker, browser DevTools.
2 / 5
An 'accessible name' for a UI element is:
The accessible name is computed by the browser's accessibility tree. Sources (in priority order): aria-labelledby (references another element's text), aria-label (inline string), native semantics (a button's text content, an img's alt attribute, a form field's associated label element). If none is found, the accessible name is empty — a screen reader announces the element's role only, which is unhelpful.
3 / 5
What does 'focus management' mean in accessible interface design?
When UI changes dynamically — a modal opens, an alert appears, a page navigates — focus must move to the new content so keyboard and screen reader users aren't left behind. For a modal: move focus to the first interactive element inside it; on close, return focus to the trigger. Failure to manage focus is one of the most common accessibility bugs in SPAs.
4 / 5
A designer says: 'We can't rely on colour alone to convey this error state — that fails colour-blind users.' Which WCAG principle are they citing?
WCAG SC 1.4.1 (Use of Colour) — Level A: colour must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Fix: add an icon (✕ for error), text label ('Error:'), pattern, or shape — something non-colour-dependent. ~8% of males have some form of colour vision deficiency, most commonly red-green.
5 / 5
What does the CSS media feature 'prefers-reduced-motion' allow designers and developers to do?
Some users — particularly those with vestibular disorders, epilepsy, or ADHD — can be harmed or distracted by motion. The prefers-reduced-motion media query (WCAG SC 2.3.3, AAA) lets you respect the OS 'Reduce Motion' setting. Best practice: use a minimal motion baseline by default and opt into motion — @media (prefers-reduced-motion: no-preference) { /* add animations here */ }.