Accessibility (A11y) in Angular

From the Angular cheat sheet Ā· Accessibility Ā· verified Jul 2026

Accessibility (A11y)

ARIA attributes and CDK A11y utilities

typescript
// Basic ARIA attributes
@Component({
  template: \`
    <button [attr.aria-label]="buttonLabel"
            [attr.aria-pressed]="isPressed"
            [attr.aria-disabled]="isDisabled">
      {{ buttonText }}
    </button>

    <div role="alert" aria-live="polite">
      {{ statusMessage }}
    </div>
  \`
})
export class AccessibleComponent {
  buttonLabel = 'Submit form';
  isPressed = false;
  isDisabled = false;
  statusMessage = '';
}
šŸ’” Always use semantic HTML elements when possible
⚔ CDK A11y provides utilities for focus management and live announcements
šŸ“Œ Use ARIA attributes to provide context for screen readers
šŸ”„ Test with keyboard navigation and screen readers
Back to the full Angular cheat sheet