craigthompson.dev

$ cat case-studies/accessibility.md

Accessible by default, checked on every deploy

// accessibility · wcag 2.2 aa · this site

Accessible by default, checked on every deploy

Accessible UI has been part of my work since building UI libraries held to WCAG for clients. This site is held to WCAG 2.2 AA, and an automated suite checks it after every deploy and every week, failing the check if anything regresses.

  1. audit
  2. walk it by keyboard
  3. fix at the source
  4. gate in CI
What the suite checks
  • axe-core · WCAG 2.0–2.2 A/AA
    Every automated rule, in every state
    Both themes, desktop and mobile, every tab, open FAQs, search results, ask.sh, the chat, the search dialogs and every file page: 284 page states per run.
  • 2.1.1 · 2.4.7
    Keyboard only
    A Tab-key walk through every focus stop, confirming each one shows a visible focus ring.
  • 2.4.11 · new in 2.2
    Focus never hidden
    Nothing focused can sit behind the sticky header or the chat bar.
  • 2.5.8 · new in 2.2
    Targets you can hit
    Controls are at least 24px, or spaced so a miss won’t land on a neighbour.
  • 1.4.10 · 1.4.12
    Reflow and spacing
    Nothing scrolls sideways at 320px, and nothing clips with the WCAG text-spacing overrides applied.
  • 2.2.2 · 2.3.3
    Motion under control
    Reduced-motion users get a still page, and the auto-playing tour can be paused.
  • 2.1.4
    Shortcuts you can switch off
    The single-key shortcuts can be turned off, so they never clash with screen readers or speech input.
areabeforeafter
contrastmuted text under 4.5:1Every text colour at 4.6:1 or more on every background it sits on
focussome controls with no ringA visible focus ring on everything that can take focus
obscured focusfocus could hide off screenScroll padding clears the sticky bars; hidden UI leaves the tab order
targets18px links24px minimum
wide tablesunreachable by keyboardFocusable, named scroll regions
# in practice
  • Lighthouse alone scored the site 100 for accessibility while these WCAG 2.2 AA failures were present; the full suite found them.
  • Fixes went into the shared design tokens and components, so each one holds across the whole site.
  • A regression fails the accessibility check, so it can’t quietly slip back in.
  • Automated checks cover what tools can see; screen-reader passes cover the rest.

$ ls case-studies/

Search and jump