Checklist (WCAG-first)
This checklist bundles the most important checks for designing and building an Angular web application, with WCAG 2.1 / 2.2 accessibility as the top priority.
For further explanation and examples, see also this link
1. Accessibility Foundations (WCAG – Highest Priority)
1.1 Perceivable
- Text alternatives (
alt) for all non-decorative images - Focus highlights
- Decorative images use
alt=""or CSS backgrounds - Color contrast meets WCAG:
- No information conveyed by color alone
- Text Sizing and Layout
- Text can resize up to 200% without loss of content or functionality
- Layout works at 320px width
- Captions for prerecorded video
- No autoplay audio (or clear pause/stop control)
1.2 Operable
- Fully usable with keyboard only
- Visible focus indicators
- Focus order follows visual order
- Context for buttons or CTA actions must be defined before using it
- No keyboard traps
- “Skip to main content” link exists
- No flashing content (>3 times per second)
- Touch targets ≥ 24×24px
1.3 Understandable
- Page language defined (
<html lang="...">) - Navigation is consistent across pages
- All form controls have labels
- Form errors clearly describe the problem
- Clearly described
- Programmatically associated with inputs
- Instructions do not rely on sensory cues (e.g. “click the red button” or "click the link on the right")
1.4 Robust
- Semantic HTML used wherever possible
- ARIA used only when native HTML is insufficient
- Correct ARIA roles, states, and properties
- Compatible with screen readers (NVDA, VoiceOver)
- Valid HTML (no duplicate IDs)
1.5 Angular-Specific Accessibility
- Prefer native HTML elements over custom components
- Angular Material components reviewed for accessibility
- Dynamic content announced properly (
aria-live) - Focus management on:
- Dialogs / modals
- Trap focus
- Restore focus on close
- Buttons use
<button>(not<div>or<span>) - Inputs always paired with
<label>
2. Extra's
2.1 UI & UX Design
- Consistent layout and navigation patterns
- Logical heading hierarchy (
h1→h6) - No placeholder-only labels
- Alt texts for images
- Error, success, and warning states:
- Explained with text
- Not color-only
- Icons have accessible text or
aria-label - Forms grouped logically (
fieldset,legend) - Empty states clearly explain what’s happening
3. Testing
3.1 Accessibility Testing
- Automated checks:
- Manual keyboard navigation testing
- Screen reader testing:
- NVDA (Windows)
- VoiceOver (macOS / iOS)
- Color contrast tools
Resources
- W3.org - Target Size: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3.org - Reflow: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
- W3.org - Three Flashes or Below Threshold: https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
- W3.org - Language of Page: https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html
- W3.org - Sensory Characteristics: https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html
- html-eslint - no-duplicate-id: https://html-eslint.org/docs/rules/no-duplicate-id#why
- W3.org - Using semantic elements to mark up structure: https://www.w3.org/WAI/WCAG22/Techniques/general/G115
- Angular - Accessibility in Angular - Angular UI components: https://angular.dev/best-practices/a11y#angular-ui-components
- W3.org - Decorative Images: https://www.w3.org/WAI/tutorials/images/decorative/
- W3.org - Non-text content: https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html