Introduced as part of XHTML, they mark the functionality or orientation of a give content. Used by WAI-ARIA capable screen readers to deduct content from the page. Example:
<div role=”banner”>This is my banner</div>
This is supposed to be more semantic than <div class=”banner”>
There are a bunch of roles that can be used (you can’t make them up):
banner- This is a region that contains the prime heading or internal title of a page. Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes elements such as the logo of the site sponsor, the main heading for the page, and the site-specific search tool. This typically appears at the top of the page, spanning the full width.
complementary- This is any section of the document that supports but is separable from the main content, yet is semantically meaningful on its own even when separated. There are various types of content that conform to this role. For example, take the case of a portal—this may include but not be limited to show times, current weather, related articles, or stocks to watch. The content should be relevant to the main content; if it is completely separable, a more general role should be favored.
contentinfo- This is meta information about the content on the page, or the page as a whole. For example, footnotes, copyrights, links to privacy statements, and suchlike would belong here.
main- As the name suggests, this is the main content in a document. It marks the content that is directly related to or expands upon the central topic of the page.
navigation- This refers to the collection of links suitable for use when navigating the document or related documents.
note- This denotes content parenthetic or ancillary to the main content of the resource.
search- The search tool of a web document, this is typically a form used to submit search requests about the site or to a more general internet search service.
A quick glance at these values shows considerable overlap between many of the new HTML5 elements; the banner role and header element, complementary role and aside element, navigation role and nav element, all seem very closely related. Indeed, the complementary and note roles in combination cover the purpose of the aside element. We saw that the aside element has been stretched to include two quite different purposes; arguably having two separate roles (or elements, in HTML5 ) would make more sense.
The main role also arguably provides a purpose for which HTML5 does not have an element—the main content block of a page.
Now, unlike with class or id, you can’t simply invent your own role values. It is possible to define your own role values formally, though in most instances this will be of no practical value as browsers and other software won’t have any idea of what to do with it, and in any case it’s beyond the scope of this course. However, as you might have guessed, ARIA defines a number of additional values in addition to the standard role values defined in XHTML 1.1. ARIA roles can be quite complex, so let’s focus on some of the most immediately useful ones. Note also that simply adding a role value to an element (for example, role="button" to a span element) doesn’t make that element a button. Rather, role is for describing the purpose for which you are using the element. It’s up to the developer to make the span behave like a button.
ARIA defines several types of role, among these widget roles (we saw earlier that a widget is what ARIA calls controls), landmark roles (regions of the page intended as navigational landmarks) and document structure roles (structures that organize content in a page). Next up, let’s run through a quick overview of the most common ARIA roles.
Widget roles include:
alert
alertdialog
checkbox
combobox
dialog
menuitem
menuitemcheckbox
menuitemradio
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
2 replies on “HTML role attributes”
Very useful post. Thank you for that!
Really helped me out! Thanks!