The XHTML Role Attribute allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element.
Most of the roles have been defined as part of Accessible Rich Internet Applications (WAI-ARIA) 1.0), and then later incorporated into HTML5.
Some of the new HTML5 elements are even based on the original ARIA roles such as:
This attribute can be integrated into any markup language based upon XHTML Modularization
Browsers will apply the first recognized role in the token list.
<span role="foo link note bar">...</a>
Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first.
If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)
Roles are categorized as follows:
More … Categorization of Roles and list of them
Use cases include:
There are two primary reasons to use roles in addition to the native semantic element.
For instance:
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
background-color:#44c767;
border-radius:28px;
display:inline-block;
color:#ffffff;
padding:16px 31px;
}
*[role="button"]:hover {
background-color:#5cbf2a;
}
*[role="button"]:active {
position:relative;
top:1px;
}