OpenAjax Examples
| Number | Description | Type | Accessible Name | HTML | ARIA | ARIA Styling |
|||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| child nodes | aria-label | aria-labelledby | label | title | legend | Roles | Properties | States | |||||
| 1 | Alert role example using an ARIA alert box | BP | no | no | Yes | Yes | no | no | none |
|
|
|
no |
| 2 | Alert example using a modal ARIA dialog box | BP | no | no | Yes | Yes | no | no | none |
|
|
|
no |
| 3 | Button role example using text-only buttons | BP | no | no | Yes | no | no | no | none |
|
|
|
Yes |
| 4 | Button role example using image buttons | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 5 | Checkboxes using IMG elements for visual state | BP | Yes | no | no | no | no | no | none |
|
|
|
no |
| 6 | Checkbox group using IMG elements for visual state | BP | Yes | no | no | no | no | no | none |
|
|
|
no |
| 7 | Checkbox group using background images for visual state | BP | Yes | no | no | no | no | no | none |
|
|
|
no |
| 8 | Checkbox group using ARIA CSS selectors for visual state | BP | Yes | no | no | no | no | no | none |
|
|
|
Yes |
| 9 | Combobox with aria-autocomplete="none" | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 10 | Combobox with aria-autocomplete="inline" | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 11 | Combobox with aria-autocomplete="list" | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 12 | Combobox with aria-autocomplete="none" and role="combobox" on wrapping div | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 13 | Combobox with aria-autocomplete="inline" and role="combobox" on wrapping div | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 14 | Combobox with aria-autocomplete="list" and role="combobox" on wrapping div | BP | Yes | no | Yes | Yes | no | no | none |
|
|
|
no |
| 15 | Date Picker | BP | no | no | Yes | no | no | no | none |
|
|
|
Yes |
| 16 | Drag and Drop | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 17 | Drag and Drop: aria-activedescendant | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 18 | Grid Example: Reimbursement Form | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 19 | Grid: Email Application | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 20 | Hide/Show: Region follows button | BP | no | no | no | no | no | no | none |
|
|
|
no |
| 21 | Hide/Show: Region does not follow button | BP | no | no | no | no | no | no | none |
|
|
|
no |
| 22 | Hide/Show: Region is exclusive | BP | no | no | no | no | no | no | none |
|
|
|
Yes |
| 23 | Live Region | BP | no | no | Yes | Yes | no | no | none |
|
|
|
no |
| 24 | Live Region: RSS Feed | BP | no | no | Yes | Yes | no | no | none |
|
|
|
no |
| 25 | Menubar | BP | no | no | no | no | no | no | none | none | none |
|
no |
| 26 | Menubar: ARIA CSS Selectors | BP | no | no | no | no | no | no | none |
|
|
|
no |
| 27 | Progressbar | BP | Yes | no | no | no | no | no | none |
|
|
|
no |
| 28 | Radiogroup | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 29 | Radiogroup: aria-activedescendant | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 30 | Radiogroup: Background Images | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 31 | Radiogroup: ARIA CSS Selectors | BP | Yes | no | Yes | no | no | no | none |
|
|
|
Yes |
| 32 | Slider | BP | no | no | Yes | no | no | no | none |
|
|
none | no |
| 33 | Spinbutton using IMG elements for buttons | BP | no | no | no | Yes | no | no | none |
|
|
none | no |
| 34 | Tab Panel | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 35 | Tab Panel: Accordian1 | BP | Yes | no | Yes | no | no | no | none |
|
|
|
no |
| 36 | Tab Panel: ARIA CSS Selectors | BP | Yes | no | Yes | no | no | no | none |
|
|
|
Yes |
| 37 | Tab Panel: Accordian using ARIA CSS selectors | BP | Yes | no | Yes | no | no | no | none |
|
|
|
Yes |
| 38 | Toolbar using inline images for visual state | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 39 | Tooltip | BP | no | no | Yes | Yes | no | no | none |
|
|
|
no |
| 40 | Tooltip: ARIA CSS selectors | BP | no | no | Yes | Yes | no | no | none |
|
|
|
Yes |
| 41 | Treeview | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 42 | Treeview: Using aria-owns | BP | no | no | Yes | no | no | no | none |
|
|
|
no |
| 43 | Treeview: ARIA CSS Selectors | BP | no | no | Yes | no | no | no | none |
|
|
|
Yes |
| 44 | Using aria-describedby to satisfy WCAG 2.4.4 Link Purpose in Context | BP | no | no | no | no | no | no |
|
none |
|
none | no |