Accessibility for working web devs
See it.
Hear it.
Copy it.
A library of accessible web patterns — each demonstrated, narrated by a screen reader, and ready to paste into your codebase. Plus a playground that audits your markup in seconds.
- Patterns
- 12
- Reviewed
- 12
- WCAG SCs covered
- 16
What you get on every pattern page
-
A working demo
The pattern, live, in the page. Tab into it. Activate it. See the focus ring move.
-
Keyboard map + screen-reader transcript
The exact keys that operate it, and a row-by-row record of what VoiceOver announces.
-
The anti-pattern, named
The same component done wrong — usually a div pretending — with the failure modes called out.
-
Source you can paste
Vanilla HTML/CSS/JS, copyable in one click. Linked WCAG SCs in the footer.
A few of the patterns
See all 12 →-
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
More on the site
-
Playground
Paste markup or a URL. We run axe-core in your browser and link every issue to the pattern that fixes it.
-
Showcase
A four-page mini-site for a fictional product, built to WCAG AAA. Toggle the “a11y x-ray” to see the seams.
-
Methodology
How patterns get reviewed before they’re marked as such. The checklist, the tooling, the known gaps.