Angular Accessibility (a11y)

A practical guide to building Angular apps everyone can use. Two layers: WCAG fundamentals (the HTML/CSS you author) and Angular tooling & patterns (CDK, Aria, router, custom components). Target is WCAG 2.x AA.

Targets Angular v17+ (standalone + signals). Accessibility is a requirement, not a polish step – build it in from the first component.

0. Verify – don't assume

a11y can't be eyeballed. Run all four:

• Automated: axe DevTools (or Lighthouse a11y audit) – catches ~30–50% of issues. Check for a playwright.config.ts first (the workshop's teaching branches gain Playwright later); once it exists, bake AXE checks into the e2e suite via @axe-core/playwright and run them against key views – see the create-e2e-tests skill for scaffolding Playwright and wiring assertions into a spec.
• Keyboard-only: unplug the mouse. Tab through everything; every interactive element must be reachable, operable, and have a visible focus indicator.
• Screen reader: VoiceOver (macOS), NVDA (Windows), or TalkBack.
• Lint: enable @angular-eslint accessibility template rules (alt-text, label-has-associated-control, click-events-have-key-events, valid-aria, etc.) to catch issues at author time.