Design6 min read

Accessible Design

Design interfaces that work for everyone - applying WCAG 2.2 principles at the design stage through color contrast, focus order, touch targets, and component semantics.

AccessibilityInclusive DesignWCAGColor ContrastDesign

skill: Accessible Design category: Design tags: [Accessibility, Inclusive Design, WCAG, Color Contrast, Design] readingTime: 6

Accessibility starts in design, not implementation. A designer who annotates focus order, specifies contrast ratios, and designs for keyboard navigation saves the developer from guessing. WCAG 2.2 AA is the legal minimum in many countries - and good accessibility is good UX for everyone.

Workflow

Check color contrast ratiosWCAG 2.2 requires 4.5:1 contrast for normal text, 3:1 for large text (18pt+) and UI components. 1 in 12 men and 1 in 200 women have color vision deficiency.
Specify focus order and keyboard navigation25% of users rely on keyboard navigation at some point. If the focus order doesn't follow reading order, keyboard users get lost.
Size touch targets correctlySmall touch targets cause tap errors - WCAG 2.5.5 (AAA) recommends 44x44px minimum; WCAG 2.5.8 (AA in 2.2) requires 24x24px with adequate spacing.
Design accessible form componentsForm errors are the most common accessibility failure - users without vision or with motor impairments struggle when errors aren't announced or linked to fields.
Annotate component accessibility in design specsWithout explicit accessibility annotations, developers default to div+onclick for interactive components - losing keyboard and screen reader support.

Output Format

Accessible design specs: contrast ratios documented, focus order annotated, touch targets sized, form errors specified, and ARIA roles/states noted.

Per-component annotations:
  Role: [HTML/ARIA role]
  Label: [accessible name source]
  States: [normal, hover, focus, disabled, error]
  Keyboard: [Tab behavior, action keys]
  Announcement: [what screen reader says on change]

Global specs:
  Focus style: 2px brand color outline, 2px offset
  Min touch target: 44x44px
  Min contrast: 4.5:1 (text), 3:1 (UI)

Examples

Input

Output

Edge Cases & Gotchas

Animated content and vestibular disorders - Auto-playing animations or parallax effects cause physical nausea for users with vestibular disorders. Annotate all animations with a reduced-motion alternative.
Data tables vs. layout tables - Tables used for visual layout (not data) confuse screen readers. Annotate which tables are data tables (need headers, captions) and which are layout-only (need role='presentation').
Dark mode contrast - A dark mode color palette often has different contrast characteristics than light mode. Check contrast separately for both themes during design.
Icon-only controls - An icon button with no visible text needs an accessible label. Annotate every icon-only button with its aria-label text.

When to Break These Rules

Don't apply accessibility as a post-hoc checklist review - bake it into the design critique process (review contrast, focus order, and keyboard behavior before design sign-off).
Don't assume conformance tools give 100% assurance - 30% of real-world accessibility issues are only discoverable through screen reader testing.

Reference Files

https://www.w3.org/WAI/WCAG22/quickref/
https://www.figma.com/community/plugin/1208180794570801/includeaccessibility-annotations