Standardista

CSS3, JavaScript and HTML5 explained

WAI-ARIA: Accessible Rich Internet Applications basics

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. With the proliferation of internet applications, there has been an increase in the number of sites requiring javascript that update without page refreshes. This imposes accessiblity issues that weren’t addressed by WCAG 1, as those specifications were written when “sites must work without javascript” was a reasonable accessibility specification. With the increase of web based “applications” (versus “sites”) requiring JavaScript, and improved support of javascript in assistive technologies, new accessibility issues have emerged. ARIA attempts to handle some of those issues. Through the inclusion of roles, states and properties your dynamically generated content can be made accessible to assistive technologies. Additionally, static content can be made more accessible thru these additional, enhanced semantic cues.

Why use ARIA?

By including ARIA accessibility features on your website you are enhancing the accessibility of your site or application. By including roles, states and properties, ARIA enables the developer to make the code semantically richer for the assistive technology user. ARIA enables semantic description of element or widget behavior and enables information about groups and the elements within them. ARIA states and properties are accessible via the DOM.

Similar to including the title attribute, ARIA is purely an enhancement and will not harm your site in any way. In other words, there is no valid reason to not include these features! DojoTools currently supports ARIA. Now that IE8 and Firefox 3 (both in beta at the time of this writing) support ARIA, the other JavaScript libraries should soon follow suit.

The easiest to include and most important properties of ARIA are the inclusions for the role attribute, and inclusion of states and properties.

How to incorporate ARIA

  1. Use XHTML the way it was meant to be used wherever possible. Limit ARIA usage to augment XHTML: only use it when XHTML does not support all the semantics required .
  2. Apply ARIA the role attribute in cases where the XHTML needs to be semantically enhanced and in cases where elements are being employed outside of their semantic intent. This includes setting up relationships between related elements (grouping)
  3. Set ARIA states and properties. Set the properties and initial state on dynamically and user changing elements. States, such as “checked”, are properties that may change often. Assistive technology that supports ARIA will react to state and property changes. role changes, on the other hand, may confuse the assistive technology
  4. Support full, usable keyboard navigation. Elements should all be able to have keyboard focus. I am not covering this here, but you can read up on this at For a more in-depth understanding of keyboard navigation see ARIA Best Practices
  5. Make the visual user interface visually match the defined states and properties in browsers that support the ARIA CSS pseudo-classes.

The ARIA role attribute

The role attribute enables the developer to create semantic structure on repurposed elements. While to a sited user, the above example of a span repurposed as a checkbox is not noticeable, the role attribute makes this seemingly non-semantic mark up accessible, usable and interoperable with assistive technologies. Two notes about roles: 1) once set, a role should not be dynamically changed, since this will confuse the assistive technology, and 2) roles take precendence over element default semantic meaning.

Example: Your designer insists that they want the checkboxes on your page to look a certain way. “Impossible” you say. You know that you can use CSS to make a span look like a checkbox. The sited user would never know that your weren’t using <input type="checkbox"...., but for accessibility concerns, you know a screen reader user will not know it’s a checkbox. With the ARIA role attribute included in your code, a both a browser and screen reader that support ARIA, you can make your repurposed span accessible with:

<span role="checkbox" aria-checked="true" tabindex="0" />

Of course, this case makes me cringe, since it doesn’t work without javascript and it is not inherintly semantic. However, if you are creating a web application requiring javascript, and you are coding this when browsers actually support ARIA, then you gotta do what you gotta do. If you include spans transformed into checkboxes, you will need to include equivalent unobtrusive onkeydown and onclick events.

Implementation of the ARIA role attribute

<ul role="navigation">
  <li><a href="mypage.html">My Page</li>
  <li>....
</ul>

Values for the ARIA role attribute (For descriptions, roll over the items below)

alert
A message with an alert or error information
alertdialog

A separate window with an alert or error information
application
A software unit executing a set of tasks for its users
banner
A banner is usually defined as the advertisement at the top of a web page. The banner content typically contains the site or company logo and other key advertisements for the site
button
Allows for user-triggered actions
checkbox
A control that has three possible values, (true, false, mixed)
columnheader
A table cell containing header information for a column
combobox
Combobox is a presentation of a select, where users can type to locate a selected item
contentinfo
This is information about the content on the page. For example, footnotes, copyrights, links to privacy statements, etc. would belong here
definition
The contents of the associated element represent a definition (e.g., of a term or concept). If there is a dfn element within the contents, then that represents the term being defined.
description
Descriptive content for a page element which references this element via describedby.
dialog
A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response
directory
A list of references to members of a single group.
document
Content that contains related information, such as a book.
grid
A grid contains cells of tabular data arranged in rows and columns (e.g., a table).
gridcell
A gridcell is a table cell in a grid. Gridcells may be active, editable, and selectable. Cells may have relationships such as controls to address the application of functional relationships.
group
A group is a section of user interface objects which would not be included in a page summary or table of contents by an assistive technology. See region for sections of user interface objects that should be included in a page summary or table of contents.
heading
A heading for a section of the page.
img
An img is a container for a collection elements that form an image.
link
Interactive reference to a resource (note, that in XHTML 2.0 any element can have an href attribute and thus be a link)
list
Group of non-interactive list items. Lists contain children whose role is listitem.
listbox
A list box is a widget that allows the user to select one or more items from a list. Items within the list are static and may contain images. List boxes contain children whose role is option.
listitem
A single item in a list. Should be within an element with the role of list
log
A region where new information is added and old information may disappear such as chat logs, messaging, game log or an error log. In contrast to other regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.
main
This defines the main content of a document.
marquee
A marquee is used to scroll text across the page.
menu
Offers a list of choices to the user.
menubar
A menubar is a container of menu items. Each menu item may activate a new sub-menu. Navigation behavior should be similar to the typical menu bar graphical user interface.
menuitem
A link in a menu. This is an option in a group of choices contained in a menu.
menuitemcheckbox
Defines a menuitem which is checkable (tri-state).
menuitemradio
Indicates a menu item which is part of a group of menuitemradio roles.
navigation
This is a collection of links suitable for use when navigating the document or related documents.
note
The content is parenthetic or ancillary to the main content of the resource.
option
A selectable item in a list represented by a select.
presentation
An element whose role is presentational does not need to be mapped to the accessibility API.
progressbar
Used by applications for tasks that take a long time to execute, to show the execution progress.
radio
A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.
radiogroup
A group of radio controls.
region
Region is a large perceivable section on the web page.
row
A row of table cells.
rowheader
A table cell containing header information for a row.
search
This is the search section of a web document. This is typically a form used to submit search requests about the site or a more general Internet wide search service.
secondary
This is any unique section of the document. In the case of a portal, this may include but not be limited to: show times; current weather; or stocks to watch.
seealso
Indicates that the element contains content that is related to the main content of the page.
separator
A line or bar that separates and distinguishes sections of content.
slider
A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.
spinbutton
A form of Range that expects a user selecting from discrete choices.
status
This is a container for process advisory information to give feedback to the user.
tab
A header for a tabpanel.
tablist
A list of tabs, which are references to tabpanels.
tabpanel
Tabpanel is a container for the resources associated with a tab.
textbox
Inputs that allow 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 toolbar is a collection of commonly used functions represented in compact visual form.
tooltip
A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent.
tree
A form of a list having groups inside groups, where sub trees 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

Note: when i have time to populate a dB, i will add a little ajaxian explanation as to the possible parents and children of each role. In the meantime, please visit WAI-ARIA Roles.

ARIA states and properties

Whereas roles are a static attribute of elements, states are properties that can change with user and server interactions. Properties include both dynamic states that need to be updated, and static properties, such as “required”.

Values for the ARIA States

busy
Indicates whether a live region is finished updating.
checked
The checked state indicates something has been rendered as being chosen by the user in the sense that it is a binary or tertiary operation. An example is a checkbox.
disabled
Indicates that the widget is present, but the value cannot be set and it cannot be internally navigated.
expanded
Indicates whether an expandable/collapsible group of elements is currently expanded or collapsed.
grab
This property is set to show an object’s state in drag and drop.
hidden
Defines whether or not the object is visible to the user.
invalid
Indicates that the element’s value is currently invalid, which discourages the form from being submitted.
pressed
Used for buttons that are toggleable to indicate their current pressed state.
selected
Sets whether the user has selected an item or not.

Values for the ARIA Properties

activedescendant
An element which has focus may specify its current active child. This is used when a element is responsible for managing its current active child to reduce the overhead of having all children be focusable.
atomic
Atomic is an optional property of live regions. When the region is updated, the atomic property is used to indicate if the assistive technology should present all or part of the changed region to the user.
autocomplete
Indicates whether user input completion suggestions are provided.
channel
This property specifies which channel should be used to present the updates for its associated live region.
controls
Defines the elements that are controlled by the current element.
datatype
Datatype defines the format type of an element.
describedby
Points to an element which describes the object.
dropeffect
This property is set for the target of a drag and drop operation to show the effect when the dragged object is released.
flowto
Establishes the recommended reading order of content, overriding the general default to read in document order.
haspopup
Indicates that element may launch a pop-up window such as a context menu or submenu.
labelledby
Points to the element which labels the current element.
level
Level is the hierarchical level of an element within a structure.
live
Describes the types of updates the user agent, assistive technology, and user can expect from an alert or live region of Web content.
multiline
Indicates whether a text box accepts only a single line, or if it can accept multiline input.
multiselectable
Indicates that the user may select more than one item from the current list.
owns
Defines an object as a parent of another document element, when the child does not appear directly in the subtree of the owner.
posinset
Indicates an item’s number or position within the current level of a tree or list.
readonly
Indicates that the widget is not editable.
relevant
Indicates the relevant areas of change within a live region.
required
Indicates that user input is required on the control before a form may be submitted.
secret
Provides the user with the ability to supply information to the system in a manner that makes it difficult for someone else (who may be watching) to discern the value that is being supplied.
setsize
The setsize property refers to the number of items in the current level of a list or tree.
sort
The sort property is used to indicate if items in a table or grid are sorted in ascending or descending order.
tabindex
Indicates tab order of elements. Elements with negative values are able to receive focus but are not included in the basic tabbing navigation list or cycle.
templateid
The templateid is a unique identifier, represented as a URI, for which an assistive technology may customize its user interface.
valuemax
Maximum allowed value for a range type of widget.
valuemin
Minimum allowed value for a range type of widget.
valuenow
The current value of a widget

Certain properties belong with certain roles. For example, autocomplete makes sense with the roles combobox and textbox. The value of the property or state is also limited to certain value types. In our autocomplete example, the value would need to be selected from a list of predetermined values, whereas a checkbox could have a state of invalid, disabled, required or checked, to name a few, with a bolean as the value.

Working with ARIA in Rich Internet Applications

ARIA and Live Regions

Live regions are sections of a web page or application that change dynamically either thru automatic updates or user interaction.
There are 5 properties specific for Live Regions:

atomic
indicate if the assistive technology should present all or part of the changed region to the user.
busy
has the live region is finished updating
channel
live
relevant

Politeness levels: Should ARIA intrude on the user on updates?

The value of the “live” state are expressed in terms of “politeness” levels. “Polite” regions notify of updates but do not interrupt users, and updates take low priority. A level of “rude” would indicate that the assistive technology should interupt the users current action to provide update information. A good example of using a polite level would be the ticker on a financial page — the user does not need to be interupted every 10 seconds to be informed as to whether a stock value has change. An example of a time to use a “rude” level is when the user has completed a step in a checkout process and the next step is visible. Values: Off, Polite, Assertive, Rude.

Validating your XHTML when including un-speced attributes

There is a tweak that you need to make in your XHTML page if you include ARIA: you need to use XHTML 1.1 and include the ARIA module in your header area. XHTML 1.0 does not support modularization. The ARIA States and Properties attributes will be understood by user agents in XHTML 1.0 by declaring and using the appropriate namespace the same as for XHTML 1.1, but such documents will not validate to the XHTML 1.0 DTD. None of the DTD snippets below enable validation, but I will update when the modules and/or specifications are updated. The first doctype listed is the HTML5 doctype, which will fully support ARIA when the spec is approved.

<!DOCTYPE html>
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
    For Accessible Adaptable Applications//EN" "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<!DOCTYPE html PUBLIC "Accessible Adaptive Applications//EN"
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:aaa="http://www.w3.org/2005/07/aaa" lang="en">

Notes:

  • ARIA and HTML4: HTML 4.01 is non-extensible, so you can’t use namespaces for the property and state names. Please view the specs as they become available to see the HTML 4.01 support for ARIA.
  • ARIA and HTML5: Note that this post was originally written in 2008.  It is expected that ARIA will be fully supported as a module of the HTML5 specifications. HTML5 WHATWG ARIA spec

Leave a Reply