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:

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

More … Categorization of Roles and list of them

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>

*[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:
Rendered by WebCode

Documentation / Reference