{"id":34855,"date":"2025-05-30T15:28:43","date_gmt":"2025-05-30T13:28:43","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/angular-cdk-accessibility\/"},"modified":"2025-05-30T15:28:43","modified_gmt":"2025-05-30T13:28:43","slug":"angular-cdk-accessibility","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-cdk-accessibility\/","title":{"rendered":"Enhancing A11y with Angular CDK"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 6 of 7 in the series “Accessibility in Angular”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Web Accessibility (A11y) in Angular \u2013 Introduction<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Accessibility Testing Tools<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Accessible Angular Routes<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. ARIA roles and attributes in Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. Building Accessible Forms with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Enhancing A11y with Angular CDK<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Angular ARIA initial version released<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    The strong>@angular\/cdk\/a11y<\/strong<\/a><\/a> package is part of the Angular Component Dev Kit (CDK)<\/em> and provides a collection of services, directives, SASS mixins, and other utilities to improve the Accessibility (A11y) of your Angular apps<\/em>.<\/p>\n

    These tools are invaluable when building reusable, presentation-focused components with screen-reader announcements, robust keyboard and focus support, high-contrast theming, and more. They\u2019re especially useful if you\u2019re creating an Angular Component Library<\/em> or a Design System<\/em>.<\/p>\n

    Below are some of my favorites, along with brief code examples.<\/p>\n

    LiveAnnouncer for Screen Readers<\/h2>\n

    The first service we want to highlight is the LiveAnnouncer<\/a><\/strong>. It allows you to announce messages to screen readers, which is particularly useful for providing feedback after user interactions. It's so simple: I often replace my console.log<\/code> calls with announcements.<\/p>\n

    Here's an example of that:<\/p>\n

    private readonly liveAnnouncer = inject(LiveAnnouncer);<\/code><\/pre>\n
    if (this.flights().length > 0) {\n  \/\/ console.log('Found ' + this.flights().length + ' flights');\n  this.liveAnnouncer.announce('Found ' + this.flights().length + ' flights');\n} else {\n  \/\/ console.log('No flights found');\n  this.liveAnnouncer.announce('No flights found');\n}<\/code><\/pre>\n
    Make sure to test your announcements with the use of a screen reader<\/a><\/strong>.<\/p>\n
    Focus Tools<\/h2>\n
    The Angular CDK<\/em> also includes several tools supporting your focus management.<\/p>\n
    Focus Trap<\/h3>\n
    The FocusTrap<\/a><\/strong> Directive<\/em> allows you to trap focus within a specific element, ensuring that keyboard navigation remains within that element until the user explicitly exits it.<\/p>\n
    This is particularly useful for modal dialogs or pop-ups:<\/p>\n
    <dialog class="awesome-dialog" cdkTrapFocus>\n  <!\u2013- Yay, focus won't leave this element! -->\n<\/dialog><\/code><\/pre>\n
    If you want focus to jump in automatically, enable the cdkTrapFocusAutoCapture<\/code><\/strong> flag:<\/p>\n
    <dialog class="awesome-dialog" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">\n  <!\u2013- Yay, focus won't leave this element! -->\n<\/dialog><\/code><\/pre>\n
    With this flag set to true<\/code>, the focus will automatically be captured when the dialog opens. However, it may not always be the best choice to have an element automatically capture focus, so we can avoid this with a trick:<\/p>\n
    <dialog class="awesome-dialog" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">\n  <h3 class="awesome-dialog__title" tabindex="-1" cdkFocusInitial>...<\/h3>\n  <!\u2013- Yay, focus won't leave this element! -->\n<\/dialog><\/code><\/pre>\n
    By adding cdkFocusInitial<\/code><\/strong> the title will be secretly focused initially. Since it has tabindex -1<\/code>, it won't be focusable by keyboard navigation afterward.<\/p>\n
    Focus Regions<\/h3>\n
    The Regions<\/a><\/strong><\/em> are a powerful tool that allows you to define a specific area of your application where focus should be managed. This is particularly useful for complex components like dropdowns or menus, where you want to ensure that focus remains within the component while it is open.<\/p>\n