Back to results for “Angular CDK (Component Dev Kit)”
Angular › Accessibility (a11y) in Angular

How does Angular CDK's a11y package help improve accessibility in an app?

Intermediate

Answer

The Angular CDK includes a dedicated a11y package with tools like FocusTrap, which keeps keyboard focus inside a dialog while it is open, and LiveAnnouncer, which lets you announce dynamic messages to screen reader users that would otherwise go unnoticed.
import { LiveAnnouncer } from '@angular/cdk/a11y';

constructor(private liveAnnouncer: LiveAnnouncer) {}

saveForm() {
  this.liveAnnouncer.announce('Your changes have been saved');
}
Real-world example A settings page announces a clear confirmation message using LiveAnnouncer whenever a user saves a change, so screen reader users know their action succeeded even though nothing visually dramatic happened on screen.

Common follow-ups: How does FocusTrap prevent a keyboard user from tabbing outside an open dialog?;What other accessibility helpers does the Angular CDK provide?