This page is out of date, we cannot guarantee the accuracy of the content.

ZK ARIA ( Accessible Rich Internet Applications) Project Guideline

Content last updated: 11 September 2007

Contents

  1. Introduction
  2. Basic Supporting for Assistive Technologies
  3. Keyboard Accessible
  4. WAI-ARIA Roles,States and Properties
  5. Global States and Properties
  6. Case Study and Samples
  7. Future of ZK ARIA
  8. Future of the Working Plan and Guideline
  9. References

Introduction

ARIA as known as DHTML accessibiblity is a new coming standard which being devevloped at World Wide Web Consortium. ZK, a server side AJAX framework is based on DHTML. Therefore, ARIA will be the guidline for ZK to meet the accessibility criterias.

According ARIA - [States and Properties Module for Accessible Rich Internet Applications ] :

An application becomes accessible when:
  1. Each element or widget has with full and correct semantics that completely describes its behavior (using element names or roles).
  2. The relationships between elements and groups are known.
  3. States, properties, and relationships are valid for each element's behavior and are accessible via the Document Object Model [DOM].
  4. Allow script author to move focus to allow all document elements in the body to receive focus with or without effecting the tab order.
Using a role taxonomy such as such as that defined in Roles for Accessible Rich Internet Applications ensures requirement 1 & 2. Then, using the States and Properties Module for Accessible Rich Internet Application to ensure requirement 3,4


Basic Supporting for Assistive Technologies

Assistive techology support, such as screen reader requres a special markup content which uses namespaced attributes provided by WAI-ARIA to describe each dynamic ZK component. Each ZK component must use ARIA attributes to specify its role, an menu, slider or progressmeter. And, each role supports additional attributes to declare its properties and states such as checked, selected, and so on.
A radio may be implemented as:

	<span id="radio0" class="radio" tabindex="0" role="role:radio" setsize="4" posinset="1" onkeydown="return radioEvent(event);" 
	onclick="return radioEvent(event);" checked="true"> Dog </span>

Note: a complete sample is provided in Case Study and Samples section


Keyboard Accessible

To solve the focusing problem in XHTML 1.x A feature in Firefox and IE are corporated to define the tabindex for -1. This allows a script author to give an element focus without placing it in the tab order: The following table describes these changes which will be incorporated into the new Accessible Adaptive Application specification.

Accessible Adaptive Application Changes to Support Use of tabindex to give Element Focus

tabindex attribute Focusable with mouse or JavaScript via element.focus() Tab navigable
not present Follows default behavior of element (yes for form controls, links, etc.) Follows default behavior of element
Negative, e.g. tabindex="-1" Yes No, author must focus it with element.focus() as a result of arrow or other key press
Zero, e.g. tabindex="0" Yes In tab order relative to element's position in document
Positive, e.g. tabindex="33" Yes Tabindex value directly specifies where this element is positioned in the tab order. These elements will be positioned in the tab order before elements that have tabindex="0" or that are naturally included in the tab order (form elements and links)

Note: more detail information is available at 5.1.3 Provision of the keyboard or input focus "What object am I working on?


Roles, States and Properties

Here is a table delineating the WAI-ARIA roles and the corresponding ZK components

All the specific description of states are available at WAI-ARIA States

Role

Definition

States and Properties

Corresponding ZK Components

Remarks and Description

alert

A message with an alert or error information.

  • activedescendent

  • disabled

  • Global States


alertdialog

A separate window with an alert or error information.

  • activedescendent

  • disabled

  • Global States

MessageBox

Modal dialog

Fileupload

Filedownload

Unlike alert, alertdialog requires a response from the user such as to confirm that the user understands the alert being generated. It is expected that authors shall set focus to an active document element within the alertdialog such as a form edit field or an ok pushbutton.

application

A software unit executing a set of tasks for its users

  • Global States



breadcrumbs

Bread crumb navigation list.

  • Global States

¡@


button

Allows for user-triggered actions.

  • disabled

  • Global States

  • pressed

  • haspopup

Toolbarbutton

Since toolbatbutton is not toggle button, pressed won't be applied to  toolbarbutton

checkbox

A control that has two possible value states (an equivalent to a boolean).

  • readonly

  • selected

  • checked

  • disabled

  • posinset

  • setsize

  • required

  • invalid

  • Global States

Checkbox

Since Checkbox.isReadonly is deprecated, readlonly states is always "false".

When there is group of checkbox semantically, application developer should make sure the posinset and setsize are correct.

checkboxtristate

A control that has three possible values, (1 0 -1). Often found in installer where an option has been partially installed.

  • readonly

  • selected

  • checked

  • disabled

  • posinset

  • setsize

  • required

  • invalid

  • Global States

¡@


columnheader

A table cell containing header information for a column.

  • disabled

  • selected=true|false (no selected attribute indicates not selectable)

  • readonly

  • sort


Columns and its child

Column

listheader

When the table header is in separate table from content table. The th elements in header table should be applied wairole = "columnheader"

combobox

Combobox is a presentation of a select, where you can type to locate a selected item.

  • disabled

  • readonly

  • expanded

  • activedescendent

Comobox

Bandbox


description

Descriptive content for a page element which references this element via describedby.

  • Global States

Label, Caption


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.

  • Global States

Modal dialog

Fileupload

Filedownload

Messagebox


directory

A list of references to members of a single group.

  • Readonly

  • expanded

  • activedescendent

  • Global States





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, because screen readers use most of the keyboard navigation keys to provide its own keyboard user interface for this type of navigation.

  • Global States



grid

A grid is a table type that may be editable.

Required Child Elements: gridcell

  • readonly

  • multiselectable

  • disabled

  • activedescendent

  • Global States

Grid

For demo, see "Mozilla Accessible Spreedsheet and ZK Accessible Grid"

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.

  • readonly

  • disabled

  • Global States

Row

Using getChildAttrs method in Row component to assign "gridcell" role to its children component.

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.

  • expanded

  • activedescendent

  • Global States


All HTML elements, such as div, table, td, tr and etc are used to sematically group elements should be assigned as "group"

imggroup

An imggroup is a container for a collection elements that form an image.

  • expanded

  • activedescendent

  • Global States



link

Interactive reference to a resource (note, that in [XHTML] 2.0 any element can have an href attribute and thus be a link)

  • disabled

  • Global States



list

Group of small items.

  • expanded

  • activedescendent

  • Global States



listbox

¡@

  • readonly

  • expanded

  • disabled

  • activedescendent

  • Global States

  • multiselectable

Listbox

For demo, see "Mozilla Accessible Listbox and ZK Accessible Listbox"

listitem

A single item in a list.



  • checked

  • disabled

  • posinset

  • setsize

  • Global States

listitem


log

A region where new information is added and old information may disappear such as chat logs, messaging, game log or an error log.

  • Expanded

  • Global States

texbox


marquee

Todo:

TO DELETE



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.

  • readonly

  • disabled

  • expanded

  • activedecendent

  • Global States

Menubar, Menu, Menupopup


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.

  • readonly

  • disabled

  • expanded

  • activedecendent

  • Global States

Menubar, Menu, Menupopup


menuitem

A link in a menu. This is an option in a group of choices contained in a menu.

  • checked

  • disabled

  • posinset

  • setsize

  • Global States

Menupopup


menuitemcheckbox

Defines a menuitem which is checkable (tri-state).

  • readonly

  • selected

  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Checkbox in Menuitem


menuitemradio

Indicates that you have a menu item which is part of a group of menuitemradio roles.

  • readonly

  • selected

  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Radio, Radiogroup in Menupopup


option

A selectable item in a list represented by a select.



  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Listitem


presentation

An element whose role is presentational does not need to be mapped to the accessibility API.

  • Global States

Space, Separator 

An element whose 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

progressbar

Used by applications for tasks that take a long time to execute, to show the execution progress.

  • valuenow

  • valuemin

  • valuemax

  • disabled

  • Global States

Progressmeter


radio

A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.

  • readonly

  • selected

  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Radio


radiogroup

A group of radio controls.

  • readonly

  • expanded

  • disabled

  • activedecendent

  • Global States

Radiogroup


region

Region is a large perceivable section on your web page.

  • expanded

  • Global States

Box, Vbox, Hbox, Div, Groupbox

Since all child elements of Box, Vbox, Hbox, Div are shown, the group is neither expandable nor collapsible, the expaneded state is alway undefined.

rowheader

A table cell containing header information for a row.

  • sort

  • readonly

  • selected

  • Global States

See remarks

When first column of the grid is semantic. The td elements in table should be applied wairole = "rowheader"

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.

  • disabled

  • Global States



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.

  • disabled

  • Global States

Splitter, Menuseparator


slider

A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.

  • valuenow

  • valuemin

  • valuemax

  • disabled

  • Global States

Silder


spinbutton

A form of Range that expects a user selecting from discrete choices.

  • readonly

  • valuenow

  • valuemin

  • valuemax

  • disabled

  • Global States

Timebox

An additional property is applied "datatype" - aaa:datatype="xsd:time" About datatype and xsd see reference: XML Schema Part 2: Datatypes Second Edition

valuemin 00:00
valuemax 23:59

Supporting keyboard navigation

status

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.

  • disabled

  • Global States

Modal window


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.

Parent Element: tabpanel

  • disabled

  • Global States

Tab


table

A table contains cells of tabular data arranged in rows and columns.

  • expanded

  • activedescendent

  • Global States

Grid, Listbox


tablist

A list of references to tabpanels of a tabcontainer.

  • readonly

  • expanded

  • activedescendent

  • Global States

Tabbox


tabpanel

Tabpanel is a container for the resources associated with a tab.

  • activedescendent

  • Global States

Tabpanel


td

A table cell containing data.

  • Global States



textarea

This is a multi-line editable text box. For use when no standard form element exists with this functionality.

  • readonly

  • disabled

  • Global States

InputElement


textfield

Free-form data entry for short on-line content.

  • readonly

  • disabled

  • Global States

InputElement


th

A table cell containing header information.

  • Global States

Column in Grid

toolbar

A toolbar is a collection of commonly used functions represented in compact visual form.

  • Disabled

  • readonly

  • expanded

  • activedescendent

  • Global States

Caption with Toolbarbutton,Toolbar with Toolbarbutton


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.

  • Global States

Popup, menupopup


tree

A form of a list having groups inside groups, where sub trees can be collapsed and expanded.

  • disabled

  • readonly

  • expanded

  • activedescendent

  • Global States

Tree

For demo, see "Mozilla Accessible Tree and ZK Accessible Tree"

treeitem

An option item of a tree. This is an element within a tree that may be expanded or collapsed

  • expanded

  • level

  • selected

  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Treeitem, Treerow

Since ZK Treeitem is composed by Treerow and Treechildren in the UI side, Treeitem will hold the "treeitem" role and Treerow will display the role for Treeitem
Table.1

Removed Roles

According to Roles for Accessible Rich Internet Applications (WAI-ARIA Roles) W3C Working Draft 26 September 2006, the following roles were removed until structural roles are fully considered. Also, have not been put back to most recent guideline

Role

Definition

Corresponding ZK Components
buttonsubmit This form control initiates submission of all or part of the instance data to which it is bound ¡@
buttoncancel This button initiates closing a window or leaving a form (e.g. To another page) without submission ¡@
buttonundo This control brings a form to the initial state (e.g. returns all default values to all inputs) ¡@
buttonback Brings user-agent to the previous page or state ¡@
hidden A form control that is never displayed to the user, but is always submitted to the server with the form.

NOTE: In XForms, unless bound to form controls, instance data nodes are not presented to the user; consequently, there is no need for a form control corresponding to [HTML ] input type="hidden".

¡@
spreadsheet Interactive table where the user can enter the values ¡@
col Description of a table column. ¡@
mainmenu A menu containing the most important links on this page/document ¡@
submenu1 Main submenu ¡@
submenu2 Secondary submenu ¡@
submenutrivia Unimportant submenu ¡@
footer Small text at the end of a page - typically contains copyright and similar information Listfoot, Listfooter
footermenusite A menu found at the bottom of a page containing important site links. Typically includes a link to a "contact us" page and other important site's pages. ¡@
heading1 Level 1 heading ¡@
heading2 Level 2 heading ¡@
heading3 Level 3 heading ¡@
heading4 Level 4 heading ¡@
heading5 Level 5 heading ¡@
heading6 Level 6 heading ¡@
Table.2

ZK Components Not Classified in Table 1.

ZK Component

Related Guildline

Remarks and Description

Image, Flash, Audio

See Criteria (a) & (m).

See Criteria (a) & (m).

CAPTCHA About accessible CAPTCHA, please see http://www.standards-schmandards.com/2005/captcha/ ¡@ ¡@
Button Guideline 1: Support input and output device-independence
Checkpoint 1.1: Full keyboard access  
Using the standard keyboard or an assistive technology that emulates the keyboard, move focus to the "Test Button" and activate the button.

ZK Button can be activated by focus on it and press the enter key

Chart See Criteria (a)

IBM Human Ability and Accessibility Center provides a clear explanation and sample on charts and graphs. See Here

Table.3

Global States and Properties

Some states and properties are applicable to all roles, and most are applicable to all elements regardless of role. In addition to explicitly expressed supported states and properties, the following global states and properties are supported by roles as well. These include:


Case Study and Samples

Note: the following sample is used for demonstrating how WAI-ARIA roles, states, and properties are used to fill the interoperability gap. Not actual ZK component implementation.

Case 1: Silder

See live demo here Silder Demo from Illinois Center for Information Technology Accessibility

In this demo, divs are using to represent the silde, left/right button and knob.

slider

A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.

  • valuenow

  • valuemin

  • valuemax

  • disabled

  • Global States

Silder


¡@

According to the table above, the WAI-ARIA role for this dynamic content is "slider". And its corresponding WAI-ARIA states and properties are valuenow, valuemine,valuemax, and labelleldby

<p id="label_2" class="label">Slider Control 2</p>
<div class="axs slider tabindex-0 valuenow-100 valuemin-0 valuemax-200 labelledby-label_2" id="slider2" 
role="wairole:slider" tabindex="0" valuenow="100" valuemin="0" valuemax="200" labelledby="label_2">
	<div class="leftbutton" style="height: 19px; width: 19px;"/>
	<div class="slide">
		<div class="knob" style="height: 17px; width: 17px; position: relative; top: -1px; left: 150px;"/>
	</div>
	<div class="rightbutton" style="height: 19px; width: 19px;"/>
	<div class="value">100</div>
</div>

		

As the knob is dragged along the slid, valuenow is updating

Step by Step: Build an accessible ZK Slider

Refer to Building Accessible Applications with Roles
Step one: Look at your native mark up language

Guideline: 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.

Since the html element of each ZK component is chosen, this step is skipped


Step two: Finding the right roles

Guideline: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. Once a role attribute is set it should not be changed as this will confuse an assistive technology. This does not preclude a document element being removed which has the role attribute set. Only states and properties may be changed for a given document element.

The slider will allow users inputting where the user selects an input in a given range. The role "slider" is used

<table ...role="wairole:slider" ...>
		


Step three and four: Look for groups and build relationships

Guideline:
Step 3: Look for groups within a page, and mark them using the most appropriate role that best describes their usage.
Step 4: Look for relationships between groups and mark them using the most appropriate property or attribute..

A slider element will be the main container containing all other elements in the slider.There are leftbutton, rightbutton, slide, knob, and value subelements in slider. According to ARIA Roles, we consider the the main container is one element which role is "slider."

<table cellspacing="0" cellpadding="0" z.type="zul.sld.Sld"
 aaa:atomic="true" aaa:live="polite" aaa:valuemax="100" aaa:valuemin="0"
  aaa:valuenow="38" role="wairole:slider" z.pginc="10" z.maxpos="100"
   z.curpos="38" style="width: 100px;" id="z_0r_201">
<tbody><tr height="17">
 <td class="slider-bkl"/>
 <td class="slider-bk"><img title="38" src="/WAI/zkau/web/zul/img/slider/btn.gif" id="z_0r_201!btn" style="position: relative; left: 29px; z-index: 0;"/></td>
 <td class="slider-bkr"/>
</tr></tbody></table>
		
Step five: Use States and Properties

Guideline:

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

Following the table provided above:
Control the behavior of the element using states and properties

<table ...aaa:atomic="true" aaa:live="polite" aaa:valuemax="100" aaa:valuemin="0" aaa:valuenow="38" role="wairole:slider" ...>
		
And use events to device independent events with supporting JavaScript to handle user interaction.

Then create JavaScript support to control the event driven behavior of the application.

enable.setAttrNS(this.element, NS_STATE, "valuenow", pos);
	

Case 2: Radio Button Group

See live demo here Radio Demo from David Bolter's blog

In this demo, spans are using to represent the radio.

radio

A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.

  • readonly

  • selected

  • disabled

  • checked

  • posinset

  • setsize

  • Global States

Radio



According to the table above, the WAI-ARIA role for this dynamic content is "radio". And its corresponding WAI-ARIA states and properties are checked, posinset,setsize, and tabindex

<span id="radio0" class="radio" tabindex="0" role="role:radio" aaa:setsize="4" aaa:posinset="1" onkeydown="return radioEvent(event);" 
onclick="return radioEvent(event);" checked="true"> Dog </span>
<br/>
<span id="radio1" class="radio" tabindex="0" role="role:radio" aaa:setsize="4" aaa:posinset="2" onkeydown="return radioEvent(event);" 
onclick="return radioEvent(event);"> Cat </span>
<br/>
<span id="radio2" class="radio" tabindex="0" role="role:radio" aaa:setsize="4" aaa:posinset="3" onkeydown="return radioEvent(event);" 
onclick="return radioEvent(event);"> Owl </span>
<br/>
<span id="radio3" class="radio" tabindex="0" role="role:radio" aaa:setsize="4" aaa:posinset="4" onkeydown="return radioEvent(event);" 
onclick="return radioEvent(event);"> Fish </span>
<br/>

		

As one of radios in set is clicked, checked is updating


Future of ZK ARIA

Web Content Accessibility Guide 2.0 (WCAG 2.0) draft 1 is published by World Wide Web Consortium, Supporting this new standard into future is being planned into ZK releases. This work is dependent on getting a relatively stable standard from the W3C WAI group. Also, the more comprehensive and friendly support to accessibility is always taken seriously concerned  by ZK team.


Future of the Working Plan and Guidline

Additional roles, states and properties being plan to be added and more samples will be provided. This work is dependent on the WAI documents which are published by World Wide Web Consortium
Tasks:

  1. Improving ZK component accessibility by the incoming WCAG 2.0
  2. Making ZK component accessibility not "half product" - Improving ZK component accessibility by suggestion from application developers, application users, and etc.


References

Roles for Accessible Rich Internet Applications [ARIA-ROLE]
Roles for Accessible Rich Internet Applications
Roles for Accessible Rich Internet Applications W3C Working Draft 26 September 2006 [ARIA-ROLE]
http://www.w3.org/TR/2006/WD-aria-role-20060926/
States and Properties Module for Accessible Rich Internet Applications [ARIA-STATE]
States and Properties Module for Accessible Rich Internet Applications
The Rehabilitation Act Amendments (Section 508)
http://www.access-board.gov/sec508/guide/act.htm
Roadmap for Accessible Rich Internet Applications (WAI-ARIA Roadmap)
http://www.w3.org/TR/aria-roadmap/#new_provisions
Section 508 Standards, subpart B, section 1194.22
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web
Web Content Accessibility Guideline 1.0
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505
Embedding Accessibility Role and State Metadata in HTML Documents
http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20061212.html
Illinois Center for Information Technology Accessibility
http://test.cita.uiuc.edu/aria/
David Bolter's Blog
http://david.atrc.utoronto.ca/
XML Schema Part 2: Datatypes Second Edition
http://www.w3.org/TR/xmlschema-2/
Web Developer guidelines IBM Human Ability and Accessibility Center
http://www-03.ibm.com/able/guidelines/web/webgraphs.html