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)