This page is out of date, please refer to ZK Component Reference for latest info.
Content last updated: 11 September 2007
Contents |
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: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
- Each element or widget has with full and correct semantics that completely describes its behavior (using element names or roles).
- The relationships between elements and groups are known.
- States, properties, and relationships are valid for each element's behavior and are accessible via the Document Object Model [DOM].
- Allow script author to move focus to allow all document elements in the body to receive focus with or without effecting the tab order.
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 pressZero, 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?
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
Table.1
Role
Definition
States and Properties
Corresponding ZK Components
Remarks and Description
A message with an alert or error information.
activedescendent
disabled
Global States
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.
A software unit executing a set of tasks for its users
Global States
Bread crumb navigation list.
Global States
¡@
Allows for user-triggered actions.
disabled
Global States
pressed
haspopup
Toolbarbutton
Since toolbatbutton is not toggle button, pressed won't be applied to toolbarbutton
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.
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
¡@
A table cell containing header information for a column.
disabled
selected=true|false
(noselected
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 is a presentation of a select, where you can type to locate a selected item.
disabled
readonly
expanded
activedescendent
Comobox
Bandbox
Descriptive content for a page element which references this element via describedby.
Global States
Label, Caption
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
A list of references to members of a single group.
Readonly
expanded
activedescendent
Global States
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
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"
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.
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"
An imggroup is a container for a collection elements that form an image.
expanded
activedescendent
Global States
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
Group of small items.
expanded
activedescendent
Global States
¡@
readonly
expanded
disabled
activedescendent
Global States
multiselectable
Listbox
For demo, see "Mozilla Accessible Listbox and ZK Accessible Listbox"
A single item in a list.
checked
disabled
posinset
setsize
Global States
listitem
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
Todo:
TO DELETE
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
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
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
Defines a menuitem which is checkable (tri-state).
readonly
selected
disabled
checked
posinset
setsize
Global States
Checkbox in Menuitem
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
A selectable item in a list represented by a select.
disabled
checked
posinset
setsize
Global States
Listitem
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
Used by applications for tasks that take a long time to execute, to show the execution progress.
valuenow
valuemin
valuemax
disabled
Global States
Progressmeter
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
A group of radio controls.
readonly
expanded
disabled
activedecendent
Global States
Radiogroup
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.
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"
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
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
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
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:59Supporting keyboard navigation
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
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
A table contains cells of tabular data arranged in rows and columns.
expanded
activedescendent
Global States
Grid, Listbox
A list of references to tabpanels of a tabcontainer.
readonly
expanded
activedescendent
Global States
Tabbox
Tabpanel is a container for the resources associated with a tab.
activedescendent
Global States
Tabpanel
A table cell containing data.
Global States
This is a multi-line editable text box. For use when no standard form element exists with this functionality.
readonly
disabled
Global States
InputElement
Free-form data entry for short on-line content.
readonly
disabled
Global States
InputElement
A table cell containing header information.
Global States
Column in GridA 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
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
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"
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 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
Table.2
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 ¡@ ZK Components Not Classified in Table 1.
Table.3
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 accessUsing 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
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.
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.
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:
- Improving ZK component accessibility by the incoming WCAG 2.0
- 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