# An in-depth guide to ARIA roles

DevFeed: [An in-depth guide to ARIA roles](<https://devfeed.tech/articles/an-in-depth-guide-to-aria-roles-9369.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/an-indepth-guide-to-aria-roles/>)

Author: Duncan Jimbo

Published: 2020-08-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [developers](<https://devfeed.tech/tags/developers.md>), [guide](<https://devfeed.tech/tags/guide.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>)

## AI overview

This guide explains ARIA roles, their six categories, and how they supplement HTML semantics when native elements are unavailable or insufficiently supported. It covers usage guidance, document structure roles, and landmark roles, with attention to browser and assistive technology support.

## Source excerpt

The ARIA specification is divided into categories of attributes, one of which is Roles, and the other being States & Properties. ARIA roles, which are covered in this article, are generally used to describe elements: that may not exist within HTML, which may not have full cross-browser support, which may have implementation gaps in screen readers and other assistive technologies. For instance, ARIA roles can be useful in situations where native HTML semantics are not understood in legacy user agents (e.g., browsers). Usage ARIA roles are added to elements using the role="<ROLE_TYPE>" attribute, where ROLE_TYPE represents the specific role being added. Once an ARIA role is set on an element, it should not be changed, regardless of the state of the element. In some cases, roles have to be paired with the appropriate ARIA state or property. However, this article's examples have reduced markup to limit the scope to just ARIA roles. ARIA roles are broken down into six categories: Abstract Roles Document Structure Roles Landmark Roles Live Region Roles Widget Roles Window Roles Abstract roles Abstract roles are only intended for use by browsers to help organize and streamline a document. They should not be used by developers writing HTML markup. Doing so will not result in any meaningful information being conveyed to assistive technologies or to users. Document Structure roles Document roles are used to provide a structural description for a section of content. A majority of the available roles in this category resemble available semantic HTML tags and it is recommended to only use them when an appropriate native tag is not available. The roles in this category are also not typically interactive in nature. However, they may be used to contain other roles that are interactive. The following examples of toolbar and tooltip roles, serve as good examples of when to use Document Structure roles to provide information to assistive technologies when the equivalent native HTML ta