XHTML - (WAI-ARIA) Role attribute

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:

Documentation / Reference





Discover More
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
HTML - Accessible Rich Internet Applications (ARIA) (Role and Attribute)

HTML To enable assistive technology products to expose a more fine-grained interface than is otherwise possible with HTML elements and attributes, a set of annotations for assistive technology products...
HTML - Attribute

HTML An attribute in HTML is an XML attribute of an HTML element Attribute names are TR/html-markup/documents.htmlcase-insensitive. Classes and IDs are attributes used in the selection of element....



Share this page:
Follow us:
Task Runner