ARIA Examples

Number Title Features Role Properties
1 Live Region 3

Simple example of a live region widget with two timers.

  • checkbox
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
2 Alert role example using an ARIA alert box

Simple number guessing game that displays the results of each guess in an ARIA alert box.

  • checkbox
  • presentation
  • aria-checked
  • aria-describedby
3 Alert example using a modal ARIA dialog box

Simple number guessing game that displays the results of each guess in a modal ARIA dialog box.

  • checkbox
  • presentation
  • aria-checked
  • aria-describedby
  • aria-hidden
4 Checkbox using IMG elements for visual state

Simple example of a checkbox widget using inline images to display the visual state of the boxes in the group.

  • checkbox
  • presentation
  • aria-checked
  • aria-describedby
  • aria-labelledby
5 Checkbox group using IMG elements for visual state

Simple example of a checkbox group using inline images to display the visual state of the boxes in the group.

  • checkbox
  • group
  • presentation
  • aria-checked
  • aria-describedby
  • aria-labelledby
6 Checkbox group using background images for visual state

Simple example of a checkbox group using background images to display the visual state of the boxes in the group. Background images are typically not displayed in high contrast mode. For this reason, background images should not be relied upon to display essential visual information.

  • checkbox
  • group
  • aria-checked
  • aria-describedby
  • aria-labelledby
7 Checkbox group using ARIA CSS selectors for visual state

Simple example of a checkbox group using ARIA CSS selectors to display the visual state of the boxes in the group. Background images are typically not displayed in high contrast mode. For this reason, background images should not be relied upon to display essential visual information.

  • group
  • aria-checked
  • aria-describedby
  • aria-labelledby
8 Combobox with aria-autocomplete="none"

This is example implements a combobox widget with aria-autocomplete="none". The edit box is read only. The application is required to manage focus for the list box so assistive technologies can follow the currently selected option. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
  • aria-owns
9 Combobox with aria-autocomplete="inline"

This example implements a combobox widget with aria-autocomplete="inline". Focus will remain on the edit box while the user manipulates the list box.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
  • aria-owns
10 Combobox with aria-autocomplete="list"

This is example implements a combobox widget with aria-autocomplete="list". Focus remains on the edit box while the user manipulates the list. activedescendant is used to tell assistive technologies which list option is currently selected. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
  • aria-owns
11 Combobox with aria-autocomplete="none" and role="combobox" on wrapping div

This is example implements a combobox widget with aria-autocomplete="none". The edit box is readonly. The application is required to manage focus for the list box so assistive technologies can follow the currently selected option. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
12 Combobox with aria-autocomplete="inline" and role="combobox" on wrapping div

This example implements a combobox widget with aria-autocomplete="inline". Focus will remain on the edit box while the user manipulates the list box.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
13 Combobox with aria-autocomplete="list" and role="combobox" on wrapping div

This is example implements a combobox widget with aria-autocomplete="list". Focus remains on the edit box while the user manipulates the list. activedescendant is used to tell assistive technologies which list option is currently selected. For clarity, this example was designed not to update the edit box until the user makes a choice from the list.

  • combobox
  • listbox
  • option
  • aria-expanded
  • aria-labelledby
  • aria-owns
14 Grid: Reimbursement Form

Simple example of a grid widget to implement a travel reimbursement form.

  • alert
  • application
  • button
  • grid
  • gridcell
  • row
  • aria-disabled
  • aria-hidden
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-pressed
  • aria-selected
15 Grid: Email Application

Simple example of a grid widget to implement an email application. Inline images are used to display the visual state of the sort order of the cells.

  • button
  • grid
  • gridcell
  • presentation
  • row
  • aria-labelledby
  • aria-readonly
  • aria-selected
  • aria-sort
16 Hide/Show: Region follows button

Simple example of hiding and showing regions using aria-expanded. aria-controls is used to maintain markup associations.'

  • button
  • region
  • aria-controls
  • aria-expanded
  • aria-labelledby
17 Hide/Show: Region does not follow button

Simple example of hiding and showing regions using aria-expanded. aria-controls is used to maintain markup associations.'

  • button
  • region
  • aria-controls
  • aria-expanded
  • aria-labelledby
18 Hide/Show: Region is exclusive

Simple example of hiding and showing regions using aria-expanded. aria-controls is used to maintain markup associations. Only one region may be displayed at a time.'

  • button
  • region
  • aria-controls
  • aria-expanded
  • aria-labelledby
19 Live Region

Simple example of a live region widget with two timers.

  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
20 Live Region: RSS Feed

Simple example of a live region widget with two timers.

  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
21 Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
22 Menubar: ARIA CSS Selectors

Simple example of a menubar widget using ARIA CSS selectors.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
23 Progress Bar

Simple examples of a progress bar widget.

  • slider
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
24 Slider

Simple examples of a slider widget.

  • presentation
  • slider
  • aria-controls
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
25 Spinbutton using IMG elements for buttons

Simple example of a spinbutton widget using inline images to display the buttons.

  • button
  • presentation
  • spinbutton
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
26 Tab Panel

Simple example of a tab Panel widget.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-hidden
  • aria-labelledby
  • aria-selected
27 Tab Panel: Accordian1

Simple example of a tab panel accordian widget.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-expanded
  • aria-hidden
  • aria-labelledby
  • aria-multiselectable
  • aria-selected
28 Tab Panel: ARIA CSS Selectors

Simple example of a tab Panel widget which used ARIA css selectors.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-hidden
  • aria-labelledby
  • aria-selected
29 Tab Panel: Accordian using ARIA CSS selectors

Simple example of a tab panel accordian widget using ARIA CSS selectors.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-expanded
  • aria-hidden
  • aria-labelledby
  • aria-multiselectable
  • aria-selected
30 Toolbar using inline images for visual state

Simple example of a toolbar widget using inline images to display the visual state of the buttons.

  • application
  • button
  • toolbar
  • aria-checked
  • aria-describedby
  • aria-labelledby
  • aria-pressed
31 Tooltip

Simple example of a tooltip widget

  • tooltip
  • aria-describedby
  • aria-hidden
  • aria-labelledby
  • aria-required
32 Tooltip: ARIA CSS selectors

Simple example of a tooltip widget using ARIA CSS selectors.

  • tooltip
  • aria-describedby
  • aria-hidden
  • aria-labelledby
  • aria-required
33 Treeview

Simple example of a treeview widget.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
34 Treeview: Using aria-owns

Simple example of a treeview widget using aria-owns to define markup relationships.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
  • aria-owns
35 Treeview: ARIA CSS Selectors

Simple example of a tree widget using ARIA CSS selectors to show visual state. Not all browsers support CSS selectors. Further, some browsers will not display background images in high contrast mode.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
36 Using aria-describedby to satisfy WCAG 2.4.4 Link Purpose in Context

The current WCAG 2.0 Techniques for links in context requirement 2.4.4 do not provide a progammatic means to determine the authors intended context. The following examples use the aria-describedby attribute to provide a means for authors to define the context to users and to support assistive technologies to identify the correct context. This technique it supported by the JAWS screen reader for both Internet Explorer 9.0 and Firefox 4.0.

  • aria-describedby
  • [href