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:
  • Normal text ≥ 4.5:1
  • Large text ≥ 3:1
• 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:
  • axe-core
  • Lighthouse accessibility audit
• 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