Skip to main content

Angular v20 Accessibility Best Practices

1. Use Semantic HTML​

  • Prefer semantic elements (<button>, <nav>, <main>, <header>, <footer>, etc.) for structure and meaning.
  • Organize content with headings (<h1>–<h6>) in a logical hierarchy.

3. Accessible Forms​

  • Always associate <label> elements with form controls using for and id.

    <label for="email">Email</label> <input id="email" type="email" />

  • Use Angular’s reactive forms with proper validation messages.

5. Focus Management​

  • Use Angular CDK’s cdkTrapFocus for dialogs and overlays.

  • Programmatically set focus when opening dialogs or dynamic content:

    @ViewChild('input', { static: false }) input!: ElementRef;
    ngAfterViewInit() {
      this.input.nativeElement.focus();
    }

6. Color and Contrast​

  • Ensure text and interactive elements meet WCAG 2.2 AA contrast ratios (at least 4.5:1).
  • Do not use color as the only means of conveying information.

7. Alternative Text and Media​

  • Provide descriptive alt text for images.

    <img src="logo.png" alt="Company logo" />

  • Use captions and transcripts for audio/video content.

8. Error Handling and Feedback​

  • Use aria-live regions to announce dynamic content and errors.

    <div aria-live="assertive">{{ errorMessage }}</div>

  • Clearly indicate errors and how to resolve them.

  • Add skip navigation links for keyboard users.

    <a href="#main-content" class="skip-link">Skip to main content</a>

  • Use landmarks (<main>, <nav>, <aside>, <footer>) for easier navigation.

10. Automated and Manual Testing​

  • Use tools like axe, Angular CDK a11y, and browser accessibility inspectors.
  • Test with screen readers and keyboard navigation.

References: