Skip to content

Patterns

Patterns
Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand

Read This First

No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why.

Filter Patterns

  • Accordion (Sections With Show/Hide Functionality)

    An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
  • Alert

    An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
  • Alert and Message Dialogs

    An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
  • Breadcrumb

    A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
  • Button

    A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  • Carousel (Slide Show or Image Rotator)

    A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
  • Checkbox

    WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
  • Combobox

    A combobox is an input widget that has an associated popup.
  • Dialog (Modal)

    A dialog is a window overlaid on either the primary window or another dialog window.
  • Disclosure (Show/Hide)

    A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
  • Feed

    A feed is a section of a page that automatically loads new sections of content as the user scrolls.
  • Grid (Interactive Tabular Data and Layout Containers)

    A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
  • Landmarks

    Landmarks are a set of eight roles that identify the major sections of a page.
  • Link

    A link widget provides an interactive reference to a resource.
  • Listbox

    A listbox widget presents a list of options and allows a user to select one or more of them.
  • Menu and Menubar

    A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
  • Menu Button

    A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
  • Meter

    A meter is a graphical display of a numeric value that varies within a defined range.
  • Radio Group

    A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
  • Slider

    A slider is an input where the user selects a value from within a given range.
  • Slider (Multi-Thumb)

    A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
  • Spinbutton

    A spinbutton is an input widget that restricts its value to a set or range of discrete values.
  • Switch

    A switch is an input widget that allows users to choose one of two values: on or off.
  • Table

    Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
  • Tabs

    Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
  • Toolbar

    A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
  • Tooltip

    A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
  • Tree View

    A tree view widget presents a hierarchical list.
  • Treegrid

    A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
  • Window Splitter

    A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.