{"id":31886,"date":"2025-12-01T22:00:46","date_gmt":"2025-12-01T21:00:46","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/angular-aria\/"},"modified":"2025-12-03T16:37:17","modified_gmt":"2025-12-03T15:37:17","slug":"angular-aria","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-aria\/","title":{"rendered":"Why Angular ARIA in v21 is pretty neat"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 6 of 6 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 for Angular<\/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. Why Angular ARIA in v21 is pretty neat<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Angular ARIA<\/em> is a collection of headless, accessible directives<\/strong> that implement common WAI-ARIA patterns<\/strong>. The directives handle keyboard interactions<\/strong>, ARIA attributes<\/strong><\/a>, focus management<\/strong>, and screen reader support<\/strong>. All you have to do is provide the HTML<\/strong> structure, CSS<\/strong> styling, and business logic<\/strong>!<\/p>\n

    You feel like you've already read this before? Perfectly possible, because I've just copied and pasted the paragraph from the official Angular ARIA docs<\/a><\/em>. Why should I reinvent the wheel, right? It perfectly summarizes the concept.<\/p>\n

    So the Angular team<\/em> just (together with v21<\/em> on Nov 19th, 2025<\/em>, more about the Angular v21<\/em> release in Manfred's post<\/strong><\/a>) released a brand-new collection of components \u2013 I mean directives \u2013 that implement common web patterns while letting you choose your own HTML, styling (CSS, SCSS, or even Tailwind), and business logic (I'd suggest TypeScript).<\/p>\n

    This is pretty much the opposite approach of Angular Material<\/em><\/a>, which is an opinionated Plug & Play Design System. Both are built on top of the Angular CDK<\/em> A11y<\/a> package. So what do we get here?<\/p>\n

    Components<\/h2>\n

    In the first release with v21<\/em>, the following 12 components \/ directives \/ UI patterns<\/strong> are available:<\/p>\n\n\n\n\n\n\n\n\n
    search and select<\/th>\nnavigation \/ menu<\/th>\ncontent organization<\/th>\n<\/tr>\n<\/thead>\n
    Autocomplete<\/a><\/td>\nMenu<\/a><\/td>\nAccordion<\/a><\/td>\n<\/tr>\n
    Listbox<\/a><\/td>\nMenubar<\/a><\/td>\nTabs<\/a><\/td>\n<\/tr>\n
    Select<\/a> & Multiselect<\/a><\/td>\nToolbar<\/a><\/td>\nTree<\/a><\/td>\n<\/tr>\n
    Combobox<\/a><\/td>\n<\/td>\nGrid<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     
    \nThere are \u2013 of course \u2013 plans to extend this in the future \ud83d\ude0f<\/p>\n

    Why is this neat?<\/h2>\n

    Using the Angular ARIA<\/em> directives is a great way to build Angular apps<\/em> by offloading some of the heavy lifting<\/strong> to the Angular team<\/em> while still allowing full customization<\/strong> and user-interface branding<\/strong>. BTW: Check out Jessica's talk at ViteConf on YT<\/a> for other things in NG v21<\/em> that are neat.<\/p>\n

    When to use Angular ARIA?<\/h3>\n