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`	Navigation Menubar Navigation Treeview 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`	Navigation Menubar Navigation Treeview 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 with Buttons for Slide Control Checkbox (Two State) Editor Menubar Color Viewer Slider Date Picker Spin Button Navigation Treeview
`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 Menubar Navigation Treeview 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 aria-activedescendant Radio Group Using Roving tabindex Toolbar
`radiogroup`	Radio Group Using aria-activedescendant Radio Group Using Roving tabindex 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 Slider with aria-orientation and aria-valuetext Color Viewer Slider
`spinbutton`	Date Picker Spin Button Toolbar
`tab`	Auto-Rotating Image Carousel with Tabs for Slide Control Tabs with Automatic Activation Tabs with Manual Activation
`table`	Table
`tablist`	Auto-Rotating Image Carousel with Tabs for Slide Control Tabs with Automatic Activation Tabs with Manual Activation
`tabpanel`	Auto-Rotating Image Carousel with Tabs for Slide Control 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
`treegrid`	Treegrid Email Inbox
`treeitem`	File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview

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 aria-activedescendant Radio Group Using Roving tabindex Toolbar
`aria-colcount`	Data Grid
`aria-controls`	Accordion Auto-Rotating Image Carousel with Tabs for Slide Control 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 Navigation Menu with Top-Level Links Disclosure Navigation Menu 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 Navigation Menu with Top-Level Links Disclosure Navigation Menu Navigation Menubar Navigation Treeview
`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 Navigation Menu with Top-Level Links Disclosure Navigation Menu 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
`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 with Buttons for Slide Control Auto-Rotating Image Carousel with Tabs for Slide Control 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 aria-activedescendant Radio Group Using Roving tabindex Color Viewer Slider 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
`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 Navigation Menubar Radio Group Using aria-activedescendant Radio Group Using Roving tabindex Color Viewer Slider 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 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
`aria-live`	Alert Auto-Rotating Image Carousel with Buttons for Slide Control Auto-Rotating Image Carousel with Tabs for Slide Control 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-owns`	Navigation Treeview
`aria-posinset`	Feed Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties
`aria-pressed`	Button (IDL Version) Button Toolbar
`aria-roledescription`	Auto-Rotating Image Carousel with Buttons for Slide Control Auto-Rotating Image Carousel with Tabs for Slide Control
`aria-rowcount`	Data Grid Layout Grid
`aria-rowindex`	Data Grid Layout Grid
`aria-selected`	Auto-Rotating Image Carousel with Tabs for Slide Control 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
`aria-sort`	Data Grid
`aria-valuemax`	Meter Horizontal Multi-Thumb Slider Slider with aria-orientation and aria-valuetext Color Viewer Slider Date Picker Spin Button
`aria-valuemin`	Meter Horizontal Multi-Thumb Slider Slider with aria-orientation and aria-valuetext Color Viewer Slider Date Picker Spin Button Toolbar
`aria-valuenow`	Meter Horizontal Multi-Thumb Slider Slider with aria-orientation and aria-valuetext Color Viewer Slider Date Picker Spin Button Toolbar
`aria-valuetext`	Horizontal Multi-Thumb Slider Slider with aria-orientation and aria-valuetext Date Picker Spin Button Toolbar