DEV Community

Roy R.
Roy R.

Posted on • Edited on

Practical and pragmatic generic aria roles to use

It's sometimes difficult to pick an aria role, because they are defined vaguely. Because an aria role is often used to define the purpose of a piece of an application, it often doesn't pin down what specifically the role is, the description hems and haws around the purpose, it provides the vague shape of a thing but not the specifics. Roles are by nature vague. For example, if a role=button were exactly the same as <button> it would actually be redundant, there would be no point in the role, we would just use <button>! So the role descriptions are often more vague.

This results in some difficulty: How do we know what roles to use? For example, try to avoid using role=button. Why? Because you should use actual <button>s, and the actual buttons get for free the role=button.

So then what roles are actually, pragmatically useful when otherwise using html5?

Well, as app authors, what we are often doing is setting priority. We aren't just creating one <div> among thousands, it's a <div role=region>. It's not just a <span>, it's a <span role=comment>.

So what roles are NOT given to us for free by a html5 element like and ( a role=link element), and work well for when we need to make generic elements more specific?

  • role=region is a useful generic role to highlight an area
  • role=alert applies to really high priority, transient things that come up and may go away after, things that elicit a response
  • role=status for status updates, generally where the contents are going to update live
  • role=comment for where it is people writing comment responses
  • role=note for separated text

A huge majority of the remaining roles fall into two "try not to use" categories:

  • Don't use these because the role comes for free from the semantic html5 element: role=button, role=figure, role=code, etc
  • Abstract roles (they exist, but are not intended for use with authorship)

In Summary

I sorted through the aria roles trying to find 2023's most useful generic roles. For now, these are the most useful roles that I could find for authorship that aren't rendered redundant with other html5 builtins.

Top comments (0)