Hall of Bright Carvings

Basically there are two ‘types’ of roles. ‘Landmark’ which allow assistive technology to provide context to a user, and what can generally be thought of as ‘widget’ roles, which help users of Assistive Technology (AT) navigate and utilise more specialised parts of a web page such as menu listings, tab navigation or alert popups.

The following is a list of WAI-ARIA landmark roles.

• application A region declared as a web application, as opposed to a web document. On a practical level this tells AT to stay in ‘focus’ mode which works a little differently to its standard mode.
• banner A region that contains the primary heading or web site title.
• complementary A supporting section of the document that remains meaningful even when separated from the main content.
• contentinfo Metadata that applies to the parent document.
• main The main content of a document.
• navigation A collection of navigational elements (usually links) for navigating the document or related documents.
• search The search tool of a web document.

There’s a bit of overlap between some of the landmark roles and HTML5, but don’t worry about it. The Assistive Tech guys apparently haven’t even come to the table to discuss HTML5 yet but they are actively implementing landmark roles and providing users ways of navigating them so even if you’re using HTML5 now it’s probably a good idea to add the ARIA roles to them as well.

Landmark roles can be added straight to the HTML markup without any problems, in fact in a lot of cases the browser doesn’t even need to understand them (IE6-7 for example don’t have a clue about ARIA) as several AT readers are capable of using them anyway. (JAWS10 for example will provide landscape navigation in IE6 if the roles are available).

Widget roles are different though and should really only be added by javascript:

node.setAttribute("role", "value");

This is because you’re usually adding widget roles because you want to perform some kind of extra functionality and it would be confusing to an AT user if they encountered a block of markup assigned a certain role that didn’t function as expected because they had javascript off.

The following is a list of WAI-ARIA widget roles.

• alert A message with important, and usually time-sensitive, information. Also see alertdialog and status.
• alertdialog A type of dialog that contains an alert message, where initial focus goes to the dialog or an element within it. Also see alert and dialog.
• article A section of a page consisting of an independent part of a document, page, or site.
• button An input that allows for user-triggered actions when clicked or pressed.
• checkbox An checkable input that has three possible values: true, false, or mixed.
• columnheader A cell containing header information for a column.
• combobox A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list.
• composite (abstract role) A widget that may contain navigable descendants or owned children.
• definition A definition of a term or concept.
• dialog A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. Also see alertdialog.
• directory A list of references to members of a group, such as a static table of contents.
• document A region containing related information that is declared as document content, as opposed to a web application.
• grid A grid contains cells of tabular data arranged in rows and columns, like a table.
• gridcell A cell in a grid or treegrid.
• group A set of user interface objects which would not be included in a page summary or table of contents by an assistive technology.
• heading A heading for a section of the page.
• img A container for a collection of elements that form an image.
• input (abstract role) A generic type of widget that allows user input.
• landmark (abstract role) A region of the page intended as a navigational landmark.
• link An interactive reference to an internal or external resource.
• list A group of non-interactive list items.
• listbox A widget that allows the user to select one or more items from a list of choices.
• listitem A single item in a list, listbox, or directory.
• log A type of live region where new information is added in meaningful order and old information may disappear. Also see marquee.
• marquee A type of live region where non-essential information changes frequently. Also see log.
• math An element that represents a mathematical expression.
• menu A type of widget that offers a list of choices to the user.
• menubar A presentation of menu that usually remains visible and is usually presented horizontally.
• menuitem An option in a group of choices contained by a menu or menubar.
• menuitemcheckbox A checkable menuitem that has three possible values: true, false, or mixed.
• menuitemradio A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.
• note A section whose content is parenthetic or ancillary to the main content of the resource.
• option A selectable item in a select list.
• presentation An element whose role is presentational and does not need to be mapped to the accessibility API.
• progressbar An element that displays the progress status for tasks that take a long time.
• radio A checkable input in a group of radio roles, only one of which can be checked at a time.
• radiogroup A group of radio buttons.
• range (abstract role) An input representing a range of values that can be set by the user.
• region A large perceivable section of a web page or document, that the author feels should be included in a summary of page features.
• roletype (abstract role) The base role from which all other roles in this taxonomy inherit.
• row A row of cells in a grid.
• rowheader A cell containing header information for a row in a grid.
• section (abstract role) A renderable structural containment unit in a document or application.
• sectionhead (abstract role) A structure that labels or summarizes the topic of its related section.
• select (abstract role) A form widget that allows the user to make selections from a set of choices.
• separator A divider that separates and distinguishes sections of content or groups of menuitems.
• slider A user input where the user selects a value from within a given range.
• spinbutton A form of range that expects a user to select from amongst discrete choices.
• status A container whose content is advisory information for the user but is not important enough to justify an alert. Also see alert.
• structure (abstract role) A document structural element.
• tab A header for a tabpanel.
• tablist A list of tab elements, which are references to tabpanel elements.
• tabpanel A container for the resources associated with a tab.
• textbox Input that allows free-form text as their value.
• timer A numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
• toolbar A collection of commonly used function buttons represented in compact visual form.
• tooltip A contextual popup that displays a description for an element in a mouse hover or keyboard focused state. Supplement to the normal tooltip processing of the user agent.
• tree A type of list that may contain sub-level nested groups that can be collapsed and expanded.
• treegrid A grid whose rows can be expanded and collapsed in the same manner as for a tree.
• treeitem An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems.
• widget (abstract role) An interactive component of a graphical user interface (GUI).
• window (abstract role) A browser or application window.

The ‘presentation’ role is a pretty interesting one as it basically allows for extra markup to be ignored by AT. For example consider the following markup:

<ul role="menu">
	<li>< a href="page1" role="menuitem">Home</li>
	<li>< a href="page2" role="menuitem">News</li>
	<li>< a href="page3" role="menuitem">About us</li>
	<li>< a href="page4" role="menuitem">Contact us</li>
</ul>

The li’s are between the menu container and its associated menu items which means AT wont know to group those items together. Changing the markup to:

<ul role="menu">
	<li role="presentation">< a href="page1" role="menuitem">Home</li>
	<li role="presentation">< a href="page2" role="menuitem">News</li>
	<li role="presentation">< a href="page3" role="menuitem">About us</li>
	<li role="presentation">< a href="page4" role="menuitem">Contact us</li>
</ul>

tells the AT to ignore the li’s which then allows the AT to find and group approriate menus and their items.