List of WAI ARIA Examples and resources
Open Ajax
AOL/PG/AEGIS
Yahoo
GOC WET
Blogs
- http://yaccessibilityblog.com/library/dynamic-form-labels-aria.html
- http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/
- http://www.html5accessibility.com/tests/figures-nested.html
- http://zufelt.ca/blog/are-you-confused-html5-and-wai-aria-yet
OpenAjax Examples
| # | Description | Success Criteria | WCAG conforms | Accessible Name | ARIA | ARIA Styling |
||||
|---|---|---|---|---|---|---|---|---|---|---|
| child nodes | aria-labelledby | label | Roles | Properties | States | |||||
| 1 | Alert role example using an ARIA alert box | no | Yes | Yes |
|
|
|
no | ||
| 2 | Alert example using a modal ARIA dialog box | no | Yes | Yes |
|
|
|
no | ||
| 3 | Button role example using text-only buttons | no | Yes | no |
|
|
|
Yes | ||
| 4 | Button role example using image buttons | no | Yes | no |
|
|
|
no | ||
| 5 | Checkboxes using IMG elements for visual state | Yes | no | no |
|
|
|
no | ||
| 6 | Checkbox group using IMG elements for visual state | Yes | no | no |
|
|
|
no | ||
| 7 | Checkbox group using background images for visual state | Yes | no | no |
|
|
|
no | ||
| 8 | Checkbox group using ARIA CSS selectors for visual state | Yes | no | no |
|
|
|
Yes | ||
| 9 | Combobox with aria-autocomplete="none" | Yes | Yes | Yes |
|
|
|
no | ||
| 10 | Combobox with aria-autocomplete="inline" | Yes | Yes | Yes |
|
|
|
no | ||
| 11 | Combobox with aria-autocomplete="list" | Yes | Yes | Yes |
|
|
|
no | ||
| 12 | Combobox with aria-autocomplete="none" and role="combobox" on wrapping div | Yes | Yes | Yes |
|
|
|
no | ||
| 13 | Combobox with aria-autocomplete="inline" and role="combobox" on wrapping div | Yes | Yes | Yes |
|
|
|
no | ||
| 14 | Combobox with aria-autocomplete="list" and role="combobox" on wrapping div | Yes | Yes | Yes |
|
|
|
no | ||
| 15 | Date Picker | no | Yes | no |
|
|
|
Yes | ||
| 16 | Drag and Drop | Yes | Yes | no |
|
|
|
no | ||
| 17 | Drag and Drop: aria-activedescendant | Yes | Yes | no |
|
|
|
no | ||
| 18 | Grid Example: Reimbursement Form | no | Yes | no |
|
|
|
no | ||
| 19 | Grid: Email Application | no | Yes | no |
|
|
|
no | ||
| 20 | Hide/Show: Region follows button | no | no | no |
|
|
|
no | ||
| 21 | Hide/Show: Region does not follow button | no | no | no |
|
|
|
no | ||
| 22 | Hide/Show: Region is exclusive | no | no | no |
|
|
|
Yes | ||
| 23 | Live Region | no | Yes | Yes |
|
|
|
no | ||
| 24 | Live Region: RSS Feed | no | Yes | Yes |
|
|
|
no | ||
| 25 | Menubar | Yes | no | no |
|
|
|
no | ||
| 26 | Menubar: ARIA CSS Selectors | Yes | no | no |
|
|
|
Yes | ||
| 27 | Progressbar | Yes | no | no |
|
|
|
no | ||
| 28 | Radiogroup | Yes | Yes | no |
|
|
|
no | ||
| 29 | Radiogroup: aria-activedescendant | Yes | Yes | no |
|
|
|
no | ||
| 30 | Radiogroup: Background Images | Yes | Yes | no |
|
|
|
no | ||
| 31 | Radiogroup: ARIA CSS Selectors | Yes | Yes | no |
|
|
|
Yes | ||
| 32 | Slider | no | Yes | no |
|
|
none | no | ||
| 33 | Spinbutton using IMG elements for buttons | no | no | Yes |
|
|
none | no | ||
| 34 | Tab Panel | Yes | Yes | no |
|
|
|
no | ||
| 35 | Tab Panel: Accordian1 | Yes | Yes | no |
|
|
|
no | ||
| 36 | Tab Panel: ARIA CSS Selectors | Yes | Yes | no |
|
|
|
Yes | ||
| 37 | Tab Panel: Accordian using ARIA CSS selectors | Yes | Yes | no |
|
|
|
Yes | ||
| 38 | Toolbar using inline images for visual state | no | Yes | no |
|
|
|
no | ||
| 39 | Tooltip | no | Yes | Yes |
|
|
|
no | ||
| 40 | Tooltip: ARIA CSS selectors | no | Yes | Yes |
|
|
|
Yes | ||
| 41 | Treeview | no | Yes | no |
|
|
|
no | ||
| 42 | Treeview: Using aria-owns | no | Yes | no |
|
|
|
no | ||
| 43 | Treeview: ARIA CSS Selectors | no | Yes | no |
|
|
|
Yes | ||
| 44 | Using aria-describedby to satisfy WCAG 2.4.4 Link Purpose in Context | no | no | no | none |
|
none | no | ||
AEGIS Techniques (JQuery)
http://access.aol.com/aegis/#goto_slider
| Widget | Applicable SCs | Predominant SC domonstrated | Does the widget work/confom |
|---|---|---|---|
| Slider | 2.1.1 keyboard |
||
| Progress Bar | |||
| Menubar | |||
| Buttons | |||
| Dialogue | |||
| Checkbox | |||
| Accordion | |||
| Tree | |||
| Carousel | |||
| Tabs | |||
| Tooltip | |||
| Autocomplete | |||
| Datepicker |
GOC Web Experience Toolkit¶
Form interface features¶
Information sharing features¶
Interface enhancement features¶
Navigation enhancement features¶
Personalisation features¶
Utility features¶