Build more accessible apps in Angular
summary
Eight concrete fixes applied to a demo Dumpling Shop raise Lighthouse accessibility from about 87 into the green and ultimately 100 by addressing auditable and manual gaps: add unique page titles via Angular v14 router, enforce WCAG color contrast with Material palettes, replace nonsemantic divs with real buttons, swap nested checkboxes for Material selection lists, add ARIA labels, and install the CDK a11y to use focus trap and CDK LiveAnnouncer plus a high‑contrast mixin — all changes compile and verify in audits.
AI-written summary · about
chapters (13)
- 0:00Accessible Angular apps
- 1:07Demo Dumpling Shop setup
- 6:58Unique page titles in Angular
- 12:22WCAG color contrast
- 15:51Semantic HTML in Angular
- 23:28Nested controls with Material
- 28:49ARIA labels for clarity
- 33:24Angular CDK accessibility
- 36:17Focus trap for modals
- 42:27LiveAnnouncer for screen changes
- 48:39High contrast mode support
- 55:54Eight accessibility improvements
- 59:10Closing and resources
