Section A
Patterns
A growing library of accessible components — each with a working demo, the keyboard shortcuts that operate it, a transcript of what a screen reader announces, and code you can paste straight into your project.
-
Button
A control that triggers an action. The bedrock pattern — get this wrong and assistive tech can’t reach the rest of your interface.
Reviewed against the methodology checklist Updated
-
Link vs button
Buttons do, links go. Picking the wrong one breaks keyboard model, screen-reader announcement, and right-click expectations all at once.
Reviewed against the methodology checklist Updated
-
Modal dialog
A focused, interruptive layer over the page. Uses the native <dialog> element so focus, Escape, and backdrop inertness all just work.
Reviewed against the methodology checklist Updated
-
Form field with validation
A label, an input, a hint, an error message — wired together so screen readers announce them all when focus lands on the field.
Reviewed against the methodology checklist Updated
-
Tabs
A row of selectors that swap a single panel of content. Keyboard model is what trips most implementations — Tab moves into and out of the tabs, arrow keys move between them.
Reviewed against the methodology checklist Updated
-
Skip link
A first-focusable link that lets keyboard users jump past long, repeated navigation. Cheap to add, expensive to live without.
Reviewed against the methodology checklist Updated
-
Accordion
Vertically stacked headers that expand and collapse the content beneath them. The native <details> element is the answer for almost every case — keyboard, ARIA, and state announced for free.
Reviewed against the methodology checklist Updated
-
Tooltip
A short, supplementary description for an interactive control. Visible on hover and focus, dismissable, and never the only place an essential piece of information lives.
Reviewed against the methodology checklist Updated
-
Toast notification
A brief, dismissable status message that appears in response to an action and disappears on its own. The trick is announcing it to assistive tech without ripping focus away from what the user was doing.
Reviewed against the methodology checklist Updated
-
Menu (button-triggered)
A button that reveals a list of actions. Different from a navigation list — menus require a specific keyboard model and ARIA wiring most implementations get wrong.
Reviewed against the methodology checklist Updated
-
Data table
Tabular data with column headers, row headers, a caption, and optional sorting. Use the native <table> element — div-grids never quite match it for AT.
Reviewed against the methodology checklist Updated
-
Combobox / autocomplete
A text input with a dynamic popup list. Users can type freely or pick from suggestions. The most-fudged ARIA pattern in 2026 — and the one with the most legitimate complexity.
Reviewed against the methodology checklist Updated