List of WAI ARIA Examples and resources

Open Ajax

AOL/PG/AEGIS

Yahoo

GOC WET

Blogs

OpenAjax Examples

Example Markup Summary
# 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
  • alert
  • application
  • aria-labelledby
  • aria-invalid
no
2 Alert example using a modal ARIA dialog box     no Yes Yes
  • alertdialog
  • application
  • aria-labelledby
  • aria-hidden
  • aria-invalid
no
3 Button role example using text-only buttons     no Yes no
  • button
  • aria-controls
  • aria-labelledby
  • aria-pressed
Yes
4 Button role example using image buttons     no Yes no
  • button
  • aria-controls
  • aria-labelledby
  • aria-pressed
no
5 Checkboxes using IMG elements for visual state     Yes no no
  • checkbox
  • presentation
  • aria-describedby
  • aria-labelledby
  • aria-checked
no
6 Checkbox group using IMG elements for visual state     Yes no no
  • checkbox
  • group
  • presentation
  • aria-describedby
  • aria-labelledby
  • aria-checked
no
7 Checkbox group using background images for visual state     Yes no no
  • checkbox
  • group
  • aria-describedby
  • aria-labelledby
  • aria-checked
no
8 Checkbox group using ARIA CSS selectors for visual state     Yes no no
  • checkbox
  • group
  • aria-describedby
  • aria-labelledby
  • aria-checked
Yes
9 Combobox with aria-autocomplete="none"     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-owns
  • aria-expanded
no
10 Combobox with aria-autocomplete="inline"     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-owns
  • aria-expanded
no
11 Combobox with aria-autocomplete="list"     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-owns
  • aria-expanded
no
12 Combobox with aria-autocomplete="none" and role="combobox" on wrapping div     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-expanded
no
13 Combobox with aria-autocomplete="inline" and role="combobox" on wrapping div     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-expanded
no
14 Combobox with aria-autocomplete="list" and role="combobox" on wrapping div     Yes Yes Yes
  • combobox
  • listbox
  • option
  • aria-labelledby
  • aria-owns
  • aria-expanded
no
15 Date Picker     no Yes no
  • application
  • button
  • grid
  • gridcell
  • heading
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-hidden
  • aria-selected
Yes
16 Drag and Drop     Yes Yes no
  • alert
  • application
  • button
  • grid
  • gridcell
  • aria-dropeffect
  • aria-labelledby
  • aria-selected
no
17 Drag and Drop: aria-activedescendant     Yes Yes no
  • alert
  • application
  • button
  • grid
  • gridcell
  • aria-activedescendant
  • aria-dropeffect
  • aria-labelledby
  • aria-selected
no
18 Grid Example: Reimbursement Form     no Yes no
  • alert
  • application
  • button
  • grid
  • gridcell
  • row
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-disabled
  • aria-hidden
  • aria-pressed
  • aria-selected
no
19 Grid: Email Application     no Yes no
  • button
  • grid
  • gridcell
  • presentation
  • row
  • aria-labelledby
  • aria-readonly
  • aria-sort
  • aria-selected
no
20 Hide/Show: Region follows button     no no no
  • button
  • region
  • aria-controls
  • aria-labelledby
  • aria-expanded
no
21 Hide/Show: Region does not follow button     no no no
  • button
  • region
  • aria-controls
  • aria-labelledby
  • aria-expanded
no
22 Hide/Show: Region is exclusive     no no no
  • button
  • region
  • aria-controls
  • aria-labelledby
  • aria-expanded
Yes
23 Live Region     no Yes Yes
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
no
24 Live Region: RSS Feed     no Yes Yes
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
no
25 Menubar     Yes no no
  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-controls
  • aria-haspopup
  • aria-checked
no
26 Menubar: ARIA CSS Selectors     Yes no no
  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-controls
  • aria-haspopup
  • aria-checked
Yes
27 Progressbar     Yes no no
  • application
  • progressbar
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-hidden
no
28 Radiogroup     Yes Yes no
  • presentation
  • radio
  • radiogroup
  • aria-labelledby
  • aria-checked
no
29 Radiogroup: aria-activedescendant     Yes Yes no
  • presentation
  • radio
  • radiogroup
  • aria-activedescendant
  • aria-labelledby
  • aria-checked
no
30 Radiogroup: Background Images     Yes Yes no
  • radio
  • radiogroup
  • aria-labelledby
  • aria-checked
no
31 Radiogroup: ARIA CSS Selectors     Yes Yes no
  • radio
  • radiogroup
  • aria-labelledby
  • aria-checked
Yes
32 Slider     no Yes no
  • presentation
  • slider
  • aria-controls
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
none no
33 Spinbutton using IMG elements for buttons     no no Yes
  • button
  • presentation
  • spinbutton
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
none no
34 Tab Panel     Yes Yes no
  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-labelledby
  • aria-hidden
  • aria-selected
no
35 Tab Panel: Accordian1     Yes Yes no
  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-labelledby
  • aria-multiselectable
  • aria-expanded
  • aria-hidden
  • aria-selected
no
36 Tab Panel: ARIA CSS Selectors     Yes Yes no
  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-labelledby
  • aria-hidden
  • aria-selected
Yes
37 Tab Panel: Accordian using ARIA CSS selectors     Yes Yes no
  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-labelledby
  • aria-multiselectable
  • aria-expanded
  • aria-hidden
  • aria-selected
Yes
38 Toolbar using inline images for visual state     no Yes no
  • application
  • button
  • toolbar
  • aria-describedby
  • aria-labelledby
  • aria-checked
  • aria-pressed
no
39 Tooltip     no Yes Yes
  • tooltip
  • aria-describedby
  • aria-labelledby
  • aria-required
  • aria-hidden
no
40 Tooltip: ARIA CSS selectors     no Yes Yes
  • tooltip
  • aria-describedby
  • aria-labelledby
  • aria-required
  • aria-hidden
Yes
41 Treeview     no Yes no
  • group
  • tree
  • treeitem
  • aria-labelledby
  • aria-expanded
  • aria-hidden
no
42 Treeview: Using aria-owns     no Yes no
  • group
  • tree
  • treeitem
  • aria-labelledby
  • aria-owns
  • aria-expanded
  • aria-hidden
no
43 Treeview: ARIA CSS Selectors     no Yes no
  • group
  • tree
  • treeitem
  • aria-labelledby
  • aria-expanded
  • aria-hidden
Yes
44 Using aria-describedby to satisfy WCAG 2.4.4 Link Purpose in Context     no no no none
  • aria-describedby
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
4.1.2 Name, Role, State

Progress Bar
Menubar
Buttons
Dialogue
Checkbox
Accordion
Tree
Carousel
Tabs
Tooltip
Autocomplete
Datepicker

GOC Web Experience Toolkit

Project Working examples Success Criteria WAI ARIA aspects used
Charts and graphs support Charts and graphs support - GC Web Usability theme    
Charts and graphs support - CLF 2.0 theme    
Mathematical/scientific formula display Mathematical/scientific formula display - English    
Mathematical/scientific formula display - French    
Progress bar Progress bar - English    
Progress bar - French    
Search term highlighting Search term highlighting - English    
Search term highlighting - French    
Tracked changes Tracked changes - English    
Tracked changes - French    
Zebra striping Zebra striping - English    
Zebra striping - French    

Form interface features

Project Working examples Success Criteria WAI ARIA aspects used
Accessible CAPTCHA DISTCHA - English    
Auto-complete for text input fields Auto-complete for text input fields - English    
Auto-complete for text input fields - French    
Checkbox list enhancement Checkbox list enhancement - English    
Checkbox list enhancement - French    
Deselectable radio buttons Deselectable radio buttons - English    
Deselectable radio buttons - French    
Form button enhancement Form button enhancement - English    
Form button enhancement - French    
Form validation Form validation - English    
Form validation - French    
Slider control Slider control - English    
Slider control - French    

Information sharing features

Project Working examples Success Criteria WAI ARIA aspects used
Feedback form Feedback form - English    
Feedback form - French    
Share widget Share widget - English    
Share widget - French    
Share widget (no icons) - English    
Share widget (no icons) - French    
Share widget (all sites) - English    
Share widget (all sites) - French    
Web feeds widget Web feeds widget - English    
Web feeds widget - French    

Interface enhancement features

Project Working examples Success Criteria WAI ARIA aspects used
Calendar interface Date picker working examples    
Events calendar working examples    
Coda slider Coda slider - Basic slider - English    
Coda slider - Basic slider - French    
Coda slider - Vertical slider    
Coda slider - Slider with grid (span-2 + span-4 layout)    
Coda slider - Slider with grid (span-3 + span-3 layout)    
Dialog box enhancement Dialog box enhancement - English    
Dialog box enhancement - French    
Expandable/collapsible content Expandable/collapsible content - English    
Expandable/collapsible content - French    
Filterable content Filterable content - Example 1 - English    
Filterable content - Example 2 - English    
Geomap Geomap - 1 column - English    
Geomap - 1 column - French    
Geomap - 2 column - English    
Geomap - 2 column - French    
Geomap - 3 column - English    
Geomap - 3 column - French    
Multimedia player Multimedia player - English    
Multimedia player - French    
Panorama Panorama - English    
Panorama - French    

Navigation enhancement features

Project Working examples Success Criteria WAI ARIA aspects used
Accessible footnotes Accessible footnotes - HTML5    
Accessible footnotes - XHTML 1.0 Strict    
Active link indicator Active link indicator - English    
Floating toolbar Floating toolbar - English    
Floating toolbar - French    
Menu bar Menu bar - GC Web Usability theme    
Menu bar - CLF 2.0 theme    
Open new window/tab Open new window/tab - GC Web Usability theme    
Open new window/tab - CLF 2.0 theme    
Slide out tab widget Slide out tab widget - GC Web Usability theme    
Slide out tab widget - CLF 2.0 theme    
Tabbed interface Tabbed interface - English    
Tabbed interface with grids - English    
Tabbed interface in the right column - English    

Personalisation features

Project Working examples Success Criteria WAI ARIA aspects used
Client-side CSS Client-side CSS - English    
Client-side CSS - French    
Customizable interface Customizable interface with grids - English    
Geo-targeting Geo-targeting - English    
Helpful 404 error pages Helpful 404 error pages - English/French    
Helpful 404 error pages - French/English    
Style switcher Style switcher - English    
Style switcher - French    

Utility features

Project Working examples Success Criteria WAI ARIA aspects used
Language selector Language selector - jQuery + PHP - English    
Language selector - jQuery + PHP - French    
Language selector - PHP only - English    
Language selector - PHP only - French    
Session timeout Session timeout - English - GC Web Usability theme    
Session timeout - French - GC Web Usability theme    
Session timeout - English - CLF 2.0 theme    
Session timeout - French - CLF 2.0 theme