Accessibility for HTML

Roles and Their Different Types

Roles are very important when designing webpages that are accessible because they are read out by a screen reader for the user. For example, the mistake I had made with my previous emoji design was to use buttons rather than menu items for each emoji choice. The problem with this is that buttons are generally able to be clicked anytime, but menu items are only available when the menu is open. Misusing the roles would confuse your user.

Below is a diagram of the relationships of the different roles used by Screen Readers and other accessibility devices that read your code found here.

I used the categorizations listed on the WAI ARIA website to colour code each role to offer a different perspective.

See the definitions for all the roles here.

Characteristics of Roles

These are not roles that you define yourself, these just describe how you're supposed to use each role.

Characteristic 1 - relatedConcept

role:relatedConcept

Different roles whose concepts are related (like the progressbar and the status roles) have this property. This gives a better understanding of role to the user. Keep in mind that they don’t inherit properties from each other, they’re still separate roles.

Characteristic 2 - baseConcept

role:baseConcept

If the role is based on a specific tag, it has the baseConcept property. Keep in mind that they don’t inherit properties from each other either. Example: the textbox role is based on the textbox tag.

Characteristic 3 - mustContain

role:mustContain

Example 1: if an HTML tag has a role of list, then it must contain at least one HTML tag with the role: listitem or the role: group

Example 2: if an HTML tag has a role of menu, then it must contain at least one HTML tag with the role: menuitem , menuitemcheckbox, or menuitemradio

If the required child tags are loaded using another script (not hard coded inside the parent) you must set aria-busy=”true” and then set it back to false once the script is done executing.

Example 1:

from Maxability.co.in

Notes: 1. Just because a parent tag mustContain a certain child tag, doesn’t mean that child tag must be contained in that specific parent.
2. If a parent tag mustContain a certain child tag, it must contain that exact tag, not a subclass of it.
Example: list mustContain a tag with the role group. Even though row is a subclass of group, you can’t use row here.

Characteristic 4 - scope

role:scope

This is pretty much the opposite of mustContain. Scope defines what the role must be contained in.

Example 1: if an HTML tag has a role of listitem , then it must be contained in an HTML tag with the role: list.