ZK - Open Source Java Web Framework

This page is out of date, please refer to ZK Component Reference for latest info.

ZK ARIA ( Accessible Rich Internet Applications) Project Guideline

Content last updated: 11 September 2007

Contents Introduction Basic Supporting for Assistive Technologies Keyboard Accessible WAI-ARIA Roles,States and Properties Global States and Properties Case Study and Samples Case 1: Slider Build an accessible ZK Slider: Step-By-Step Case 2: Radio Future of ZK ARIA Future of the Working Plan and Guideline References

Introduction

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

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 technology support, such as screen reader requires 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 Spreadsheet 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 semantically 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 Guideline	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:

• atomic

• busy

• controls

• datatype

• describedby

• dropeffect

• flowto

• grab

• haspopup

• hidden

• invalid

• labelledby

• live

• owns

• relevant

• required

• tabindex

---

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 Guideline

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