Angular Accessibility: Mastering the CDK A11y Module, LiveAnnouncer & FocusTrap

Angular is the framework of choice for thousands of enterprise banking, healthcare, and government applications. The **Angular Component Development Kit (CDK) `@angular/cdk/a11y` module** provides the industry's most robust suite of accessible UI primitives, including declarative focus traps, screen reader live announcers, and focus monitors.

Overview of the Angular CDK A11y Module

Import A11yModule into your component or NgModule to unlock:

• cdkTrapFocus: Traps keyboard focus within a container.
• LiveAnnouncer: Programmatically announces messages to screen readers using ARIA live regions.
• FocusMonitor: Detects whether an element received focus via keyboard, mouse, touch, or program.
• ActiveDescendantKeyManager: Manages keyboard selection in custom dropdowns and lists.

Focus Containment with cdkTrapFocus

<!-- Accessible Angular Modal with Focus Trap -->
<div class="modal-overlay" *ngIf="isOpen">
  <div
    class="modal-card"
    role="dialog"
    aria-modal="true"
    aria-labelledby="dialog-title"
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true">
    <h3 id="dialog-title">Security Confirmation</h3>
    <p>Please verify your credentials to proceed.</p>
    <button class="btn btn-primary" (click)="confirm()">Confirm</button>
    <button class="btn btn-secondary" (click)="close()">Cancel</button>
  </div>
</div>

Dynamic Notifications with LiveAnnouncer

Inject LiveAnnouncer to vocalize asynchronous updates:

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

@Component({ ... })
export class TableComponent {
  constructor(private liveAnnouncer: LiveAnnouncer) {}

  onSortChange(column: string, direction: string) {
    this.liveAnnouncer.announce(`Table sorted by ${column} ${direction}`, 'polite');
  }
}

Managing Focus Indicators with FocusMonitor

FocusMonitor automatically applies CSS classes (.cdk-focused, .cdk-keyboard-focused, .cdk-mouse-focused) allowing you to show visible focus rings only during keyboard navigation without showing outlines on mouse clicks.

Accessible Angular Reactive Forms

Always bind [attr.aria-invalid]="formControl.invalid && formControl.touched" and [attr.aria-describedby]="errorId" to ensure screen readers announce validation errors.