Index of ARIA Design Pattern Examples

This page includes the following indexes of example implementations of ARIA design patterns included in WAI-ARIA Authoring Practices 1.2.

Examples by Role
Examples by Properties and States

Examples by Role

Role	Examples
`alert`	Alert
`alertdialog`	Alert Dialog
`article`	Feed
`banner`	Banner Landmark
`button`	Button (IDL Version) Button
`checkbox`	Checkbox (Two State) Checkbox (Mixed-State)
`columnheader`	Table
`combobox`	Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup
`complementary`	Complementary Landmark
`contentinfo`	Contentinfo Landmark
`dialog`	Date Picker Combobox Date Picker Dialog Modal Dialog
`feed`	Feed
`form`	Form Landmark
`grid`	Date Picker Combobox Editable Combobox with Grid Popup Date Picker Dialog Data Grid Layout Grid
`gridcell`	Layout Grid
`group`	Auto-Rotating Image Carousel Checkbox (Two State) Editor Menubar Date Picker Spin Button Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties
`link`	Link
`listbox`	Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox
`main`	Main Landmark
`menu`	Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Editor Menubar Navigation Menubar Toolbar
`menubar`	Editor Menubar Navigation Menubar
`menuitem`	Actions Menu Button Using element.focus() Navigation Menu Button Editor Menubar Navigation Menubar
`menuitemcheckbox`	Editor Menubar
`menuitemradio`	Editor Menubar Toolbar
`navigation`	Navigation Landmark
`none`	Navigation Menu Button Navigation Menubar
`option`	Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox
`radio`	Radio Group Using Roving tabindex Radio Group Using aria-activedescendant Toolbar
`radiogroup`	Radio Group Using Roving tabindex Radio Group Using aria-activedescendant Toolbar
`region`	Region Landmark
`row`	Editable Combobox with Grid Popup Layout Grid Table Treegrid Email Inbox
`rowgroup`	Table
`search`	Search Landmark
`separator`	Editor Menubar
`slider`	Horizontal Multi-Thumb Slider Horizontal Slider Slider with aria-orientation and aria-valuetext
`spinbutton`	Date Picker Spin Button Toolbar
`tab`	Auto-Rotating Image Carousel with a Tablist Tabs with Automatic Activation Tabs with Manual Activation
`table`	Table
`tablist`	Auto-Rotating Image Carousel with a Tablist Tabs with Automatic Activation Tabs with Manual Activation
`tabpanel`	Auto-Rotating Image Carousel with a Tablist Tabs with Automatic Activation Tabs with Manual Activation
`toolbar`	Toolbar
`tree`	File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties
`treegrid`	Treegrid Email Inbox
`treeitem`	File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties

Examples By Properties and States

Property or State	Examples
`aria-activedescendant`	Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Actions Menu Button Using aria-activedescendant Radio Group Using aria-activedescendant
`aria-autocomplete`	Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Date Picker Combobox Editable Combobox with Grid Popup
`aria-busy`	Feed
`aria-checked`	Checkbox (Two State) Checkbox (Mixed-State) Editor Menubar Radio Group Using Roving tabindex Radio Group Using aria-activedescendant Toolbar
`aria-colcount`	Data Grid
`aria-controls`	Accordion Auto-Rotating Image Carousel with a Tablist Checkbox (Mixed-State) Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Date Picker Combobox Select-Only Combobox Editable Combobox with Grid Popup Disclosure (Show/Hide) for Answers to Frequently Asked Questions Disclosure (Show/Hide) for Image Description Disclosure for Navigation Menus Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Tabs with Automatic Activation Tabs with Manual Activation Toolbar
`aria-current`	Disclosure for Navigation Menus
`aria-describedby`	Date Picker Combobox Alert Dialog Date Picker Dialog Modal Dialog Feed Table
`aria-disabled`	Accordion Editor Menubar Toolbar
`aria-expanded`	Accordion Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Date Picker Combobox Select-Only Combobox Editable Combobox with Grid Popup Disclosure (Show/Hide) for Answers to Frequently Asked Questions Disclosure (Show/Hide) for Image Description Disclosure for Navigation Menus Collapsible Dropdown Listbox Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Editor Menubar Navigation Menubar Toolbar Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties
`aria-haspopup`	Date Picker Combobox Editable Combobox with Grid Popup Collapsible Dropdown Listbox Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Editor Menubar Navigation Menubar Toolbar
`aria-hidden`	Alert Dialog Date Picker Spin Button Toolbar
`aria-label`	Auto-Rotating Image Carousel Auto-Rotating Image Carousel with a Tablist Checkbox (Two State) Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Date Picker Combobox Select-Only Combobox Editable Combobox with Grid Popup Alert Dialog Date Picker Dialog Modal Dialog Feed Data Grid Layout Grid Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Editor Menubar Navigation Menubar Radio Group Using Roving tabindex Radio Group Using aria-activedescendant Date Picker Spin Button Table Tabs with Automatic Activation Tabs with Manual Activation Toolbar Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties
`aria-labelledby`	Checkbox (Two State) Date Picker Combobox Select-Only Combobox Editable Combobox with Grid Popup Alert Dialog Date Picker Dialog Modal Dialog Feed Data Grid Layout Grid Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Actions Menu Button Using aria-activedescendant Actions Menu Button Using element.focus() Navigation Menu Button Radio Group Using Roving tabindex Radio Group Using aria-activedescendant Date Picker Spin Button Tabs with Automatic Activation Tabs with Manual Activation File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Computed Properties Navigation Treeview Using Declared Properties Complementary Landmark Form Landmark Main Landmark Navigation Landmark Region Landmark Search Landmark
`aria-level`	Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Declared Properties
`aria-live`	Alert Auto-Rotating Image Carousel Auto-Rotating Image Carousel with a Tablist Date Picker Combobox Date Picker Dialog
`aria-modal`	Date Picker Combobox Alert Dialog Date Picker Dialog
`aria-multiselectable`	Listboxes with Rearrangeable Options
`aria-orientation`	Slider with aria-orientation and aria-valuetext
`aria-posinset`	Feed Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Declared Properties
`aria-pressed`	Button (IDL Version) Button Toolbar
`aria-roledescription`	Auto-Rotating Image Carousel Auto-Rotating Image Carousel with a Tablist
`aria-rowcount`	Data Grid Layout Grid
`aria-rowindex`	Data Grid Layout Grid
`aria-selected`	Auto-Rotating Image Carousel with a Tablist Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Editable Combobox with Grid Popup Listboxes with Rearrangeable Options Tabs with Automatic Activation Tabs with Manual Activation
`aria-setsize`	Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview Using Declared Properties
`aria-sort`	Data Grid
`aria-valuemax`	Meter Horizontal Multi-Thumb Slider Horizontal Slider Slider with aria-orientation and aria-valuetext Date Picker Spin Button
`aria-valuemin`	Meter Horizontal Multi-Thumb Slider Horizontal Slider Slider with aria-orientation and aria-valuetext Date Picker Spin Button Toolbar
`aria-valuenow`	Meter Horizontal Multi-Thumb Slider Horizontal Slider Slider with aria-orientation and aria-valuetext Date Picker Spin Button Toolbar
`aria-valuetext`	Horizontal Multi-Thumb Slider Slider with aria-orientation and aria-valuetext Date Picker Spin Button Toolbar