Complete List of WAI ARIA Roles and Their Uses in 2020

Why understanding WAI ARIA roles and attributes is key to today’s landscape of the web? Let’s start at the core of the issue:

Web accessibility is the process of making your website equally usable to people of all abilities and disabilities. It’s about understanding that users with disabilities may use assistive technologies to access the web. As a website owner, it is your duty to ensure that you make your website adequately compatible with such assistive technologies.

WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a set of guidelines published by the W3C. It defines additional HTML attributes that you can apply to your tags. These attributes help improve accessibility and make your DOM structure more readable by assistive technologies.

The five rules of ARIA use

There are many types of assistive technologies. A common one is a screen reader, which is used by partially or completely blind people. A screen reader parses the HTML DOM of a webpage and reads it out to the user. WAI ARIA roles and attributes help screen readers read out the relevant details. To get an understanding of how it will work, here is a list of videos of screen readers using ARIA. Some common tasks that you can accomplish using ARIA are:

• Set checkpoints within a webpage
• Announce dynamic parts of a webpage to assistive technologies
• Improve keyboard navigation of a webpage

Before you set out to incorporate ARIA into your website, let’s take a step back and learn about W3C’s rules for ARIA use. Here are the main ones:

• Use built-in HTML attributes over ARIA whenever possible.
• Do not change the native role of an HTML element. In case there is a clash, create a div wrapper over the element and define a role.
• All ARIA functionality and roles must be keyboard accessible.
• Do not use role as presentation, or aria-hidden to true on a focusable element. This results in the user focusing on an empty element.
• All interactive elements must have an accessible name. When an interactive element is encountered, you must ensure that the associated text describes what it does.

With these rules in mind, let us explore how you can use WAI ARIA roles in your website.

Types of WAI ARIA roles

Before we describe each role, let us look at the six categories of WAI ARIA roles:

• Landmark roles typically denote large areas of a document. Some examples are banner, search, and region.
• Widget roles help in making interactive elements accessible. button, checkbox, and radio are common examples of widget roles.
• Window roles help in creating a sub-window within your webpage. The two roles that comprise window roles are alertdialog and dialog.
• Document structure roles give information about a non-interactive, static section of the page. Common document structure roles are article, table, and heading.
• Live region roles help you inform assistive technologies about dynamic content of a webpage. They work together with the aria-live attribute. alert, log, and timer are commonly used live region roles.
• Abstract roles are the foundation on which other WAI ARIA roles are based on. Abstract roles are used by browsers and not developers.

Comprehensive list of WAI ARIA roles

In this section, let’s look at various roles that are a part of the WAI ARIA functionality:

The alert ARIA role

The alert role announces to a user the content of an element, when it is updated dynamically. Assistive technologies will detect change in the contents of elements with this role and read out new content. Ensure that you do not use this role on static elements.

You can associate the alert role as shown below. A simple use case could be a div that displays errors in a form before submission.

<div class="form-errors" role="alert">
    The alert will trigger when the content of this element changes.
</div>

The application ARIA role

The application role tells assistive technologies to treat it and all of its children as a desktop application. This role works well with widgets in general. Within an element with the application role, you have complete control over keyboard interactions.

A good example of a widget with an application role is a WYSIWYG editor. Within the editor, you can configure the behavior of buttons and the text area completely unlike other web applications. A common application that uses this role is Google Docs.

You can declare the role of an element as application as shown below:

<div role="application">
  ...
</div>

The article ARIA role

You should assign the article role to an element that contains an article or similar textual content within itself. Other use cases of the article role are comments and forum posts. Bear in mind that this role does not support any keyboard interaction, as assistive technologies usually read out the contents.

<div role="article">
  <h2>Article Title</h2>
  ...
</div>

The banner ARIA role

As the name suggests, the banner role describes elements that contain informative content at the top of a page. These elements may include the title of a website, its logo, or the search bar. Here is the how you can use it in your code:

<div role="banner">
  <img src="https://www.codeinwp.com/logo.png" alt="Website Name" />
  <h1>Title of the Website</h1>
  <h2>Tagline</h2>
</div>

The button ARIA role

The rules of WAI ARIA suggest that you use the HTML native functionality for clickable objects on a webpage. Occasionally, you may use a non-native element to function as a button. In such a situation, you should set the ARIA role of the element to button. When encountering this role, assistive technologies will treat the element as a button.

You can further enhance functionality with the button-pressed attribute and the tabindex property to make it keyboard accessible.

<div id="form-submit" tabindex="0" role="button" aria-pressed="false">Submit</div>

The cell ARIA role

The cell role refers to an element within a table cell. Therefore, an element with the cell role must reside within an HTML <row> element. The cell role ensures that there is no structural element within this element. Here’s an example use of the cell role:

<table>
  ...
  <tr role="row">
    <td role="cell">Data Point 1</td>
    <td role="cell">Data Point 2</td>
  </tr>
  ...
</table>

The checkbox ARIA role

The first rule of ARIA use explains the use of native HTML features. Any element with the input=checkbox of HTML provides native functionality in HTML.

However, any other interactive control that the user can check should have the checkbox role. Elements with the checkbox role may also contain the aria-checked attribute, which describes the checkbox’s state to a screen reader. Ensure that you also use the tabindex attribute to make it keyboard accessible.

The comment role is used to denote a comment, a reaction, or a reply to a comment on a page.

<div role="comment" class="thread-1">
  <h3>John Doe</h3>
  <p>Happy New Year.</p>
  <p><time datetime="2021-01-01T00:00">January 1 2021, 00:00</time></p>
</div>

The complementary ARIA role

This ARIA role is a landmark role, often used to link an element to the main content of a webpage. These elements are generally sidebars or boxes with more information. The HTML tag <aside> provides native functionality, and you should use it whenever possible.

<div class="about-us" role="complementary">
  Some information
</div>

The contentinfo ARIA role

The contentinfo role is another landmark ARIA role. It contains information repeated at the end of every page. This generally includes copyright information, contact information, or privacy statements. This information may also be a part of the footer, so you may use the <footer> tag instead of this role.

<div role="contentinfo">
  &copy; All rights reserved.
</div>

The dialog ARIA role

The dialog role is a window ARIA role that signifies a sub-window separated from the rest of the webpage. In addition to the role, you must also add a label and tabindex. An example of the dialog role is shown below:

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog description">
  <p>Dialog Content</p>
  <button>Close Dialog</button>
</div>

The document ARIA role

The document role encompasses elements in a webpage, where assistive technologies should read out content. It is different from the article role, as it does not have any relation to other elements with a document role. Its declaration is similar to the article role, though.

The feed ARIA role

The feed role generally denotes a section of the document that contains a list of dynamic, scrollable links. A feed may load more content infinitely when a user reaches its end.

A feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads. The feed role instructs assistive technologies to enter their read mode. The children of a feed element should be <article> HTML tags.

<div role="feed" aria-busy="false">
  ...
  <article>...</article>
  <article>...</article>
  ...   
</div>

The figure ARIA role

The figure role is assigned to elements that contain a figure inside a page, in absence of an HTML element. A figure may consist of one or more images, or other content that puts a break to the regular flow of text. Code snippets and quotes are common examples of these breaks.

<div role="figure">
  ...
  <img src="https://www.codeinwp.com/fig.png" alt="image description" />
  ...
</div>

The form ARIA role

The form is a landmark role that denotes a group of form elements on a webpage. You should use this role only if your form elements are not present within the HTML <form> tag.

The grid ARIA role

A widget can use the grid role when it contains one or more rows of cells. Using this ARIA role enables the keyboard to shift focus through these cells.

The gridcell ARIA role

The gridcell role is complementary to the grid role, as it denotes cells within a grid. You should use the gridcell in absence of the <td> HTML tag. The following code snippet demonstrates the use of grid and gridcell together:

<div role="grid">
  <div role="gridcell">Data Point 1</div>
  <div role="gridcell">Data Point 2</div>
</div>

The heading ARIA role

The heading role signifies an element that acts as a heading without the HTML header tags. To make the page structurally sound, a level may also be provided with the heading. An example of the heading role is:

<div role="heading" aria-level="2">This is the second level heading of a page</div>

The img ARIA role

The ARIA img role helps you encompass multiple elements in a page that should be considered as a single image. These elements may be images, quotes, or code snippets.

The list ARIA role

The list ARIA role encompasses a list of items. It is normally used in conjunction with the listitem role. You should use it only if the semantic HTML lists are not used for the purpose.

The listitem ARIA role

The listitem role identifies an item within a list of items. Here is a code snippet that demonstrates the use of list and listitem together:

<div role="list">
  <div role="listitem">Item 1</div>
  <div role="listitem">Item 2</div>
  ...
</div>

The main ARIA role

The main role is a landmark ARIA role that is associated with the primary content of the document. The main content can then be further subdivided into other categories.

The mark ARIA role

The mark role is another landmark role that identifies elements containing highlighted text. The HTML <mark> element provides this functionality. You should use the mark role only in absence of this element.

The navigation ARIA role

The navigation role is a landmark role that encompasses a group of links that you can use to navigate through a website.

The region ARIA role

The region role identifies an area in the document that contains similar elements. You may use it to demarcate general parts of a webpage, when no other role fits the description.

The row ARIA role

The row role identifies a row in a table. Use it in absences of the <row> HTML tag. An element with the row role may contain a cell, gridcell, or a column header. Usually, a row role is placed in a table or a grid.

The rowgroup ARIA role

The rowgroup ARIA role is a combination of rows within a table. It contains elements with the role row, cell, or gridcell. Here is a code snippet that demonstrates its use:

<div role="table" ...>
   <div id="desc">Table Description</div>
   <div role="rowgroup"> <!-- contains table header -->
      <div role="row">
         Table Header
      </div>
   </div>
   <div role="rowgroup"> <!-- contains table data -->
     <div role="row">
        Table Row 1
     </div>
     <div role="row">   
        Table Row 2
     </div>
     ...
   </div>
</div>

The search ARIA role

The search role is a landmark role that contains the search section of a page. It may contain the search bar, the search button and errors in the search form, if any.

The switch ARIA role

The switch role is a more specific form of the checkbox role. The switch role may represent the states on and off in place of checked and unchecked.

The table ARIA role

The table role identifies the HTML element that contains a table structure. Within this structure, you may have headers, descriptions, rows, and columns. You should use the table role instead of the native <table> HTML element if it’s not available.

<div role="table" ...>
   <div role="rowgroup"> <!-- contains table header -->
      ...
   </div>
   <div role="rowgroup"> <!-- contains table data -->
     ...
   </div>
</div>

The textbox ARIA role

The textbox role contains an element that allows the user to enter free-form text. It is used in place of the <input type = "text" > element for single line text inputs, or the <textarea> tag for multi-line text input.

The timer ARIA role

The timer role may be used to tell assistive technologies that it contains a numerical counter, which changes with the passage of time. You can use JavaScript to manipulate the data within the timer role.

Final thoughts on WAI ARIA roles in 2020

Accessibility ensures that you treat users of all abilities and disabilities equally. However, you may ask what is the correct time to ensure that your website is accessible? The ideal time to make a website accessible is from the very beginning. Enhancing accessibility on an existing project can be cumbersome and end up being a redundant task. Therefore, it makes sense for you to incorporate WAI ARIA techniques in your development cycle as soon as possible.