ARIATestTests

From html4all

ARIA Test Case Tests

This page reflects the contents of the Tests Test Case Details appendix to the WAI ARIA Best Practices document. Like the Best Practices Test details page, this page contains links to resources containing test files, sample widgets, predicted results and actual testing data. Information about individual testers and the configurations used to test these test documents is also available.

Note: This page is collaboratively maintained. Please use the provided ARIATestTemplate to log your test results in a page with a unique identifier so as not to over-write the generic test template. The Reference naming convention used in this document is as follows:

for References hosted by AOL: AOLx (where x is the reference number)
for References hosted by the Dojo Toolkit team: Dx (where x is the reference number)
for References hosted on the Mozilla Foundation's site: Mx (where x is the reference number)
for References hosted by the University of Illinois, Urbana-Champagne: Ux (where x is the reference number)
for References hosted by CLCWorld's Accessible AJAX Tests: AAx (where x is the reference number)

[edit]

Test Case Test Result Matrix

The following definition list details test cases.

Concept: ARIA concept (for example, widget, application, region, layout, etc.): ARIA Features: WAI ARIA Roles, States and Properties being demonstrated for the concept; Description: Detailed description of the example; Reference: Link to example; Test Results: Link to test results for each linked example

[edit]

Test Results in Context

Concept: checkbox

ARIA Features: Uses role="wairole:checkbox" and checked state

Description: Accessible checkbox created without the input element.

Reference M1: XHTML checkbox example

Reference M2: HTML checkbox example

Reference U1a: UIUC Checkbox Example 1 - HTML Version

Reference U1b: UIUC Checkbox Example 1 - XHTML Version

Reference U2a: UIUC Checkbox Example 2 - HTML Version

Reference U2b: UIUC Checkbox Example 2 - XHTML version

Reference U3a: UIUC Checkbox Example 3 - HTML Version

Reference U3b: UIUC Checkbox Example 3 - XHTML Version

Reference U4a: UIUC Checkbox Example 4 - HTML Version

Reference U4b: UIUC Checkbox Example 4 - XHTML Version

Reference U4c: UIUC Checkbox Example 4 - HTML Version

Test Results:

Concept: Radio Button and Radiogroup Roles

ARIA Features: properties: active descendant; roles="composite" roles="group"

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

Reference U5a: Radio Role Example 1: Uses CSS to display radio buttons

Reference U5b: Radio Role Example 2: Uses inline images to display radio buttons

Reference U5c: Radio Role Example 3: Uses ARIA's activedescendant property

Concept: Textfield Role

ARIA Features: States and Properties: labelledby; describedby <dd>Description: Inputs that allow free-form text as their value. If the multiline property is true, the control accepts line breaks within the input, as in an HTML textarea. Otherwise this is a simple text box.

no test currently available

Concept: Tooltip Role

ARIA Features: Roles: "wairole:tooltip" "wairole:textbox"; States and Properties: "invalid", describedby, and "labelledby" <dd>Description: A tooltip is a popup that displays a description for an element when a user passes over or rests on that element and supplements the normal tooltip processing of the user agent. Objects with this role must be referenced through the use of a describedby. If the tooltip has active elements it must be keyboard navigable.

Reference U7a: UIUC Tooltip Example 1 - XHTML version

Reference U7b: UIUC Tooltip Example 1 - HTML version

Reference U8a: UIUC Tooltip Example 2 - XHTML version

Reference U8b: UIUC Tooltip Example 2 - HTML version

Concept: slider

ARIA Features: Uses role="wairole:slider" and ARIA states: valuenow, valuemax, valuemin

Description: Accessible slider widget

Reference M3: Graphical XHTML slider

Reference M4: Basic XHTML slider

Example 1&ginc=includes/slider1_inline.inc&gcss=css/slider1.css&gjs=../js/globals.js,../js/widgets_inline.js,js/slider1_inline.js Reference U9: UIUC Slider Example 1 - HTML version

Example 1&ginc=includes/slider1_class.inc&gcss=css/slider1.css&gjs=../js/globals.js,../js/widgets_class.js,js/slider1_class.js Reference U9a: UIUC Slider Example 1 - HTML with inline ARIA

Reference U10a: UIUC Slider Example 2 - HTML with dynamically added ARIA

Reference U10b: UIUC Slider Example 2 - HTML with inline ARIA

Reference U11a: UIUC Slider Example 2 - HTML with dynamically added ARIA

Test Results:

Concept: progress bar

ARIA Features: Uses role="wairole:progressbar" and ARIA states: valuenow, valuemax, valuemin

Description: This is an accessible XHTML progress bar

Reference M5: XHTML progress bar

Test Results:

Concept: alert

ARIA Features: Uses role="wairole:alert"

Description: This is an accessible alert created using a div. The visibility style is changed from "hidden" to "visible" to hide and show it.

Reference M6: XHTML alert

Reference M7: HTML alert

Reference U12: Alert Role Reference Implementation

Test Results:

Concept: tree

ARIA Features: Uses role="wairole:tree", role="wairole:treeitem", role="wairole:group" to group subtrees, expanded state

Description: This is an example of a tree widget role. Each item in the tree has a role of "wairole:treeitem" and subtrees are grouped using the "wairole:group" role. The expanded state is set on tree items to indicate if its subtree is expanded. This example relies on the static DOM structure to allow the user agent to convey "level" semantics to the assistive technology.

Reference M8: XHTML tree

Reference M9: HTML tree

Reference U13a: UIUC Tree Example 1: HTML with inline ARIA

Reference U13b: UIUC Tree Example 1: HTML with dynamically generated ARIA

Test Results:

Concept: tree controlling a region

ARIA Features: role="secondary" and controls property

Description: Uses a tree widget that uses AJAX to acquire a picture and render it in a region. The widget, having a role of tree, controls the "secondary" region. Select assistive technologies should allow the user to follow the controls property.

Reference D10: Simple HTML AJAX example of a tree widget controlling a region

Reference D14: Complex Tree Widget constructed with Dojo

Test Results:

Reference D10 tested with JAWS 8.00.2173/Minefield 3.0a9pre (2007-11-06 build)

Concept: button and description

ARIA Features: role="wairole:button" role="wairole:description" and the describedby property

Description: Provides an accessible pushbutton without using an input element. This examples sets up two description areas and uses describedby to associate the button and the fieldset with the description areas. Pushing the button uses javascript to launch an alert

Reference M11: XHTML button example

Reference U14a: XHTML Button Example 1

Reference U14b: HTML Button Example 1

Test Results:

Reference M11 tested with JAWS 8.00.2173/Minefield 3.0a9pre (2007-11-02:12 build)

Concept: grid, gridcell, and columheader

ARIA Features: roles: wairole:grid, wairole:gridcell, wairole:columnheader; ARIA properties: readonly, selected, tabindex

Description: Provides an accessible spreadsheet, using the grid role, which you can tab to the grid. Arrow keys are then used to navigate the gridcells within the grid.

Reference M12: XHTML spreadsheet example

Reference U15a: HTML version with inline ARIA markup

Reference U15b: HTML that dynamically adds ARIA markup from "class" attribute

Reference U16a: HTML with inline ARIA markup

Reference U16b: HTML with ARIA markup dynamically added

Test Results:

Concept: menu, menubar, menuitem

ARIA Features: roles: wairole:menubar, wairole:menu, wairole:menuitem, ARIA properties: tabindex

Description: Provides an accessible horizontal menu and uses the DOM hierarchy to provide the menu structure to the assistive technology. This example uses tabindex to manage focus within the menu.

Reference M13: XHTML menu

Reference U17a: HTML with inline ARIA

Reference U17b: HTML with ARIA dynamically added

Test Results:

Concepts: tabpanel