Accessible HTML 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 button triggers an action or event when activated.

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

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

An input field is a form control that allows users to enter or select a value.

A link navigates the user to another location.

Landmarks are used to designate major sections of a webpage.

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 stepper guides users through a multi-step process by displaying all steps and indicating progress.

A table organises data into rows and columns.

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

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