Accessible Web Patterns

An accordion allows users to expand and collapse a section of content as needed.

An alert is a message that communicates important feedback to the user in response to an action or event.

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

A button triggers an action or event when activated.

A card is a container that groups related information and actions about a single subject into a compact block.

A carousel cycles through a sequence of content panels within a single compact section.

A checkbox allows users to select or deselect an option. It can also be applied to create an on/off switch.

A combobox is an input control that displays a dropdown list of options.

A dialog is a window overlaid on the page that interrupts the user's flow to request input or display important information.

A form is a section containing interactive controls that collect input from the user.

An input group is a set of related form controls grouped together under a shared label.

Landmarks are used to designate major sections of a webpage.

A link navigates the user to another location.

A navigation menu lists the links to the main pages of a website.

Pagination allows users to navigate between pages of content, one page at a time.

A slider allows users to select a numeric value within a defined range by dragging a handle along a track.

A spinbutton is a numeric input that lets users type a value or adjust it with increment and decrement controls.

A stepper guides users through a multi-step process by displaying all steps and indicating progress.

A table organizes data into rows and columns.

Tabs organize content into multiple panels, of which only one is visible at a time.

A text input is a basic form control that allows users to enter freeform text.

A tooltip is a small popup that provides supplementary information about an element.