About
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:
- main,
- etc.
Syntax
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.)
Category and list
Roles are categorized as follows:
- Abstract Roles
- Widget Roles
- Document Structure Roles
- Landmark Roles
Usage
Use cases include:
- accessibility,
- device adaptation,
- server-side processing,
- and complex data description.
There are two primary reasons to use roles in addition to the native semantic element.
Overriding the original semantic
For instance:
- A link that as a button role. Screen readers will see it as a button (as opposed to a link).
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
- and a CSS attribute selector to avoid class-itis and div-itis.
*[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;
}
- Output: