OpenAjax Examples by ARIA Properties

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