Skip to main content
Normal UI

Organisms

Distinct sections of an interface, built from molecules and atoms, often with their own state and keyboard model: tabs, a data grid, a dialog.

Actions

Dialog
Opening and closing a dialog with invoker commands: commandfor names the target and command names the action (show-modal, close, request-close, toggle-popover, or a custom --name).
Menubar
An application-style menu bar: role="menubar" holding role="menuitem"s that open role="menu" popups, with menuitemcheckbox and menuitemradio items.
Toolbar
A group of controls for one target: role="toolbar" with an aria-label, holding toggle buttons (aria-pressed) and ordinary buttons.

Navigation

Command palette
A searchable list of every place and action, opened with Ctrl+K (Cmd+K on a Mac): type a few letters, press Enter.
Table of contents
An "On this page" list of links that highlights the section in view, with no script: scroll-target-group: auto turns the links into scroll markers, and :target-current styles the current one.
Tabs
The ARIA tabs pattern: a role="tablist" of <button role="tab">s, each controlling a role="tabpanel".
Tree view
A hierarchy people can expand and collapse: role="tree" of role="treeitem"s, with nested role="group" lists.

Status

Alert dialog
A modal dialog that interrupts to ask about something urgent: <dialog role="alertdialog"> opened with showModal().

Disclosure

Accordion
The APG accordion: each section header is a heading containing a <button aria-expanded aria-controls>, and each panel is a role="region" labelled by its button.

Content

Card
A container for related content, such as a form, a list or a summary.
Carousel
The APG basic carousel: a <section aria-roledescription="carousel"> of role="group" slides, each labelled "1 of 3", with Previous and Next (square ‹ › buttons named "Previous slide" and "Next slide") and a rotation button.
Feed
A scrolling list of articles that grows as people read: role="feed" containing focusable <article>s with aria-posinset and aria-setsize.
Scroll carousel
A carousel made with CSS only: a horizontally scrolling, snapping list.

Data

Grid
An interactive table: <table role="grid"> where one cell at a time is focusable and the arrow keys move between cells.
Table
A <table> with collapsed 1px rule borders and 4px 8px cell padding, replacing the default 2px spacing and 1px padding.
Treegrid
A table whose rows nest: <table role="treegrid"> with aria-level, aria-posinset, aria-setsize and aria-expanded on rows.

Layout

Window splitter
A movable divider between two panes: a focusable role="separator" with aria-valuenow (the first pane's size in percent), aria-valuemin, aria-valuemax and aria-controls.