DEV Community

Cover image for Building Accessible Angular Applications (WCAG, ARIA)
Artem Turlenko
Artem Turlenko

Posted on • Edited on

Building Accessible Angular Applications (WCAG, ARIA)

Accessibility (a11y) is essential for building inclusive Angular applications that can be used by everyone, including users with disabilities. By following WCAG (Web Content Accessibility Guidelines) and using ARIA (Accessible Rich Internet Applications), you can ensure your apps are usable and compliant.

Why Accessibility Matters

  • Legal compliance: Many countries enforce accessibility regulations (e.g., ADA, EN 301 549).
  • Inclusive design: Helps users with visual, auditory, motor, and cognitive impairments.
  • Better UX: Often results in cleaner, more usable UI for all users.

WCAG Principles Overview

WCAG guidelines are based on four main principles:

  1. Perceivable – Users must be able to perceive the content.
  2. Operable – Interface components must be operable via keyboard and other inputs.
  3. Understandable – Content must be easy to read and operate.
  4. Robust – Content must be accessible by assistive technologies.

Key Accessibility Features in Angular

1. Semantic HTML

Angular supports all native HTML elements. Always use semantic tags (<button>, <form>, <nav>, <header>, etc.) over generic elements like <div>.

<!-- Good -->
<button>Submit</button>

<!-- Bad -->
<div (click)="submitForm()">Submit</div>
Enter fullscreen mode Exit fullscreen mode

2. ARIA Attributes

ARIA attributes enhance the accessibility of dynamic components.

<button aria-label="Close" (click)="closeModal()">X</button>
Enter fullscreen mode Exit fullscreen mode

Use ARIA roles and attributes only when semantic HTML isn’t enough:

<div role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
  <h2 id="dialogTitle">Settings</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

3. Keyboard Navigation

Ensure all interactive components are accessible using a keyboard.

  • Use the host property within the Angular component decorator to handle keyboard navigation declaratively, as recommended by Angular:
@Component({
  selector: 'accessible-button',
  template: `<ng-content></ng-content>`,
  host: {
    'role': 'button',
    'tabindex': '0',
    '(keydown.enter)': 'onEnter()',
    '(keydown.space)': 'onSpace()'
  }
})
export class AccessibleButtonComponent {
  onEnter() {
    // Handle Enter key press
  }

  onSpace() {
    // Handle Space key press
  }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, use Angular’s @HostListener('keydown', ['$event']) decorator for event handling:

@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
  if (event.key === 'Enter') {
    this.performAction();
  }
}
Enter fullscreen mode Exit fullscreen mode

4. Focus Management

Handle focus programmatically when modals or dynamic elements appear:

import { ElementRef, ViewChild } from '@angular/core';

@ViewChild('closeButton') closeButton!: ElementRef;

ngAfterViewInit() {
  this.closeButton.nativeElement.focus();
}
Enter fullscreen mode Exit fullscreen mode

5. Forms and Labels

Ensure form inputs have associated labels:

<label for="email">Email:</label>
<input id="email" type="email" />
Enter fullscreen mode Exit fullscreen mode

6. Color Contrast and Visual Indicators

Use high-contrast colors and visible focus indicators. Tools like axe or Lighthouse can help audit contrast ratios.


Testing Accessibility

Use the following tools to test a11y in Angular apps:

  • axe DevTools (browser extension)
  • NVDA / VoiceOver / JAWS screen readers
  • Chrome Lighthouse a11y audit
  • Angular cdk/a11y for utilities like FocusMonitor
import { FocusMonitor } from '@angular/cdk/a11y';

constructor(private fm: FocusMonitor) {}
Enter fullscreen mode Exit fullscreen mode

Conclusion

By incorporating accessibility into your Angular development process, you not only meet compliance standards but also create better user experiences for everyone. Focus on semantic HTML, ARIA usage, keyboard support, and thorough testing.

Accessibility isn’t an afterthought — it's a core part of building quality software.

Ready to level up your Angular apps with a11y? Let’s do it! 💪

Top comments (4)

Collapse
 
wayne_gakuo profile image
Wayne Gakuo

Great article on Accessibility, @artem_turlenko. Maybe you could also add how one would handle keyboard navigation with the "host" property as recommended by the Angular team in the docs?

angular.dev/guide/components/host-...

Collapse
 
artem_turlenko profile image
Artem Turlenko

Thanks for the suggestion! 🙌

I’ve updated the article to include an example using the host property for keyboard navigation, as recommended in the latest Angular docs. Appreciate the nudge to make it even more helpful! 🚀

Collapse
 
wayne_gakuo profile image
Wayne Gakuo

You're welcome and I loved the article.

Thread Thread
 
artem_turlenko profile image
Artem Turlenko

I really appreciate that — glad you enjoyed the article!