W3C Acessibility Examples

W3C Acessibility Examples

Accordion

• Accordion Example demonstrates a form divided into three sections using an accordion to show one section at a time.

Alert

• Alert Example

Breadcrumb

• Breadcrumb design pattern example

Button

• Button Examples of clickable HTML div and span elements made into accessible command and toggle buttons.

Checkbox

• Simple Two-State Checkbox Example Demonstrates a simple 2-state checkbox.
• Tri-State Checkbox Example Demonstrates how to make a widget that uses the mixed value for aria-checked and group collection of checkboxes with a field set.

Combobox

• ARIA 1.1 Combobox with Listbox Popup Comboboxes that demonstrate the various forms of autocomplete behavior using a listbox popup and use the ARIA 1.1 implementation pattern.
• ARIA 1.1 Combobox with Grid Popup A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
• ARIA 1.0 Combobox with Both List and Inline Autocomplete A combobox that demonstrates the autocomplete behavior known as list with inline autocomplete and uses the ARIA 1.0 implementation pattern.
• ARIA 1.0 Combobox with List Autocomplete A combobox that demonstrates the autocomplete behavior known as list with manual selection and uses the ARIA 1.0 implementation pattern.
• ARIA 1.0 Combobox Without Autocomplete A combo box that demonstrates the behavior associated with aria-autocomplete=none and uses the ARIA 1.0 implementation pattern.

Disclosure

• Disclosure (Show/Hide) of Image Description
• Disclosure (Show/Hide) of Answers to Frequently Asked Questions

Feed

• Example Implementation of Feed Pattern

Grid

• Layout Grid Examples Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
• Data Grid Examples Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.
• Advanced Data Grid Example Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.

Link

• Link Examples Link widgets constructed from HTML span and div elements.

Listbox

• Scrollable Listbox Example Single-select listbox that scrolls to reveal more options, similar to HTML select with size attribute greater than one.
• Collapsible Dropdown Listbox Example Single-select collapsible listbox that expands when activated, similar to HTML select withthe attribute size="1".
• Example Listboxes with Rearrangeable Options Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.

Modal

• Modal Dialog Example

Menu bar

• Navigation Menubar Example Demonstrates a menubar that provides site navigation.
• Editor Menubar Example Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.

Menu button

• Navigation Menu Button A menu button made from an HTML a element that opens a menu of items that behave as links.
• Action Menu Button Example Using element.focus() A menu button made from an HTML button element that opens a menu of actions or commands where focus in the menu is managed using element.focus().
• Action Menu Button Example Using aria-activedescendant A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.

Radio group

• Radio Group Example Using Roving tabindex
• Radio Group Example Using aria-activedescendant

Slider

• Horizontal Slider Examples Demonstrates using three horizontally aligned sliders to make a color picker.
• Slider Examples with aria-orientation and aria-valuetext Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.
• Multi-Thumb Slider Examples Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.

Table

• Table Example ARIA table made using HTML div and span elements.

Tabs

• Tabs With Automatic Activation A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.
• Tabs With Manual Activation A tabs widget where users activate a tab and display its panel by pressing Space or Enter.

Toolbar

• Toolbar Example A toolbar that uses roving tabindex to manage focus and contains several buttons, including a menu button.

Treeview

• File Directory Treeview Example Using Computed Properties A file selector tree that demonstrates browser support for automatically computing aria-level, aria-posinset and aria-setsize based on DOM structure.
• File Directory Treeview Example Using Declared Properties A file selector tree that demonstrates how to explicitly define values for aria-level, aria-posinset and aria-setsize.
• Navigation Treeview Example Using Computed Properties A tree that provides navigation to a set of web pages and demonstrates browser support for automatically computing aria-level, aria-posinset and aria-setsize based on DOM structure.
• Navigation Treeview Example Using Declared Properties A tree that provides navigation to a set of web pages and demonstrates how to explicitly define values for aria-level, aria-posinset and aria-setsize.

Reference: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/