ARIA: accessibly enhancing webpages and web applications

Release: 2009-11-17
Jump to Web Standards Articles TOC

Introduction

Accessible Rich Internet Applications (ARIA) is a web technology to allow screen readers and other Accessibility Technology Tools to assist at least blind, hard of seeing and Dyslexic users to more easily find information and use webpages and web applications on the Internet.

ARIA for web authors consists of a collection of attributes that can be used in a Document Object Model (DOM), HyperText Markup Language (HTML) and eXtensible Markup Language (XML) based documents such as HTML 5.

Web Browsers that support ARIA will understand the extra meaningful information and be able to pass that to Assistive Technology Tools such as Screen Readers.

Focusing on elements

To assist with AJAX and other Web Application element ordering and using the keyboard, keypad, touchpad to focus on each interactive element; you can use the tabindex attribute on all elements. A number value of 1 or higher provides priority: 1 being the highest. Generally the value would be zero providing the order according to where the element is in the document structure (after tabindex="1" and higher). With a value of -1 and lower disables the ability to tab to the element.

By default native links and form controls in webpages and web applications have the equivalent of tabindex="0". All others are tabindex="-1". But now you can set the tab support and even set ordering priority for those elements that usually did not and enables keyboard, keypad, touchpad interactive support to those elements and custom JavaScript based controls.

Roles

An element in a webpage or web application either has an obvious role or a more generic role. You can add a more specific or semantic (meaningful) role to an element by adding a role attribute to it.

The current types of roles, and so the values of the role attribute, are:

User Input Roles

checkbox: "A checkbox, accessible name required"
combobox: "A combobox, (sub roles: listbox), accessible name required"
listbox: "A listbox, (sub roles: option), accessible name required"
option: "An option, accessible name required"
radio: "A radio button, accessible name required"
radiogroup: "Radio group, (sub roles: radio), accessible name required"
slider: "A slider, accessible name required, child elements are presentational"
spinbutton: "A spinbutton, accessible name required"
textbox: "Text box, accessible name required"

User Interface Roles

button: "A button, accessible name required, child elements are presentational"
link: "A hyperlink, accessible name required"
menu: "A menu, (sub roels: menuitem, menuitemcheckbox, menuitemradio), accessible name required"
menubar: "A menu bar"
menuitem: "A menu item, accessible name required"
menuitemcheckbox: "A checkbox menu item, accessible name required"
menuitemradio: "A readio menu item, accessible name required"
tablist: "A tab group: lsit of tabs referring to tabpanels, (sub roles: tab)"
tabpanel: "A content container referenced by a tab, accessible name required"
tab: "A tab in a tabbed content group"
toolbar: "A toolbar"
tooltip: "Popup advisory information, accessible name required"
tree: "A tree group, (sub roles: treeitem), accessible name required"
treegrid: "An expandable grid (sub roles: row), accessible name required"
treeitem: "An item in a tree group, accessible name required"

Document Structure Roles

article: "An article or disscussion post"
columnheader: "A column header, accessible name required"
definition: "A definition of something"
directory: "A list of references such as a table of contents"
document: "A document or webpage instead of a web application, accessible name required"
grid: "Tabular Data, (sub roles: row), accessible name required"
gridcell: "A cell, accessible name required"
group: "A group"
heading: "A heading, accessible name required"
img: "A group of decorative images for a large decorative image, accessible name required, child elements are presentational"
list: "A list group, (sub roles: group, listitem)"
listitem: "A list item, accessible name required"
math: "Represents mathematical expressions, child elements are presentational"
note: "Related Notes"
presentation: "Decorative object: no semantics"
region: "A region that will be in a summary of features"
row: "A row, (sub roles: gridcell)"
rowheader: "A row header, accessible name required"
separator: "A separator, child elements are presentational"

Application Structure Roles

alert: "An alert message (live: assertive)"
alertdialog: "An alert dialog (live: assertive)"
dialog: "A dialog window, accessible name required"
log: "Container where old items may disappear, (live: polite), accessible name required"
marquee: "Quickly changeable information, (live)"
progressbar: "Progress status, accessible name required, child elements are presentational"
status: "Non alert messages, (live: polite)"
timer: "Temporal progress, accessible name required"

Landmark Roles

application: "A web application as opposed to a webpage or document, accessible name required"
banner: "Container that has the top-level heading or website heading"
complementary: "Supplementary information that does not need the main information"
contentinfo: "Metadata of the main document or page or application, etc"
main: "Main content"
navigation: "Navigational group"
search: "A search tool"

Global States and Properties

Any element, whether or not they have a role attribute, may use any of the global state or property attributes to provide certain information or reference certain information. These global states and properties are:

aria-atomic: "If a region is updated is all of the region announced or just the updated part."
Values: true, false (Default)
It is a property
aria-busy: "If a live region is finished updating"
Values: true, false (Default)
It is a state
aria-controls: "This element controls or effects one or more elements"
Values: ID Values
It is a property
aria-describedby: "References one or more elements providing the description for the current element"
Values: ID Values
It is a property
aria-disabled: "Indicates the element is disabled"
Values: true, false (Detault)
It is a state
aria-dropeffect: "Indicates what type of effect will take place when completing a drag-and-drop action"
Values: copy, move, reference, execute, popup, none (Detault)
It is a state
aria-flowto: "References the next element or elements to construct an accessible reading order"
Values: ID Values
It is a propety
aria-grabbed: "Indicate the element has been grabbed in a drag-and-drop action"
Values: true, false, undefined (Default)
It is a state
aria-haspopup: "Indicates the element has a context menu or sub-menu available"
Values: true, false (Default)
It is a property
aria-hidden: "Indicates the element is hidden"
Values: true, false (Default)
It is a state
aria-invalid: "Indicates the value of the element was incorrect"
Values: true, spelling, grammar, false (Default)
It is a state
aria-label: "If an element cannot be associated with a native accessible label then this can provide an accessible label"
Values: Plain Text
It is a property
aria-labelledby: "References one or more elements that will provide a label or caption for the current element"
Values: ID Values
It is a property
aria-live: "Indicates the element will be updated, live, and how important it is for the user to be prompted of this update"
Values: assertive, polite, off (Default)
It is a property
aria-owns: "If impossible for the DOM to convey this, indicates this element is a parent (directly or indirectly) of one or more elements referenced by the ID values"
Values: ID Values
It is a property
aria-relevant: "Indicates relevance to updates or changes within a region"
Values: all, additions text (Default), text, additions, removals
It is a property
aria-required: "Indicates a non empty user input value is required"
Values: true, false (Default)
It is a property (It should be a state)

Specific Role States and Properties

Other states and properties include:

aria-activedescendant: "Identifies one of the child elements that will provide focus for the current multiple component widget or control"
aria-level: "Provides the numeric level of the current element within the hierarchy"
aria-posinset: "Provides the numeric position of the current element in a list such as an item in a list or tree"
aria-setsize: "Provides the total numeric amount of items in a list such as total number of items in the current list or tree"
aria-sort: "Declares if items in a grid or tree are sorted"
aria-valuemax: "Maximum value of a range such as a slider, progress bar or spinbutton"
aria-valuemin: "Minimum value of a range such as a slider, progress bar or spinbutton"
aria-valuenow: "Current value of a range such as a slider, progress bar or spinbutton"
aria-valuetext: "Human readable version of the current value of a range such as a slider, progress bar or spinbutton"
aria-multiselectable: "States if the current multiple component element such as a selection box or menu can have more than one option selected"
aria-multiline: "Declares that a text box can have more than one line of text"
aria-autocomplete: "Declares if the user input control may automatically provide a list of complete value suggestions"
aria-expanded: "Declares that the current element is expanded or collapsed such as a tree or menu structure"
aria-pressed: "Declares if the button is pressed or not"
aria-readonly: "Declares if the control or its value cannot be edited"
aria-checked: "Declares if the control or menu item is ticked or not"

If the markup language has elements that natively provide semantic information you should use them. Such as in HTML or XHTML instead of using generic elements and using User Input Roles, use HTML or XHTML form controls as they will already have the general User Input Roles, States and Properties built in. For any other situation, you can use any of these Roles and their specific states and properties:

User Input Roles

checkbox

aria-checked
Values: true, false, mixed, undefined (Default)
It is a state

combobox

aria-expanded
Values: true, false, undefined (Default)
It is a state
aria-activedescendant
Values: ID Value
It is an optional property

listbox

aria-multiselectable
Values: true, false (Default)
It is an optional property
aria-expanded
Values: true, false, undefined (Default)
It is an optional state
aria-activedescendant
Values: ID Value
It is an optional property

option

aria-checked
Valeus: true, false, mixed, undefined (Default)
It is an optional state
aria-selected
Values: true, false, undefined (Default)
It is an optional state

radio

aria-checked
Values: true, false, mixed, undefined (Default)
It is a state
aria-selected
Values: true, false, undefined (Default)
It is an optional state

radiogroup

aria-expanded
Values: true, false, undefined (Default)
It is an optional state
aria-activedescendant
Values: ID Value
It is an optional property

slider

aria-valuemax
Values: Decimal Number
It is a property
aria-valuemin
Values: Decimal Number
It is a property
aria-valuenow
Values: Decimal Number
It is a property
aria-valuetext
Values: Text
It is an optional property

spinbutton

aria-valuemax
Values: Decimal Number
It is a property
aria-valuemin
Values: Decimal Number
It is a property
aria-valuenow
Values: Decimal Number
It is a property
aria-activedescendant
Values: IDvalue
It is an optional property
aria-valuetext
Values: Text
It is an optional property

textbox

aria-autocomplete
Values: inline, list, both, none (Default)
It is an optional property
aria-multiline
Values: true, false (Default)
It is an optional property
aria-readonly
Values: true, false (Default)
It is an optional property

User Interface Features

button

aria-pressed
Values: true, false, mixed, undefined (Default)
It is an optional state

link

(None.)

menu

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

menubar

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

menuitem

(None.)

menuitemcheckbox

aria-checked
Valeus: true, false, mixed, undefined (Default)
It is an state

menuitemradio

aria-checked
Valeus: true, false, mixed, undefined (Default)
It is an state
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state

tablist

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

tabpanel

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

tab

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state

toolbar

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

tooltip

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

tree

aria-multiselectable
Valeus: true, false (Default)
It is an optional property
aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

treegrid

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state
aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-multiselectable
Valeus: true, false (Default)
It is an optional property
aria-readonly
Valeus: true, false (Default)
It is an optional property

treeitem

aria-checked
Valeus: true, false, mixed, undefined (Default)
It is a state
aria-expanded
Valeus: true, false, undefined (Default)
It is anoptional state
aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-posinset
Valeus: Integer (Whole) Number
It is an optional property
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state
aria-setsize
Valeus: Integer (Whole) Number
It is an optional property

Document Structure

article

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

columnheader

aria-sort
Valeus: ascending, descending, none (Default), other
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state
aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-readonly
Valeus: true, false (Default)
It is an optional property
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state

definition

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

directory

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

document

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

grid

aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-multiselectable
Valeus: true, false (Default)
It is anoptional property
aria-readonly
Valeus: true, false (Default)
It is an optional property
aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

gridcell

aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-readonly
Valeus: true, false (Default)
It is an optional property
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

group

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

heading

aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

img

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

list

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

listitem

aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-posinset
Valeus: Integer (Whole) Number
It is an optional property
aria-setsize
Valeus: Integer (Whole) Number
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

math

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

note

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

presentation

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

region

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

row

aria-level
Valeus: Integer (Whole) Number
It is an optional property
aria-selected
Valeus: true, false, undefined (Default)
It is an optional state
aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

rowheader

aria-sort Valeus: ascending, descending, none (Default), other It is an optional property aria-level Valeus: Integer (Whole) Number It is an optional property aria-selected Valeus: true, false, undefined (Default) It is an optional state aria-expanded Valeus: true, false, undefined (Default) It is an optional state aria-readonly Valeus: true, false (Default) It is an optional property

separator

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

Application Structure

alert

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

alertdialog

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

dialog

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

log

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

marquee

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

progressbar

aria-valuemax
Valeus: Decimal Number
It is an optional property
aria-valuemin
Valeus: Decimal Number
It is an optional property
aria-valuenow
Valeus: Decimal Number
It is an optional property
aria-valuetext
Valeus: Plain Text
It is an optional property

status

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

timer

aria-activedescendant
Valeus: ID Value
It is an optional property
aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

Landmark Roles

application

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

banner

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

complementary

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

contentinfo

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

main

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

navigation

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

search

aria-expanded
Valeus: true, false, undefined (Default)
It is an optional state

More information about ARIA is available at the W3C Web Accessibility Initative's ARIA section.

Legend Scrolls

Main Website Navigation

ARIA: accessibly enhancing webpages and web applications

Introduction

Focusing on elements

Roles

Global States and Properties

Specific Role States and Properties

Web Standards Articles Table Of Contents

Free Office Suite and Web Browsers

SVG Examples

Website diagram example

Footer Links