Accessible Components with Angular CDK

Angular CDK provides accessibility utilities.

Install CDK

npm install @angular/cdk

TypeScript

import { Component } from "@angular/core";
import { LiveAnnouncer } from "@angular/cdk/a11y";

@Component({
  selector: "app-announcer",
  standalone: true,
  templateUrl: "./announcer.component.html",
})
export class AnnouncerComponent {
  constructor(private announcer: LiveAnnouncer) {}

  notify() {
    this.announcer.announce("Item added");
  }
}

HTML

<button (click)="notify()">Add Item</button>