Skip to content

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.

  • 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.
  • Checkbox

    WAI-ARIA supports two types of checkbox widgets: dual-state allows the user to toggle between two choices -- checked and not checked -- and tri-state supports an additional third state known as partially checked.
  • Combobox

    A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values.
  • 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.
  • Grids : 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 provide a powerful way to identify the organization and structure of a web page.
  • Listbox

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

    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.
  • 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 is a slider with two or more thumbs that each set a value in a group of related values.
  • 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 Widget

    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/.