From W3C Wiki
< PF‎ | ARIA‎ | BestPractices
Jump to: navigation, search

This page contains links to resources containing test files, sample widgets, etc. Please add other known resources here. The plan is to expand this to index all known test cases, categorized.

Test case details

The following table details test cases. Columns:

  • Concept: ARIA concept Sample (widget, application, region layout, etc.)
  • ARIA Features: ARIA roles, states, properties being demonstrated for the concept
  • Description: Detailed description of the example
  • Reference: Link to sample
||||||||  TEST CASE DETAILS  ||
|| Concept || ARIA Features || Description || Reference ||
|| Widget || Widget || {Description} || Link ||
|| checkbox || Uses role="wairole:checkbox" and checked state || Accessible checkbox created without the input element. || XHTML version HTML version ||
|| slider || Uses role="wairole:slider" and ARIA states: valuenow, valuemax, valuemin || Accessible slider widget || Graphical XHTML slider Basic XHTML slider  ||
|| progress bar || Uses role="wairole:progressbar" and ARIA states: valuenow, valuemax, valuemin || This is an accessible XHTML progress bar || XHTML progress bar ||
|| alert || Uses role="wairole:alert" || This is an accessible alert created using a div. The visibility style is changed from "hidden" to "visible" to hide and show it. || XHTML alert HTML alert ||
|| tree || Uses role="wairole:tree", role="wairole:treeitem", role="wairole:group" to group subtrees, expanded state || 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. || XHTML tree HTML tree ||
|| tree controlling a region || role="secondary" and controls property || 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. || Simple HTML AJAX example of a tree widget controlling a region ||
|| button and description|| role="wairole:button"  role="wairole:description" and the describedby property|| 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 || XHTML button ||
|| grid, gridcell, and columheader || roles: wairole:grid, wairole:gridcell, wairole:columnheader; ARIA properties: readonly, selected, tabindex || 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. || XHTML spreadsheet ||
|| menu, menubar, menuitem || roles: wairole:menubar, wairole:menu, wairole:menuitem, ARIA properties: tabindex || 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. || XHTML menu||