Exibir código-fonte para W3C Acessibility Examples

'''Accordion'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/accordion/accordion.html Accordion Example] demonstrates a form divided into three sections using an accordion to show one section at a time.

'''Alert'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/alert/index.html Alert Example]

'''Breadcrumb'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/breadcrumb/index.html Breadcrumb design pattern example]

'''Button'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/button/button.html Button] Examples of clickable HTML div and span elements made into accessible command and toggle buttons.

'''Checkbox'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/checkbox/checkbox-1/checkbox-1.html Simple Two-State Checkbox Example] Demonstrates a simple 2-state checkbox.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/checkbox/checkbox-2/checkbox-2.html 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'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/grid-combo.html ARIA 1.1 Combobox with Grid Popup] A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html 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'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/disclosure/disclosure-img-long-description.html Disclosure (Show/Hide) of Image Description]
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/disclosure/disclosure-faq.html Disclosure (Show/Hide) of Answers to Frequently Asked Questions]

'''Feed'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/feed/feed.html Example Implementation of Feed Pattern]

'''Grid'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/grid/LayoutGrids.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/grid/dataGrids.html Data Grid Examples] Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/grid/advancedDataGrid.html Advanced Data Grid Example] Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.

'''Link'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/link/link.html Link Examples] Link widgets constructed from HTML span and div elements.

'''Listbox'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-scrollable.html Scrollable Listbox Example] Single-select listbox that scrolls to reveal more options, similar to HTML select with size attribute greater than one.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html Collapsible Dropdown Listbox Example] Single-select collapsible listbox that expands when activated, similar to HTML select withthe attribute size="1".
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-rearrangeable.html 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'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html Modal Dialog Example]

'''Menu bar'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menubar/menubar-1/menubar-1.html Navigation Menubar Example] Demonstrates a menubar that provides site navigation.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menubar/menubar-2/menubar-2.html 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'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menu-button/menu-button-links.html Navigation Menu Button] A menu button made from an HTML a element that opens a menu of items that behave as links.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menu-button/menu-button-actions.html 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().
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menu-button/menu-button-actions-active-descendant.html 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'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html Radio Group Example Using Roving tabindex]
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-2/radio-2.html Radio Group Example Using aria-activedescendant]

'''Slider'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/slider/slider-1.html Horizontal Slider Examples] Demonstrates using three horizontally aligned sliders to make a color picker.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/slider/slider-2.html Slider Examples with aria-orientation and aria-valuetext] Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/slider/multithumb-slider.html Multi-Thumb Slider Examples] Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.

'''Table'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html Table Example] ARIA table made using HTML div and span elements.

'''Tabs'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/tabs/tabs-1/tabs.html Tabs With Automatic Activation ] A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/tabs/tabs-2/tabs.html Tabs With Manual Activation] A tabs widget where users activate a tab and display its panel by pressing Space or Enter.

'''Toolbar'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/toolbar/toolbar.html Toolbar Example] A toolbar that uses roving tabindex to manage focus and contains several buttons, including a menu button.

'''Treeview'''
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-1/treeview-1a.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-1/treeview-1b.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html 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.
* [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2b.html 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/

[[Category: Acessibility]]