Roles for Accessible Rich Internet Applications (WAI-ARIA Roles)

Accessibility is often dependent on Assistive Technology (AT), tools that provide alternate modes of access for people with disabilities by transforming complex user interfaces into an alternate presentation. This transformation requires information about the role, state, and other semantics of specific portions of a document to be able to transform them appropriately. Rich Web applications typically rely on hybrid technologies such as DHTML and AJAX that combine multiple technologies: SVG, HTML, CSS, and JavaScript for example. The various technologies provide much but not all of the information needed to support AT adequately. This specification provides a Web-standard way to identify roles in dynamic Web content. The result is an interoperable way to associate behaviors and structure with existing markup.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document is a Working Draft by the Protocols & Formats Working Group of the Web Accessibility Initiative. This version provides incremental new features described in the history of changes to WAI-ARIA Roles. Feedback on the model set out here is important to the success of the Web community in creating Rich Internet Applications with full and facile accessibility. The PFWG would like to know, in particular, if:

When addressing these questions, please consider them in the context of the companion documents mentioned above in the abstract. Comments on this document may be sent to public-pfwg-comments@w3.org (Archive).

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The disclosure obligations of the Participants of this group are described in the charter.

1 Introduction
1. 1.1 Example: Grid
2. 1.2 Terms and Definitions
3. 1.3 About This Draft
2 The RDF Roles Model
1. 2.1 Example: Tristate Checkbox
2. 2.2 Properties
3. 2.3 Relationships between concepts
4. 2.4 Roles
  1. 2.4.1 Base and Abstract Roles
  2. 2.4.2 Widget Roles
  3. 2.4.3 Structural Roles
3 Building Accessible Applications
1. 3.1 How To Build Applications Using Roles
2. 3.2 Example: Tree View
4 Conformance Requirements
1. 4.1 Document Conformance
2. 4.2 User Agent Conformance
5 Extending Roles
1. 5.1 How To Extend Roles
2. 5.2 When To Extend Roles
6 Appendices

1 Introduction

This section is informative.

Roles are a simple way for an author to make custom widgets (new interactive elements) accessible, usable and interoperable.

Complex user interfaces become inaccessible because adaptive technologies, that provide alternative access, are often left guessing at the semantics behind portions of a document (see the Roadmap for Accessible Rich Internet Applications [ARIA-ROADMAP]). Using this specification you can assign a role name to an object that maps the object to the accessibility framework on the native platform and provides semantics needed by adaptive technologies.

This role taxonomy currently includes interaction widget and structural document objects. The supporting taxonomy is encoded in Resource Description Framework (RDF) [RDF] and Web Ontology Language (OWL) [OWL]. The role taxonomy encodes inheritance information and details of what states and properties each role support. When possible, role information is mapped to platform accessibility API's.

Roles are element types and should not change with time or user actions. For assigning meaningful properties that change with time and events see States and Properties Module for Accessible Rich Internet Applications [ARIA-STATE].

1.1 Example: Grid

This section is informative.

In this example, a table has been assigned the role of a grid or spreadsheet.

<table id="table1" role="wairole:grid" >
...
</table>

Encapsulated in the role information is information for the platform accessibility infrastructure and/or accessibility tooling that enables it to be properly treated. (In this case that multiselectable is supported and cells may be editable.)

A full spreadsheet example is available online at http://www.mozilla.org/access/dhtml/spreadsheet

Roles can be embedded in any host language, e.g. XHTML 1.1 [XHTML]. In many case Roles will work well with other supporting technologies, such as States and Properties for Accessible Rich Internet Applications [ARIA-STATE] and XML Events [XML-EVENTS]

1.2 Terms and Definitions

This section is informative.

While some terms are defined in place, the following definitions are used throughout this document. Familiarity with W3C XHTML 1.1 Recommendation [XHTML] and the W3C XML 1.0 Recommendation [XML] is highly recommended.

Accessibility API: This is the accessibility API for a given platform. Examples of this are the Java Accessibility API [JAPI], Microsoft Active Accessibility [MSAA], Apple Accessibility for COCOA [AAC], and the Gnome Accessibility Toolkit (ATK) [GAP].

Functionality: processes and outcomes achievable through user action

User Agent: any software that retrieves and renders Web content for users; Example: Web browsers, media players, plug-ins, and other programs including assistive technologies that help retrieve and render Web content.

Assistive Technology (in the context of this document)

a user agent that:

Relies on services (such as retrieving Web content and parsing markup) provided by one or more other "host" user agents. Assistive technologies communicate data and messages with host user agents by using and monitoring APIs.
Provides services beyond those offered by the host user agents to meet the requirements of users with disabilities. Additional services include alternative renderings (e.g., as synthesized speech or magnified content), alternative input methods (e.g., voice), additional navigation or orientation mechanisms, and content transformations (e.g., to make tables more accessible).

Example: Examples of assistive technologies that are important in the context of this document include the following:

Screen magnifiers, which are used by people with visual disabilities to enlarge and change colors on the screen to improve the visual readability of rendered text and images;
Screen readers, which are used by people who are blind or have reading disabilities to read textual information through synthesized speech or braille displays;
Voice recognition software, which may be used by people who have some physical disabilities;
Alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard;
Alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations.

Note: This definition is based on WCAG Accessibility Guidelines 2.0.

1.3 About This Draft

This section is informative.

This draft currently handles two aspects of roles - GUI functionality and structural relationships of the element. For more information see the Roadmap for Accessible Rich Internet Applications [ARIA-ROADMAP] implementation examples for the use of roles making dynamically generated content accessible.

This taxonomy is designed in-part to support the common roles found in platform accessibility API (Accessible Programmable Interfaces) frameworks. Reference to roles found in this taxonomy by dynamic Web content may be used to support dynamic accessible content authoring, interoperability with assistive technologies.

The schema to support this standard has been designed to be extended so that custom roles can be created while providing a common schema for describing how to interact accessibly with a custom role. Note that much of this could be formalized in XML Schema [XSD]. However, being able to define similarities between roles, such as baseConcepts and more descriptive definitions would not be available in XSD.

At some point the working group intends to add roles for A, Adding concepts in the type of content for adaptation to the user scenario and B, Knowledge representation of Web content.

2 The RDF Roles Model

This section is normative.

This specification defines a Taxonomy called Roles. The Roles Taxonomy uses the XML Namespace [XMLNAMES] identifier

http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#

All examples are informative. Examples in this document that use the XML Namespace prefix "wairoles" all assume a valid xmlns declaration such as

xmlns:wairoles="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"

in the document involved.

The remainder of this section describes the class's instances and properties in this taxonomy, the semantics, and provides an RDF [RDF] Schema.

Editorial Note: We need to look at what changes need to be made to the namespaces as a result of the name change to ARIA.

2.1 Example: Tristate Checkbox

In this example a span has been used to create a tri-state checkbox (a checkbox control that has three possible states). A role is used to make the behavior of this simple widget known to the user agent. Properties that may change with user actions (such as checked) use States and Properties Module for Accessible Rich Internet Applications ([ARIA-STATE], Section 3.1.1.1).

   <html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
            xmlns:aaa="http://www.w3.org/2005/07/aaa" >

   <head>...</head>
   <body>
       ...
       <span class="checkboxtristate" id="chbox1" role="wairole:checkboxtristate"  aaa:checked="mixed"
       onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" tabindex="0" >
       A checkbox label
       </span>

       ...
   </body>
</html>

In this example the support schema will define a checkboxtristate as a type of checkbox (which itself is defined as a type of select). Although it inherits all the supported states of a select, we also expect it to support multiselect and checked set to mixed.

2.2 Role Properties

Roles are defined and described by their properties. Properties define the structural function of a role, such as: What a roles is, concepts behind it , what it can contain, what it must contain.

In the case of widgets this also includes how it interacts with the user agent based on mapping to HTML forms and XForms, allowed states and required states.

2.3 Relationships between concepts

The are three properties that describe the relationship between concepts. They are:

Type and subclasses - (from RDF Schema [RDFS]) this implies inheritance, which means, among other things, the inheritance of limitations and properties. Other than well known stable specifications, inheritance may be restricted to items defined inside this specification so that items can not be changed and affect inherited classes.

For example: Buttonundo is a subclass or type of a button. If we change the properties and expected behavior of a button then the properties and behavior of buttonundo will also change.
relatedConcept - A relatedConcept is a similar or related idea from other specifications. Concepts that are related are not necessarily identical. relatedConcepts do not inherit properties from each other. Hence if the definition of a type changes, the properties, behavior and definition of a relatedConcept is not affected.

For example: A grid is like a table. Therefore, a grid has a relatedConcept of a table as defined at http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE. However if the definition of table is modified our definition of a grid will not be affected.
baseConcept - A baseConcept is like a relatedConcept except that baseConcepts are almost identical. BaseConcept is similar to type, but without inheritance of limitations and properties. baseConcepts are designed as a substitute for inheritance for external concepts.

For example: the checkbox defined in this document has the same functionality and anticipated behavior as a checkbox defined in http://www.w3.org/MarkUp/HTML#checkbox.

Therefore, a checkbox has a baseConcept of a checkbox as defined at http://www.w3.org/MarkUp/HTML#checkbox. However, if http://www.w3.org/MarkUp/HTML#checkbox is modified, the definition of a checkbox in this document will not be not affected.

The Roles Taxonomy supports the following additional properties:

Additional Properties Supported by Role Taxonomy
Property	Description	Values
supportedState	a supportedState must be supported by this role. Typically refers to states from the aaa namespace	Any valid [RDF] object reference, such as a URI.
mustContain	A child element that must be contained by this role. For example a list must contain a listitem.	Any valid [RDF] object reference, such as a URI or [RDF] ID.
scope	Context, where this role is allowed. For example a list item is allowed inside a list.	Any valid [RDF] object reference, such as a URI or [RDF] ID.
media	The media type, where the Role is allowed - a type of scope	Any valid [RDF] object reference, such as a URI or [RDF] ID.
nameRef	Computational mechanism for determine the accessible name of the object to which the role applies. This may be computed from the children of the object or the title attribute.	Any valid [RDF] object reference, such as a URI or [RDF] Node ID. Recommended values: Child, title, content.

2.4 Roles

To support the current user scenario this specification defines roles that A, help define Widgets (For example, a tristate Checkbox) and B, help define page structure (for example, a section header).

Graph of the data model—Picture of the relationships described in the role data model (large)

2.4.1 Roles: Abstract and Base Classes

*Note: More base types will be added as the working group adds user cases

The following roles are used as base types for applied roles. They are not used by Web Authors and would not be exposed as role definitions for incorporation into a Web page. Base classes are referenced within the taxonomy and are used to build a picture of the role taxonomy class hierarchy within the taxonomy.

Base Roles
Role	Description	Inherited Category	Base and Related Concepts	Supported states and properties (beyond inherited states)	Inherited supported states and properties (Widgets only)	nameRef
roletype	Describes the structural and functional purpose of an element. A Role is also a concept.		[HTML] role [HTML] Link rel [HTML] Link rev DC:Type	describedby
widget	A component of a GUI (graphical user interface)	roletype		disabled datatype activedescendent labelledby tabindex	describedby
input	Generic type for widgets that can have a value	widget	[XFORMS] input	valuenow	datatype describedby disabled activedescendent labelledby tabindex	Title
textbox	Generic type for the inputs that allow free-form text as their value	input	[XFORMS] input	readonly (default set to false)	datatype describedby valuenow disabled activedescendent labelledby tabindex	Title
select	A form control that allows the user to make selections from a set of choices	input list (see structure)		multiselectable	datatype describedby valuenow disabled activedescendent labelledby tabindex	Title
range	Represents a range of values that can be set by the user.	input		valuemax valuemin	datatype describedby valuenow disabled activedescendent labelledby tabindex	Title
section	A logical part of a DeliveryUnit (page or a document)	roletype	document, [DTB], NIMAS, [HTML] link rel	posinset setsize owns hasparent flowto	datatype describedby	Child content or title attribute
sectionhead	A heading without level	roletype	[HTML]/[DTB]/NIMAS h2, h3...	hasparent sort level	datatype describedby	Child content or title attribute
application	A software unit executing a set of tasks for its users The intent is to hint to the assistive technology to switch its normal browsing mode functionality to one in which they would for an application. Use case: In an email application it has a document and an application in it. The author would want to use typical application navigation mode to cycle through the list of emails. Much of this navigation would be defined by the application author. However, when reading an email message the user may want to switch to a document mode where they control browsing navigation.	roletype	[DI-GLOSS]: Task/ deliveryunit	Name from title attribute
document	Content that contains related information, such as a book. The document role is used to tell the screen reader to use a document browsing mode. (Screen readers use most of the keyboard navigation keys to provide its own keyboard user interface for this type of navigation.) Documents must also have an labelledby attribute leading to one or more elements with non-empty text content. This text should be suitable for use as a navigation preview or table-of-contents entry for the page section in question. Exceptions: There may be a few exceptions where the host-language provides a useful label mechanism, such as: The root element in an HTML document may omit the labelledby attribute - if the title element has been used. Any group element in SVG may omit the labelledby attribute if it contains a non-empty title element.	roletype	subpageof [DI-GLOSS]: Task/ deliveryunit	Name from title attribute
window	Browser or application window	application		expanded	datatype describedby valuenow disabled activedescendent labelledby tabindex	Child content or title attribute

2.4.2 Widget Roles

Widget Roles all map to accessibility API's.

States and Properties of Widget Roles
Widget Role	Description	Inherited Concepts	Base and Related Concepts	New supported states (beyond inherited states)	Inherited states (other then describedby)	nameRef
link	Interactive reference to a resource (note, that in [XHTML] 2.0 any element can have an href attribute and thus be a link)	widget	[HTML] Link		datatype disabled activedescendent labelledby tabindex	Child content title
combobox	Combobox is a presentation of a select, where you can type to locate a selected item. NOTE: In [XFORMS] the same select can have one of 3 appearances: combo-box, drop-down box or group of radio-buttons. Besides, many browsers (if not all of them) allow users to type in a drop-down select as well.	select	[HTML] select		datatype valuenow disabled activedescendent labelledby tabindex hasparent flowto posinset setsize owns	Title
option	A selectable item in a list represented by a Select.	input listitem (see structure)	ListItem(see structure), [HTML] option, [XFORMS] item	selected	datatype valuenow disabled activedescendent labelledby tabindex hasparent flowto posinset setsize owns	Child content title
checkbox	A control that has two possible value states (an equivalent to a boolean).	checkboxtristate	[HTML] input (type : checkbox)	checked ="true"\|"false"	datatype valuenow disabled activedescendent labelledby tabindex selected hasparent flowto posinset setsize owns	Child content title
checkboxtristate	A control that has three possible values, (1 0 -1) Often found in installer where an option has been partially installed.	option		checked ="true"\|"false"\|"mixed"	datatype valuenow disabled activedescendent labelledby tabindex selected hasparent flowto posinset setsize owns	Child content title
radio	A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.	checkbox	[HTML] input (type : radio)		datatype valuenow disabled activedescendent labelledby tabindex selected checked="true"\|"false hasparent flowto posinset setsize owns	Child content title
radiogroup	A group of radio controls.	select			datatype valuenow disabled activedescendent labelledby tabindex selected multiselectable hasparent flowto posinset setsize owns	Title
button	Allows for user-triggered actions. Buttons are mostly used for discrete, atomic actions. Its value is cognitive; the idea that this is a user action opportunity is made very clear by making it look like a front-panel button on a device. The animation of the button in response to indirect (by mouse) manipulation fosters the illusion of direct manipulation and keeps user cognition in sync with the user interface perception of user action events. Standardizing the appearance of buttons enhances recognition as buttons and arraying them compactly in toolbars, for example.	widget link	[XFORMS] trigger		datatype disabled activedescendent labelledby tabindex	Child content title
menuitemradio	Indicates that you have a menu item which is part of a group of menuitemradio roles. Checking of one menuitemradio in a group will unchecked the other group members. Menuitems should also be separated into a group by a separator.	menuitem (see structure) radio			datatype valuenow disabled activedescendent labelledby tabindex posinset setsize owns hasparent flowto selected checked="true"\|"false"	Child content title
menuitemcheckbox	Defines a menuitem which is checkable (tri-state).	menuitem checkbox			datatype valuenow disabled activedescendent labelledby posinset setsize owns tabindex hasparent flowto selected checked= "true"\|"false"	Child content title
progressbar	Used by applications for tasks that take a long time to execute, to show the execution progress. This lets the user know that the user's action request has been accepted and that the application continues (or ceases, in the case of a static display) to make progress toward completing the requested action.	widget			datatype disabled activedescendent labelledby tabindex	Title
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. Disadvantage: Passwords have to be typed blind without the usual echo to the screen. Web users get used to having their input echoed, type badly, and in particular not having people able to confirm what is entered runs risk such as having account locked if three non-accepted tries happen in some time window. Disadvantage: Policy not to display is usually taken to be absolute; whereas a user with screen blank and earphone in use can get the typing echoed privately not subject to having a lurker purloin the password.	input	[HTML] input (type : password)		datatype valuenow disabled activedescendent labelledby tabindex	Title
separator	A line or bar that separates and distinguishes sections of content. This is a visual separator between sections of content. Separators are found between lists of menu items in a menu.	widget	[HTML] hr		datatype disabled activedescendent labelledby tabindex	Title
slider	A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface. A slider has the added functionality of being able to select a value through the use of a visible slider. The slider would be keyboard accessible and provide a visible thumb position that represents the current position within the slider.	range			datatype valuenow disabled activedescendent labelledby tabindex valuemax valuemin	Title
spinbutton	A form of Range that expects a user selecting from discreet choices. A spinbutton allows the user to select from the given range through the use of an up and down button. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. This functionality should be accomplished programmatically through the use of up and down arrows on the keyboard.	range			datatype valuenow disabled activedescendent labelledby tabindex valuemax valuemin	Title
textarea	This is a multi-line editable text box. For use when no standard form element exists with this functionality. Intended use is in languages that do not have a textarea object (such as SVG). The user would use this role when additional states or properties are applied to a standard textarea control. This is to indicate to the user agent that it must process additional states and properties such as invalid and required.	textbox	[HTML] textarea		datatype valuenow disabled activedescendent labelledby tabindex readonly	Title
textfield	Free-form data entry for short on-line content. Intended use is in languages that do not have a textfield object (such as SVG). The user would use this role when additional states or properties are applied to a standard textarea control. Textfield is used to indicate to the user agent that it must process additional states and properties such as invalid and required.	textbox	[HTML] input (type : text)		datatype valuenow disabled activedescendent labelledby tabindex readonly	Child content title
tree	A form of a Select (or, generally, of a list having groups inside groups) - where sub trees can be collapsed and expanded	select		expanded	datatype disabled activedescendent labelledby tabindex multiselectable hasparent flowto posinset setsize owns	Child content title
treegroup	This is a group of sibling treeitems that have a common parent. The intended use is for creating groups of treeitems within a tree container.	group		expanded	datatype disabled activedescendent labelledby tabindex hasparent flowto multiselectable posinset setsize owns	Child content title
treeitem	An option item of a tree. This is an element within a tree may also be expanded or collapsed	option		checked	datatype disabled activedescendent labelledby tabindex selected posinset setsize owns level	Content child title
status	Process--advisory information. This is a container for process advisory information to give feedback to the user. It must have a subtree. This object typically does not receive focus. Some cells of a Braille display may be reserved to render the status.	widget			datatype disabled activedescendent labelledby tabindex
alert	A message with an alert or error information. Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing impaired user. The Alert role goes on the container of the document subtree containing the alert message.	status	[XFORMS] alert	live	datatype disabled activedescendent labelledby tabindex	Title
alertdialog	A window with an alert or error information. Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing impaired user. The Alert role goes on the container of the subtree containing the alert message.	alert dialog	[XFORMS] alert		datatype disabled activedescendent labelledby tabindex haspopup live	Title
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. Dialog boxes should have a title. They must have a focused item.	window			datatype disabled activedescendent labelledby tabindex haspopup	Title

2.4.3 Structural Roles

Roles for document structure are also required to support the accessibility of dynamic Web content to assist adaptive technology in determining active content vs. static document content. Structural Roles, by themselves do not all map to accessibility API's, but are used to create widget roles or assist content adaptation.

This schema is likely to evolve as new use cases are added to the scope of this specification.

Properties of Structural Roles
Roles	Description	Inherited Category	Base and Related Concepts	nameRef or Not Mapped to Accessibility API's	Supported states (all support describedby)	scope and mustcontain
presentation	An element who's role is Presentational does not need to be mapped to the accessibility API. Intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type. Example use cases: A layout table is a presentation. An object tag whose content is decorative like a white space image or decorative flash object An image used for white space The user agent may remove all structural aspects of the element being repurposed. For example, a table marked as presentation would remove the table, td, th, tr, etc. elements while preserving the individual text elements within it. Because the user agent knows to ignore the structural aspects implied in a table, no harm is done by using a table for layout.	roletype	[DI-GLOSS]: Task	Not Mapped
group	A group is a collection of sections or user interface objects that should be presented to the user in a coherent fashion. Group members that are outside the [DOM] subtree of the group would need to have explicit relationships assigned to participate in the group. Groups may be nested.	section	DC: Collection, Dataset	Name from title attribute	hasparent flowto posinset setsize owns	mustContain sections
imggroup	An imggroup is a container for a collection elements that form an image. An imggroup can contain captions, descriptive text as well as multiple image files that when viewed together give the impression of a single image.	group	DAISY , [DTB] imggroup	Name from title attribute	hasparent flowto posinset setsize owns	mustContain sections
directory	A list of references to members of a single group.	list	DAISY [DTB]:TOC	Name from child content or title attribute	hasparent flowto posinset setsize owns
region	A group of elements that together form a perceivable unit, that the author feels should be included in a summary of page features. A region must have a title. A region does not necessarily follow the logical structure of the content, but follows the perceivable structure of the page. [XHTML] standard document roles would be considered regions. Each region must have a title.	section	[HTML] Frame device independence glossary: perceivable unit. related concept: section	Name from title attribute	live atomic relevant expanded labelledby hasparent flowto controls
log	A region where new information is added and old information may disappear such as; chat logs, messaging, game log or an error log.	region		Name from title attribute	live atomic relevant expanded labelledby controls hasparent flowto
grid	A grid is a table type that may be editable. Grids contain cells that may be focusable. Grids allow the user to move focus between grid cells with 2-D navigation. Grids may have row and column headers which also have functional value based on the implementation. Grid cells may have values determined by an equation. Grids are single selectable or multiselectable. Properties for selectable or multiselectable must be provided by the author. Grids may be used for spreadsheets such as in Open Office, Microsoft Office, etc.	widget	[HTML] table	Name from title attribute	datatype multiselectable hasparent flowto disabled labelledby controls posinset setsize owns tabindex activedescendent	mustcontain: gridcells
gridcell	A cell in a grid. Cells may have relationships such as controls to address the application of functional relationships.	section textarea	[HTML] td	Name from child content or title attribute	datatype hasparent flowto disabled readonly labelledby controls valuenow activedescendent tabindex posinset setsize owns
tabcontainer	A tabcontainer is a container for tabs, a tablist, and tabpanels that belong together. Tabpanels are commonly used in applications that have a large number of options that can be categorized in logical groups. Each tab in a tablist serves as both a menu item and as a title for the tab content associated with the tab. In graphical renderings the selected tab and tabpanels usually share the same background color and the non-selected tabs have a different background color to make the selected tab and tabpanel stand out visually. This also provides a visual association with the tab and tabcontent. Only one tabpanel's contents is visible at a time.	group		Name from title attribute	hasparent flowto posinset setsize owns
tab	A tab is a tabpanel header. Tab is used as a grouping label, providing a link for selecting the tabcontent to be rendered to the user. The currently selected tab should be marked with selected=true. Tablist is the container role for a set of elements with the role attribute set to tab. Only one tab may be selected at a time. At any time, one tab must be selected. One of the tabs in tablist must be the current tab. The tabpanel associated with the current tab, must be rendered to the user. Other tabpanels are typically hidden from the user until the user selects the tab associated with that tabpanel.	sectionhead		Name from child content or title attribute	hasparent selected sort level	scope: tabPanel
tabpanel	Tabpanel is a container for the resources associated with a tab. Note: There must be a means to associate a content container element with its associated tab in a tablist.	region		Name from title attribute	live atomic relevant expanded labelledby hasparent flowto controls posinset setsize owns
tablist	A list of references to tabpanels of a tabcontainer.	directory	DAISY [DTB]:TOC	Name from child content or title attribute	hasparent flowto posinset setsize owns
table	A table contains cells of tabular data arranged in rows and columns. This does not imply presentation.The table role is used as a container for tabular data. The table construct describes relationships between data such that it may be used for different presentations. For example, the role of a table could be added to a pie chart. It is structural equivalent to an [XHTML] table. In [XHTML], the author should use the table element.	group	[HTML] table	Name from title attribute	hasparent flowto posinset setsize owns
td	A table cell containing data.	section	[HTML] td	Name from child content or title attribute	hasparent flowto posinset setsize owns
th	A table cell containing header information.	sectionhead td	[HTML] th	Name from child content or title attribute	hasparent flowto posinset setsize owns sort level
rowheader	A table cell containing header information for a row. Rowheader can be used as a row header in a table or grid. It also could be used in a pie chart to show a similar relationship in the data. The rowheader establishes a relationship between it and all cells in the corresponding row. It is a structural equivalent to an [HTML] th element with a row scope.	th	[HTML] th with scope= row	Name from child content or title attribute	hasparent flowto posinset setsize owns sort level
columnheader	A table cell containing header information for a column. Columnheader can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar relationship in the data. The columnheader establishes a relationship between it and all cells in the corresponding row. It is a structural equivalent to an [HTML] th element with a column scope.	th	[HTML] th with scope= column	Name from child content or title attribute	hasparent flowto posinset setsize owns sort level
list	Group of small items	group	[HTML] list	Name from title attribute	hasparent flowto posinset setsize owns
listitem	A single item in a list.	section	[XFORMS] item [HTML] li	Name from child content or title attribute	hasparent flowto posinset setsize owns
menu	Offers a list of choices to the user.A menu is often a list of links to important sections of a Document or a Site.	widget list	navigation in [HTML] roles see http://www.w3.org/ TR/2005/WD-xhtml2-20050527 /mod-role.html#col_Role [XFORMS] select	Name from title attribute	hasparent flowto posinset setsize owns	mustcontain: menuitems
toolbar	A toolbar is a collection of commonly used functions represented in compact visual form. The toolbar is often a subset of functions found in a menubar designed to reduced user effort in using these functions. If this is not keyboard accessible the actions defined in the toolbar must be reproduced in an accessible, device independent fashion.	menu	menubar	Name from title attribute	hasparent flowto posinset setsize owns
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. Menubar is used to create a menubar similar to those found in Windows, the Mac, and Gnome desktops. A menubar is used to create a consistent climate of frequently used commands.	menu	toolbar	Name from title attribute	hasparent flowto posinset setsize owns
menuitem	A link in a menu. This is an option in a group of choices contained in a menu. It may be disabled or active. It may also have a popup.	listitem	[XFORMS] option	Name from child content or title attribute	haspopup hasparent flowto posinset setsize owns
breadcrumbs	Bread crumb navigation list. Each element in the list is a representation of the navigational hierarchy, represented linearly. The logical order of the text begins with the root element.	menu		Name from child content or title attribute	hasparent flowto posinset setsize owns	scope: links

3 Building Accessible Applications

This section is informative.

An application becomes accessible when:

Each element or widget is marked with full and corrected semantics that fully describes it's behavior (using element names or roles).
The relationships between elements and groups are known
States, properties, and relationships are valid for each elements behavior and are accessible via the Document Object Model or [DOM].
There is an element having the correct input focus.

Roles make the different elements in the application semantically rich. User agents use the role semantics to understand how to handle each element. Roles can be used to build accessible applications by providing any missing information that the assistive technology needs to anticipate the behavior of the elements inside the application.

For example, to support accessibility the browser may create accessible objects of a Web page through the Accessibility API of the operating system. When the full semantics are provided and understood by the browser, the application will properly map the page to accessible objects of the operating system.

3.1 How To Build Applications Using Roles

This section is informative.

3.1.1 Step 1: Use your native mark up as well as you can

Use the semantic elements that are defined in the native markup language. For example, if you are using XHTML it is better to use the checkbox than to use a div element with role checkbox. Because properly used content is already repurposable, roles are best used when the mark up language does not support all the semantics that you need. When a role is used the semantics and behavior of the element are overridden by the role behavior.

3.1.2 Step 2: Find the right roles

Set roles to make sure elements behave predictably and correctly describe the behavior of each element within your application (unless elements behaviors are fully described by the native markup language). Roles for interactive elements should support all the states that the element could use.

3.1.3 Step 3: Look for groups

Look for groups within a page, and mark them using the most appropriate role that best describes their usage.

For example: a region of the page that contains a group of elements that are likely to change through an AJAX application could be tagged as a "region".

3.1.4 Step 4: Build relationships

Look for relationships between groups and mark them using the most appropriate property or attribute.

Sometimes the relationships can be made clear via the native mark up language, such as the label tag in HTML.

Sometimes this can be implied via the DOM. For example, when a well marked up list contains list items it is known that they belong to the containing list. In such cases you do not need to set additional properties to make that explicit.

In other cases use the States and Properties Module for Accessible Rich Internet Applications to state relationships. For example: If container A contains search results, and container B contains the search controls, then mark each container as a region and set the aaa: property in region B to reference region A.

3.1.5 Step 5: Set properties

Set properties until the behavior of the element is defined.
Control the behavior of the element using device independent events, states, and properties.

Extra states and properties have been provided by the States and Properties Module for Accessible Rich Internet Applications [ARIA-STATE].

Roles for Accessible Rich Internet Applications (WAI-ARIA Roles)

An RDF Role Taxonomy with Qname Support for Accessible Adaptable XML Applications

W3C Working Draft 20 December 2006

Abstract

Status of This Document

Table of Contents

1 Introduction

1.1 Example: Grid

1.2 Terms and Definitions

1.3 About This Draft

2 The RDF Roles Model

2.1 Example: Tristate Checkbox

2.2 Role Properties

2.3 Relationships between concepts

2.4 Roles

2.4.1 Roles: Abstract and Base Classes

2.4.2 Widget Roles

2.4.3 Structural Roles

3 Building Accessible Applications

3.1 How To Build Applications Using Roles

3.1.1 Step 1: Use your native mark up as well as you can

3.1.2 Step 2: Find the right roles

3.1.3 Step 3: Look for groups

3.1.4 Step 4: Build relationships

3.1.5 Step 5: Set properties