Role

alert

Title Features Role Properties
Alert role example using an ARIA alert box

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

  • alert
  • application
  • aria-labelledby
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

alertdialog

Title Features Role Properties
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.

  • alertdialog
  • application
  • aria-labelledby

application

Title Features Role Properties
Alert role example using an ARIA alert box

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

  • alert
  • application
  • aria-labelledby
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.

  • alertdialog
  • application
  • aria-labelledby
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
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

button

Title Features Role Properties
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
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
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
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
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
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
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

checkbox

Title Features Role Properties
input[type=checkbox] - Labeling using label element encapsulating input[type=checkbox]
  • Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
  • @Label@ element content increases the active area for changing the selection
  • What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the @label@ by reference technique.
  • checkbox
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
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
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
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
input[type=checkbox] - Labeling checkbox using title attribute
  • Using the @title@ attribute to define @labels@ will work with assistive technologies but is not defined in the @HTML@ specifications
  • checkbox

combobox

Title Features Role Properties
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
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
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
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
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
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

grid

Title Features Role Properties
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
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

gridcell

Title Features Role Properties
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
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

group

Title Features Role Properties
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
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
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
Treeview

Simple example of a treeview widget.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
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
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

listbox

Title Features Role Properties
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
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
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
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
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
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

log

Title Features Role Properties
input[type=checkbox] - Labeling using label element encapsulating input[type=checkbox]
  • Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
  • @Label@ element content increases the active area for changing the selection
  • What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the @label@ by reference technique.
  • checkbox
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
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
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
Live Region 3

Simple example of a live region widget with two timers.

  • log
  • option
  • timer
  • aria-atomic
  • aria-live
  • aria-relevant

menu

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

menubar

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

menuitem

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

menuitemcheckbox

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

menuitemradio

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

option

Title Features Role Properties
input[type=checkbox] - Labeling using label element encapsulating input[type=checkbox]
  • Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
  • @Label@ element content increases the active area for changing the selection
  • What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the @label@ by reference technique.
  • checkbox
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
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
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
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
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
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
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
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
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
Live Region 3

Simple example of a live region widget with two timers.

  • log
  • option
  • timer
  • aria-atomic
  • aria-live
  • aria-relevant

presentation

Title Features Role Properties
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
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
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
Slider

Simple examples of a slider widget.

  • presentation
  • slider
  • aria-controls
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
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

region

Title Features Role Properties
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
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
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

row

Title Features Role Properties
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
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

separator

Title Features Role Properties
Menubar

Simple example of a menubar widget.

  • menu
  • menubar
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • separator
  • aria-checked
  • aria-controls
  • aria-haspopup
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

slider

Title Features Role Properties
Progress Bar

Simple examples of a progress bar widget.

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

Simple examples of a slider widget.

  • presentation
  • slider
  • aria-controls
  • aria-labelledby
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow

spinbutton

Title Features Role Properties
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

tab

Title Features Role Properties
Tab Panel

Simple example of a tab Panel widget.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-hidden
  • aria-labelledby
  • aria-selected
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
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
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

tablist

Title Features Role Properties
Tab Panel

Simple example of a tab Panel widget.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-hidden
  • aria-labelledby
  • aria-selected
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
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
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

tabpanel

Title Features Role Properties
Tab Panel

Simple example of a tab Panel widget.

  • tab
  • tablist
  • tabpanel
  • aria-controls
  • aria-hidden
  • aria-labelledby
  • aria-selected
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
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
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

timer

Title Features Role Properties
input[type=checkbox] - Labeling using label element encapsulating input[type=checkbox]
  • Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
  • @Label@ element content increases the active area for changing the selection
  • What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the @label@ by reference technique.
  • checkbox
  • log
  • option
  • timer
  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected
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
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
Live Region 3

Simple example of a live region widget with two timers.

  • log
  • option
  • timer
  • aria-atomic
  • aria-live
  • aria-relevant

toolbar

Title Features Role Properties
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

tooltip

Title Features Role Properties
Tooltip

Simple example of a tooltip widget

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

Simple example of a tooltip widget using ARIA CSS selectors.

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

tree

Title Features Role Properties
Treeview

Simple example of a treeview widget.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
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
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

treeitem

Title Features Role Properties
Treeview

Simple example of a treeview widget.

  • group
  • tree
  • treeitem
  • aria-expanded
  • aria-hidden
  • aria-labelledby
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
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