{"id":29699,"date":"2025-04-06T11:51:58","date_gmt":"2025-04-06T09:51:58","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/aria-roles-attributes\/"},"modified":"2025-04-21T17:39:57","modified_gmt":"2025-04-21T15:39:57","slug":"aria-roles-attributes","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/","title":{"rendered":"ARIA roles and attributes in Angular"},"content":{"rendered":"<div class=\"wp-post-series-box series-accessibility-in-angular-en wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-accessibility-in-angular-en6aa7d038a31b3\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-accessibility-in-angular-en6aa7d038a31b3\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 4 of 7 in the series <em>&ldquo;Accessibility in Angular&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\">Web Accessibility (A11y) in Angular \u2013 Introduction<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessibility-testing-tools\/\">Accessibility Testing Tools<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-routes\/\">Accessible Angular Routes<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">ARIA roles and attributes in Angular<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-forms\/\">Building Accessible Forms with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-cdk-accessibility\/\">Enhancing A11y with Angular CDK<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-aria\/\">Angular ARIA initial version released<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>ARIA (short for Accessible Rich Internet Applications) roles and attributes are used to improve Accessibility of our <em>Angular apps<\/em> \u2013 especially for users who rely on assistive technologies like screen readers, voice control, or alternative input devices. Using ARIA is essential for building inclusive, user-friendly web apps.<\/p>\n<h2>About ARIA<\/h2>\n<p>ARIA was developed by the World Wide Web Consortium\u2019s <strong><a href=\"https:\/\/www.w3.org\/WAI\/\">Web Accessibility Initiative (WAI)<\/a><\/strong> to enhance the accessibility of dynamic web content. The WAI also is the organization behind the <strong>Web Content Accessibility Guidelines (WCAG)<\/strong>, which provide a comprehensive framework for A11y \u2013 more <a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\">about <strong>WCAG<\/strong> in the intro of this A11y blog series<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/a11y-wai.png\" alt=\"WAI\" \/><\/p>\n<p>Originating in the early 2000s, ARIA was created to bridge the gaps in native HTML, ensuring that modern, interactive and single-page applications are usable by people with disabilities  \u267f<\/p>\n<h2>ARIA in Angular<\/h2>\n<p>In <em>Angular<\/em>, ARIA roles and attributes can be easily integrated into your components. You can use them directly in your HTML view templates, just like any other HTML attribute. <em>Angular<\/em> also provides <strong>built-in support for ARIA<\/strong> through directives and bindings, making it easier to manage ARIA properties dynamically.<\/p>\n<p>When using <strong>static values<\/strong>, you can simply add them to your HTML elements or components:<\/p>\n<pre><code class=\"language-html\">&lt;!-- Static ARIA attributes require no extra --&gt;\n&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;X&lt;\/button&gt;<\/code><\/pre>\n<p>However, when you want to bind <strong>ARIA attributes dynamically<\/strong>, you should use <em>Angular's<\/em> property binding syntax (&quot;[]&quot; square brackets) including the &quot;attr.&quot; prefix:<\/p>\n<pre><code class=\"language-html\">&lt;!-- Dynamic ARIA attribute property binding with &quot;attr.&quot; prefix --&gt;\n&lt;button type=&quot;button&quot; [attr.aria-label]=&quot;myActionLabel&quot;&gt;\u2026&lt;\/button&gt;<\/code><\/pre>\n<h2>ARIA vs. Semantic HTML<\/h2>\n<p>While ARIA is a powerful tool for enhancing accessibility, it should be used as a <strong>last resort<\/strong>. Native <strong>semantic HTML<\/strong> elements and attributes are preferred whenever possible, as they provide built-in accessibility features that ARIA does not have to replicate. Always prefer native elements like <code>&lt;button&gt;<\/code>, <code>&lt;label&gt;<\/code>, <code>&lt;nav&gt;<\/code> and <code>&lt;header&gt;<\/code> over their ARIA counterparts. For example, instead of using <code>role=&quot;button&quot;<\/code> on a <code>&lt;div&gt;<\/code>, use a <code>&lt;button&gt;<\/code> element.<\/p>\n<h2>ARIA Roles<\/h2>\n<p>Speaking about ARIA roles, they define what an HTML element is or how it should behave \u2013 when native HTML elements are not applicable. They tell assistive technologies how to interpret an element and its purpose within the page. Roles are particularly useful for custom components that don\u2019t have native semantic meaning.<\/p>\n<h3>Most commonly used ARIA roles<\/h3>\n<p>Here is a not exhaustive list of some ot the most commonly used ARIA roles:<\/p>\n<ul>\n<li><code>role=&quot;button&quot;<\/code> (prefer <code>&lt;button&gt;<\/code>) indicates an interactive element that triggers an action.<\/li>\n<li><code>role=&quot;main&quot;<\/code> (prefer <code>&lt;main&gt;<\/code>) the main content of your app \u2013 typically <code>&lt;router-outlet \/&gt;<\/code>.<\/li>\n<li><code>role=&quot;complementary&quot;<\/code> (prefer <code>&lt;aside&gt;<\/code>) denotes content that complements \u2013 like a sidebar.<\/li>\n<li><code>role=&quot;navigation&quot;<\/code> (prefer <code>&lt;nav&gt;<\/code>) denotes a section of navigation links \u2013 like your route nav.<\/li>\n<li><code>role=&quot;alert&quot;<\/code> used for important messages that should be immediately announced.<\/li>\n<li><code>role=&quot;dialog&quot;<\/code> signifies a modal or popup window.<\/li>\n<li><code>role=&quot;listbox&quot;<\/code> used for a widget that allows the user to select from a list of options.<\/li>\n<li><code>role=&quot;tablist&quot;<\/code> composes a tabbed interface.<\/li>\n<li><code>role=&quot;tab&quot;<\/code> represents a selectable tab in a tabbed interface.<\/li>\n<li><code>role=&quot;tabpanel&quot;<\/code> the container for the content associated with a tab.<\/li>\n<\/ul>\n<p>Find a comprehensive list of all <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\">ARIA roles<\/a> by MDN.<\/p>\n<h3>Examples<\/h3>\n<p>This could be a <code>&lt;app-dialog&gt;<\/code> component:<\/p>\n<pre><code class=\"language-html\">&lt;app-dialog role=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot; aria-modal=&quot;true&quot; cdkFocusTrap&gt;\n  &lt;h2 id=&quot;dialogTitle&quot;&gt;{{ dialogTitle() }}&lt;\/h2&gt;\n  &lt;p&gt;{{ dialogContent() }}&lt;\/p&gt;\n  &lt;button type=&quot;button&quot; (click)=&quot;onClose()&quot;&gt;Close&lt;\/button&gt;\n&lt;\/app-dialog&gt;<\/code><\/pre>\n<p>In this simple example, the <code>role=&quot;dialog&quot;<\/code> indicates that this is a dialog window. The <code>aria-labelledby<\/code> attribute associates the dialog with its title, and <code>aria-modal=&quot;true&quot;<\/code> indicates that the dialog is modal, meaning it prevents interaction with the rest of the page until closed. Note that we also use the <code>cdkFocusTrap<\/code> directive to ensure that (keyboard navigation) focus is trapped within the dialog while it is open.<\/p>\n<p>Another example could be a <strong>tab interface<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;app-tablist role=&quot;tablist&quot;&gt;\n  @for (tab of tabs(); track tab.id) {\n    &lt;button role=&quot;tab&quot; aria-controls=&quot;panel_{{ tab.id }}&quot; id=&quot;tab_{{ tab.id }}&quot;\n            [attr.aria-selected]=&quot;activeTab() === tab.id ? &#039;true&#039; : &#039;false&#039;&quot;&gt;\n      {{ tab.label }}\n    &lt;\/button&gt;\n  } @empty {\n    No tabs available.\n  }\n&lt;\/app-tablist&gt;\n@for (tab of tabs(); track tab.id) {\n  &lt;app-tab role=&quot;tabpanel&quot; aria-labelledby=&quot;tab_{{ tab.id }}&quot; id=&quot;panel_{{ tab.id }}&quot;&gt;\n    {{ tab.content }}\n  &lt;\/app-tab&gt;\n}<\/code><\/pre>\n<p>In this example, we have a tabbed interface. The <code>role=&quot;tablist&quot;<\/code> indicates that this is a list of tabs. Each tab has the <code>role=&quot;tab&quot;<\/code> and is associated with its corresponding panel using <code>aria-controls<\/code>. The <code>aria-selected<\/code> attribute indicates which tab is currently selected. The panels have the <code>role=&quot;tabpanel&quot;<\/code> and are associated with their respective tabs using <code>aria-labelledby<\/code>.<\/p>\n<h2>ARIA Attributes<\/h2>\n<p>ARIA attributes provide additional details about an HTML element\u2019s state, properties or relationships. They enhance the <strong>semantic meaning<\/strong> of your <em>Angular<\/em> components and other HTML elements, especially when default HTML does not fully describe an element\u2019s behavior.<\/p>\n<p>We distinguish between states and properties. States are dynamic and can change over time, while properties are static and describe the element's characteristics.<\/p>\n<h3>Most commonly used ARIA attributes<\/h3>\n<h4>Widget attributes (states and properties)<\/h4>\n<ul>\n<li><code>aria-disabled<\/code> (state\/property): indicates whether an element is disabled or not \u2013 not necessary if native <code>disabled<\/code> is used.<\/li>\n<li><code>aria-required<\/code> (property): indicates that user input is required before submitting a form \u2013 not necessary if native <code>required<\/code> is used.<\/li>\n<li><code>aria-expanded<\/code> (state): communicates whether an element, such as a collapsible menu, is expanded or collapsed.<\/li>\n<li><code>aria-hidden<\/code> (state): indicates whether an element should be exposed to assistive technologies.<\/li>\n<li><code>aria-invalid<\/code> (state): indicates whether the value of an input field is valid or invalid.<\/li>\n<\/ul>\n<h4>Live region attributes (states)<\/h4>\n<ul>\n<li><code>aria-live<\/code>: specifies how updates to content should be announced to the user (e.g., <code>assertive<\/code> for error messages).<\/li>\n<li><code>aria-busy<\/code>: indicates whether an element is currently being updated (e.g., loading spinner).<\/li>\n<\/ul>\n<h4>Drag-and-Drop attributes (states)<\/h4>\n<ul>\n<li><code>aria-grabbed<\/code>: indicates whether an element is currently being dragged (e.g., <code>true<\/code> when dragging).<\/li>\n<\/ul>\n<h4>Relationship attributes (properties)<\/h4>\n<ul>\n<li><code>aria-label<\/code>: provides a text alternative for elements that may not have visible text.<\/li>\n<li><code>aria-labelledby<\/code>: identifies an element (or elements) that labels the current element.<\/li>\n<li><code>aria-describedby<\/code>: identifies an element (or elements) that describes the current element.<\/li>\n<li><code>aria-controls<\/code> (state): references the element(s) whose content is controlled by the current element.<\/li>\n<\/ul>\n<p>And here is again the full list of all <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\">ARIA attributes<\/a> by MDN.<\/p>\n<h3>Examples<\/h3>\n<p>A toggle button using <code>aria-label<\/code> and <code>aria-expanded<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;button\n  type=&quot;button&quot;\n  aria-label=&quot;Toggle navigation menu&quot;\n  [attr.aria-expanded]=&quot;isMenuOpen() ? &#039;true&#039; : &#039;false&#039;&quot;\n  (click)=&quot;onToggleNav()&quot;&gt;\n  &lt;i class=&quot;icon-menu&quot;&gt;&lt;\/i&gt;\n&lt;\/button&gt;<\/code><\/pre>\n<p>In this simple example, the <code>aria-label<\/code> attribute provides a text alternative for the button, indicating its purpose. The <code>aria-expanded<\/code> attribute indicates whether the navigation menu is currently open or closed. This is important for screen reader users, as it helps them understand the state of the button.<\/p>\n<p>Using <code>aria-live<\/code> combined with <code>role=&quot;alert&quot;<\/code> for an error message:<\/p>\n<pre><code class=\"language-html\">@let showFromErrors =\n  flightSearchForm.controls.from.errors &amp;&amp;\n  flightSearchForm.controls.from.touched;\n\n&lt;input\n  [...]\n  id=&quot;fromAirport&quot;\n  [attr.aria-invalid]=&quot;!!showFromErrors&quot;\n  [attr.aria-describedby]=&quot;showFromErrors ? &#039;fromAirportErrors&#039; : null&quot;\n\/&gt;\n@if (showFromErrors) {\n  &lt;app-flight-validation-errors\n    aria-live=&quot;assertive&quot;\n    role=&quot;alert&quot;\n    id=&quot;fromAirportErrors&quot;\n    fieldLabel=&quot;From&quot;\n    [errors]=&quot;flightSearchForm.controls.from.errors&quot;\n  \/&gt;\n}<\/code><\/pre>\n<p>In this example, the <code>aria-live<\/code> attribute is set to <code>assertive<\/code>, which means that the screen reader will announce the error message immediately when it appears. The <code>role=&quot;alert&quot;<\/code> indicates that this is an important message. Additionally, the <code>aria-invalid<\/code> attribute is used to indicate that the input field has validation errors and the <code>aria-describedby<\/code> attribute is used to associate the error message with the input field. Note that the <code>aria-describedby<\/code> attribute is set to <code>null<\/code> when there are no errors. This ensures that it's not present in the rendered DOM when not needed.<\/p>\n<h2>Accessibility Workshop<\/h2>\n<p>For those looking to deepen their <em>Angular<\/em> expertise, we offer a range of workshops \u2013 both in English and German:<\/p>\n<ul>\n<li>\u267f <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Workshop<\/strong><\/a><\/li>\n<li>\ud83d\udcc8 <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> (including accessibility-related topics)<\/li>\n<li>\ud83d\ude80 <a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-optimization-workshop\/\"><strong>Performance Workshop<\/strong><\/a><\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Implementing <strong>ARIA<\/strong> in <em>Angular<\/em> is essential for building web apps that are both accessible and inclusive. By leveraging <strong>ARIA roles and attributes<\/strong> appropriately, developers can bridge gaps where native HTML falls short, ensuring that all users have a positive experience. This approach not only meets accessibility standards but also lays the foundation for user-centric and future-proof design.<\/p>\n<p>In the next edition of our <a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/web-accessibility-in-angular\/\"><strong>A11y blog series<\/strong><\/a>, we'll cover <a href=\"https:\/\/www.angulararchitects.io\/en\/?p=29925\" title=\"Accessible Angular Forms\"><strong>Accessible Angular Forms<\/strong><\/a>.<\/p>\n<p>This blog post was written by <a href=\"https:\/\/alex.thalhammer.name\">Alexander Thalhammer<\/a>. Follow me on <a href=\"https:\/\/at.linkedin.com\/in\/thalhammer\">Linkedin<\/a>, <a href=\"https:\/\/twitter.com\/LX_T\">X<\/a> or <a href=\"https:\/\/github.com\/L-X-T\">giThub<\/a>.<\/p>\n<h2>References<\/h2>\n<ul>\n<li><a href=\"https:\/\/blog.angular.dev\/accessibility-in-angular-e84f73a223f\">Accessibility in Angular Applications<\/a> by Zama Khan Mohammed<\/li>\n<li><a href=\"https:\/\/amir-saeed.medium.com\/accessibility-in-angular-17-bae5de7c2803\">Accessibility in Angular 17<\/a> by Amir Saeed<\/li>\n<li><a href=\"https:\/\/angular.dev\/api\/router\/RouterLinkActive#ariaCurrentWhenActive\">ariaCurrentWhenActive \u2013 official docs<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\">ARIA roles<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\">ARIA attributes<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This is post 4 of 7 in the series &ldquo;Accessibility in Angular&rdquo; Web Accessibility (A11y) in Angular \u2013 Introduction Accessibility Testing Tools Accessible Angular Routes ARIA roles and attributes in Angular Building Accessible Forms with Angular Enhancing A11y with Angular CDK Angular ARIA initial version released ARIA (short for Accessible Rich Internet Applications) roles and [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":29862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-29699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-accessibility-in-angular-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ARIA roles and attributes in Angular - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ARIA roles and attributes in Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 4 of 7 in the series &ldquo;Accessibility in Angular&rdquo; Web Accessibility (A11y) in Angular \u2013 Introduction Accessibility Testing Tools Accessible Angular Routes ARIA roles and attributes in Angular Building Accessible Forms with Angular Enhancing A11y with Angular CDK Angular ARIA initial version released ARIA (short for Accessible Rich Internet Applications) roles and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-06T09:51:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T15:39:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1340\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"ARIA roles and attributes in Angular\",\"datePublished\":\"2025-04-06T09:51:58+00:00\",\"dateModified\":\"2025-04-21T15:39:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\"},\"wordCount\":1127,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\",\"name\":\"ARIA roles and attributes in Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg\",\"datePublished\":\"2025-04-06T09:51:58+00:00\",\"dateModified\":\"2025-04-21T15:39:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg\",\"width\":2560,\"height\":1340,\"caption\":\"Accessibility ARIA Labels Hero\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ARIA roles and attributes in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ARIA roles and attributes in Angular - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/","og_locale":"en_US","og_type":"article","og_title":"ARIA roles and attributes in Angular - ANGULARarchitects","og_description":"This is post 4 of 7 in the series &ldquo;Accessibility in Angular&rdquo; Web Accessibility (A11y) in Angular \u2013 Introduction Accessibility Testing Tools Accessible Angular Routes ARIA roles and attributes in Angular Building Accessible Forms with Angular Enhancing A11y with Angular CDK Angular ARIA initial version released ARIA (short for Accessible Rich Internet Applications) roles and [&hellip;]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/","og_site_name":"ANGULARarchitects","article_published_time":"2025-04-06T09:51:58+00:00","article_modified_time":"2025-04-21T15:39:57+00:00","og_image":[{"width":2560,"height":1340,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"ARIA roles and attributes in Angular","datePublished":"2025-04-06T09:51:58+00:00","dateModified":"2025-04-21T15:39:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/"},"wordCount":1127,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/","name":"ARIA roles and attributes in Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg","datePublished":"2025-04-06T09:51:58+00:00","dateModified":"2025-04-21T15:39:57+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/aria-labels-hero-scaled.jpg","width":2560,"height":1340,"caption":"Accessibility ARIA Labels Hero"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/aria-roles-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"ARIA roles and attributes in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=29699"}],"version-history":[{"count":5,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29699\/revisions"}],"predecessor-version":[{"id":29931,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/29699\/revisions\/29931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/29862"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=29699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=29699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=29699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}