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.
In this post, we look at the most popular and useful WAI ARIA roles set by W3C.
But before we do that, let’s go through some of the basics of working with WAI ARIA.
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
divwrapper over the element and define a role.
- All ARIA functionality and roles must be keyboard accessible.
- Do not use
trueon 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
Widget roles help in making interactive elements accessible.
radioare common examples of widget roles.
Window roles help in creating a sub-window within your webpage. The two roles that comprise window roles are
Document structure roles give information about a non-interactive, static section of the page. Common document structure roles are
Live region roles help you inform assistive technologies about dynamic content of a webpage. They work together with the
timerare 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:
alert ARIA role
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>
application ARIA role
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>
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>
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="logo.png" alt="Website Name" /> <h1>Title of the Website</h1> <h2>Tagline</h2> </div>
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>
cell ARIA role
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
<table> ... <tr role="row"> <td role="cell">Data Point 1</td> <td role="cell">Data Point 2</td> </tr> ... </table>
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.
comment ARIA role
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>
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>
contentinfo ARIA role
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"> © All rights reserved. </div>
dialog ARIA role
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>
document ARIA role
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.
feed ARIA role
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>
figure ARIA role
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="fig.png" alt="image description" /> ... </div>
form ARIA role
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
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.
gridcell ARIA role
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
<div role="grid"> <div role="gridcell">Data Point 1</div> <div role="gridcell">Data Point 2</div> </div>
heading ARIA role
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>
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.
list ARIA role
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.
listitem ARIA role
listitem role identifies an item within a list of items. Here is a code snippet that demonstrates the use of
<div role="list"> <div role="listitem">Item 1</div> <div role="listitem">Item 2</div> ... </div>
main ARIA role
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.
mark ARIA role
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.
navigation ARIA role
navigation role is a landmark role that encompasses a group of links that you can use to navigate through a website.
region ARIA role
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.
row ARIA role
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
gridcell, or a column header. Usually, a
row role is placed in a
table or a
rowgroup ARIA role
rowgroup ARIA role is a combination of rows within a table. It contains elements with the role
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>
search ARIA role
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.
switch ARIA role
switch role is a more specific form of the
checkbox role. The
switch role may represent the states
off in place of
table ARIA role
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>
textbox ARIA role
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.
timer ARIA 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.
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%: