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
<input type="radio"> will be a
But non-semantic elements like
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:
- Widget roles
Widget roles can be used to identify interactive patterns. With these, there are often also semantic equivalents that should be used.
- 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:
- Live region roles
Live regions are elements that include dynamic content that can change. For visual users, these are often visually noticeable changes.
- Window roles
These include sub-windows for your main document and are, for example,
- 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)
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
- cell (use
- columnheader (use
- definition (use
- figure (use
- heading (use
- img (use
- list (use either
- listitem (use
- meter (use
- row (use the
- rowgroup (use
- rowheader (use
- separator (use
- table (use
- term (use
And there are a few more that you rarely will ever need to use and should try to avoid.
Let's take a look at all the available widget roles.
The following widget roles should be avoided as they have semantic alternatives.
Then there are some composite widget roles, which should always include a combination of others.
As mentioned, the landmarks often have semantic alternatives that should be used.
But for completeness, here is the list.
- banner (
- complementary (
- contentinfo (
- form (
- main (
- navigation (
- region (
Live region roles
The live region roles are exciting and should be used only for dynamically changing elements.