A11Y 101: WAI-ARIA Roles

In the previous article, we had a short introduction to WAI-ARIAs and what they are.

Today we'll dive a bit deeper into one of the elements: WAI-ARIA roles.

The specific roles can add semantic meaning to elements where HTML might miss this context. By doing so, we allow accessibility tools like a screen reader to understand our website structure.

Why do we need to add these roles?

Certain elements have these roles by default. For example, <nav> elements already have a navigation role. And <input type="radio"> will be a radio role.

But non-semantic elements like div and span have no roles. In some cases, we might want to set these explicitly.

The different role categories

We can split these roles into six different categories.

Document structure roles

These roles are used to add a structural description for a section of content. Most of these should have semantic alternatives nowadays. However, there are still a few that have no specific semantic variant like: toolbar, tooltip, and feed.

Widget roles

Widget roles can be used to identify interactive patterns. With these, there are often also semantic equivalents that should be used. The main difference between document structure and widgets is that those widget roles require JavaScript interaction; for the document ones, it's unnecessary. Some examples: scrollbar, slider and tab.

Landmark roles

Landmarks are used to identify the organization and structure of a webpage on a higher level. It would be best if you used these sparingly as they can create a lot of noise for people to understand your structure. Some examples are: form, main, and navigation.

Live region roles

Live regions are elements that include dynamic content that can change. For visual users, these are often visually noticeable changes. Examples are: alert, and timer.

Window roles

These include sub-windows for your main document and are, for example, alertdialog or dialog.

Abstract roles

I'll document these as existing, but you should not use these. Browsers should only use these to identify specific things.

Document structure roles

Let's dive deeper into all the document structure roles we can find.

The following ones do not have semantic variants at the time of writing. (This might change over time)

toolbar
tooltip
feed
math
presentation
note

And the following should only be used as a last resort. They should have some semantic alternative. (I'll describe the semantic versions behind each)

article (use <article>)
cell (use <td>)
columnheader (use <th scope="col">)
definition (use <dfn>
figure (use <figure> instead)
heading (use <h1> - <h6>)
img (use <img> or <picture> instead)
list (use either <ul> or <ol> instead)
listitem (use <li> instead)
meter (use <meter> instead)
row (use the <tr>)
rowgroup (use <thead>, <tfoot> and <tbody>)
rowheader (use <th scope="row">)
separator (use <hr>)
table (use <table>)
term (use <dfn>)

And there are a few more that you rarely will ever need to use and should try to avoid.

application
group
directory
document
associationlist
associationlistitemkey
associationlistitemvalue
blockquote
caption
code
deletion
emphasis
insertion
paragraph
strong
subscript
superscript
time

Let's take a look at all the available widget roles.

scrollbar
searchbox
separator
slider
spinbutton
switch
tab
tabpanel
treeitem

The following widget roles should be avoided as they have semantic alternatives.

button
checkbox
gridcell
link
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
textbox

Then there are some composite widget roles, which should always include a combination of others.

combobox
menu
menubar
tablist
tree
treegrid

Landmark roles

As mentioned, the landmarks often have semantic alternatives that should be used.

But for completeness, here is the list.

banner (<header>)
complementary (<aside>)
contentinfo (<footer>)
form (<form>)
main (<main>)
navigation (<nav>)
region (<section>)
search

Live region roles

The live region roles are exciting and should be used only for dynamically changing elements.

alert
log
marquee
status
timer

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

A11Y 101: WAI-ARIA Roles

Comments

A11Y 101

A11Y 101: WAI-ARIA Properties

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Why do we need to add these roles?

The different role categories

Document structure roles

Widget roles

Landmark roles

Live region roles

Thank you for reading, and let's connect!

Command Palette

Comments

A11Y 101

A11Y 101: WAI-ARIA Properties

More from this blog

Why do we need to add these roles?

The different role categories

Document structure roles

Widget roles

Landmark roles

Live region roles

Thank you for reading, and let's connect!