See Also: ARIA States 101
As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless.
ARIA specifies the following:
- Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”
- Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
- Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
- Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
- Properties for drag-and-drop that describe drag sources and drop targets
- A way to provide keyboard navigation for the Web objects and events, such as those mentioned above
This article will look at the first two items dealing with ARIA roles.
How to use roles
As the list mentioned, roles describe widgets and structure. Structural roles are added to markup as attributes of elements. In XHTML, for example:
<div id="header" role="banner">
<div id="nav" role="navigation">
or in HTML5
<header role="banner">
<nav role="navigation">
Roles used in ways like the preceding examples are navigation aids for machine readers and for assistive devices such as screen readers.
Roles that describe widgets are added to markup with additional information. The role in the example below identifies the element as a slider, with additional values using the aria prefix prepended to the property name. For example, in a slider widget that allows the user to select the day of the week, the values 1 – 7 indicate the days of the week. The first day of the week, number 1, is Sunday. The aria-valuemin and aria-valuemax restrict the options in the slider to 1 – 7.
<div role="slider"
aria-valuenow="1"
aria-valuemin="1" aria-valuemax="7"
aria-valuetext="Sunday"></div>
List of roles
The W3C list of roles is quoted below. Links go to further definitions of each role on the W3C site.
Roles that act as standalone user interface widgets or as part of larger, composite widgets.
alertalertdialogbuttoncheckboxdialoggridcelllinklogmarqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioscrollbarsliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Roles that act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.
Roles that describe document structures that organize content in a page.
articlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparatortoolbar
What a coincidence, I was just going to cover ARIA with my students today.
I think for simplicity sake I’ll only cover landmark roles in class as a nice introduction. I think at this stage in their learning, introducing all the states and stuff may be too much.
Thanks for your comment! Don’t know what your class is, Thomas, but for basic HTML needs I think you are right. When you go beyond landmark roles you’re getting into widget and web app development.
Thanks for explaining it…
Why aren’t you using ARIA Roles on your own web pages?
I do have them on my home page, but not on this blog.
What is needed (and I haven’t had luck finding) is the URL of a working example for each role/widget type.
Having read the abstract design pattern associated with several of these roles, a picture would help, and even better a working example!
I’ve thought the same thing, especially about the widgets, which seem a bit obscure to me. If I find such a demo, I’ll definitely mention it here.
Good read but “A” stands for “assistive” not “accessibility”.
Not sure which “A” you are talking about, but here’s what the W3C has to say. https://www.w3.org/TR/wai-aria/
Every link inside List of Roles is broken.
Those links all went to W3C descriptions, and the page is no longer available on the W3C. This information is 9 years old and new information on ARIA directly from the W3C is probably a better place to look.