Accessible component patterns
The argument of this website is simple: accessibility and good design are not opposites. You can try every component below live, read why it works for people using a keyboard, a screen reader or a high level of zoom, and copy its code.
All the components are built on standard web technologies with no frameworks: they are self-contained web components that progressively enhance HTML that also works without JavaScript. Each follows a pattern from the WAI-ARIA Authoring Practices Guide (external link), and we list the WCAG 2.2 success criteria it demonstrates in practice.
These pages are written for people who make decisions about a product, not for developers. If you need technical detail, every component has accompanying documentation in this website's repository.
-
Disclosure navigation
Main navigation that collapses behind a Menu button on narrow screens, announces its state, closes with Escape, and without JavaScript simply stays visible.
- 2.1.1 Keyboard
- 2.1.2 No Keyboard Trap
- 2.4.1 Bypass Blocks
-
Dialog
A modal window on the native dialog element: the rest of the page is inert, focus stays inside, and closing it returns focus to where it came from.
- 1.3.1 Info and Relationships
- 1.4.10 Reflow
- 2.1.2 No Keyboard Trap
-
Tabs
Tabs with arrow-key switching, a single stop in the Tab order, and a choice between automatic and manual activation.
- 1.3.1 Info and Relationships
- 2.1.1 Keyboard
- 2.4.3 Focus Order
-
Accordion
Expandable sections built on the native details and summary elements, with an “only one open at a time” mode and animated opening.
- 1.3.1 Info and Relationships
- 2.1.1 Keyboard
- 2.3.3 Animation from Interactions
-
Search
A search field as a combobox: results appear as you type, arrow keys move through them, and without JavaScript the form leads to the site map.
- 1.3.1 Info and Relationships
- 2.1.1 Keyboard
- 2.4.5 Multiple Ways
-
Status messages
Short notices a screen reader reads without interrupting your work: the timer pauses while you're pointing at or focusing the message.
- 4.1.3 Status Messages
- 2.2.1 Timing Adjustable
- 2.2.4 Interruptions
-
Tooltip
An explanation that appears on mouse hover and on keyboard focus, can be closed with Escape, and doesn't disappear while you're pointing at it.
- 1.4.13 Content on Hover or Focus
- 1.3.1 Info and Relationships
- 2.1.1 Keyboard
-
Theme toggle
A three-state choice of light, dark or system appearance as a native radio group, with the choice remembered and the change announced.
- 1.4.3 Contrast (Minimum)
- 1.4.11 Non-text Contrast
- 1.3.1 Info and Relationships
-
Chart
A bar chart in SVG with a name, a summary and a full data table, which distinguishes its bars by pattern as well as colour, so it works in black and white.
- 1.1.1 Non-text Content
- 1.4.1 Use of Color
- 1.4.3 Contrast (Minimum)
-
Cookie banner
A cookie banner that doesn't steal focus or get in the way, closes with Escape, and lets you change your choice any time. No plugin, no cookies before consent.
- 2.4.3 Focus Order
- 2.1.2 No Keyboard Trap
- 2.4.11 Focus Not Obscured (Minimum)