Lab: components
Accessible components that work with a keyboard.
Tabs, a modal dialog and an accordion, written with plain HTML, CSS and a few lines of JavaScript. No framework, no plugin, nothing to keep patched.
Why it matters
Menus and pop-ups are where sites break.
Custom widgets are the most common place a business site becomes unusable for keyboard and screen-reader users: a pop-up that traps nobody, tabs that cannot be reached, a menu that cannot be closed. Getting them right protects your customers, your reputation and your legal position.
Tabs
Click a tab, or focus one and use the Left and Right arrow keys. Home and End jump to the first and last tab.
We review your current site, your customers and your goals, then agree a fixed quote before any work starts.
Pages are built mobile-first, tested on real screen sizes and checked automatically for accessibility and security.
Your site goes live on a global network with HTTPS, strict headers and no tracking, and you get training and documentation.
Modal dialog
Open the dialog, then press Tab repeatedly: focus stays inside. Escape or the close button closes it and returns focus here.
Accordion and live announcement
Each heading holds a button that reports whether it is expanded. Everything starts collapsed.
A rule that keeps keyboard focus inside an open dialog, so people never end up tabbing through hidden page content behind it.
Buttons are focusable, respond to Enter and Space and are announced correctly with no extra work. A clickable div needs all of that rebuilt by hand.
No. The behaviour here is a small script served from our own domain, which keeps the page fast and the security policy strict.
What is under the hood
- Tabs use the ARIA tab pattern:
role=tablist,aria-selected,aria-controlsand a rovingtabindexso only the active tab is in the Tab order. - The modal is a native
dialogopened withshowModal(), plus a Tab and Shift+Tab handler that wraps focus inside it. - The accordion toggles
aria-expandedand thehiddenattribute. - All of it is one script file on our own domain. No inline code, so the Content-Security-Policy can forbid it.