Sandbox
My sandbox of accessible patterns
Carousels, tabs, modal dialogs or dropdown menus: here I experiment with interactive patterns and share them, to help you design accessible interfaces, even in the most complex cases.
Native HTML first
Why rebuild in JavaScript what the browser already knows how to do? In this sandbox, I explore what native HTML can do to build accessible components. I rely on the behaviors built into the browser, and keep JavaScript and ARIA attributes to what each pattern needs.
Documented like a Design System
Each pattern comes with an interactive demo and technical documentation: source code, expected keyboard behavior, focus management and ARIA attributes when needed.
The goal is to give you concrete examples, easy to understand, test and reuse in your projects.
The building blocks
The flip card
A native button flips the card, and the hidden side stays hidden from screen readers too.
Built with: details and summary
The filters
Each filter says how many articles it keeps, before you even check it.
Built with: Radio buttons and :has()
The carousel
A list that scrolls with 2 arrows, with no autoplay, that the keyboard moves through card by card.
Built with: scroll-snap and buttons
The tabs
A single tab stop on the list, and the arrow keys to change tabs, as the APG describes.
Built with: tab, tablist and tabpanel
The accordion
An FAQ where each question is a heading and a button, and opens from the keyboard.
Built with: h3, button and aria-expanded
The modal dialog
Focus moves into the dialog and back to the button when it closes, with no script in recent browsers.
Built with: dialog and command
The dropdown menu
Links that stay plain links, with no menu role, in a list that Escape closes.
Built with: popover