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.