Properties

aria-activedescendant

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

aria-atomic

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

aria-checked

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
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
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
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

aria-controls

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
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

Simple examples of a slider widget.

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

aria-describedby

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
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
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

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
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

aria-disabled

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

aria-expanded

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
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
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: 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
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

aria-haspopup

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

aria-hidden

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
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
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
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

aria-label

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

aria-labelledby

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
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
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
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: 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
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
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
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

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
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

aria-live

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
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
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

aria-multiselectable

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

aria-owns

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="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
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

aria-pressed

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
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

aria-readonly

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

aria-relevant

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

aria-required

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

aria-selected

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
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
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
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

aria-sort

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

aria-valuemax

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 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

aria-valuemin

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 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

aria-valuenow

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 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