Frequently Asked Questions
Click any question to reveal the answer.
-
An accessible accordion is a UI pattern that allows users to show and hide sections of content. It is built with semantic HTML elements — typically
<button>elements as headers — and uses ARIA attributes such asaria-expandedandaria-controlsto communicate state to assistive technologies like screen readers.Proper keyboard navigation is also essential: users should be able to operate every accordion panel using only the keyboard, without requiring a mouse or touch input.
-
Using a native
<button>element gives you a host of accessibility and usability benefits for free. It is automatically focusable via the Tab key, it fires click events when the user presses Enter or Space, and screen readers announce it as an interactive control without any extra ARIA roles needed.A
<div>or<span>has none of these behaviours by default. You would have to addtabindex="0",role="button", and manual keyboard listeners — recreating what the browser already does natively. Always prefer the right HTML element for the job. -
This particular implementation relies on a small amount of JavaScript to toggle the
aria-expandedattribute and show or hide the answer panels. Without JavaScript, the accordion buttons would be present but non-functional.A progressive-enhancement approach would render all panels visible by default (in the no-JS state) and use JavaScript to progressively layer on the collapse/expand behaviour. For this self-contained demo, JavaScript is assumed to be available.
-
Yes! This accordion allows multiple panels to be open simultaneously. Each button independently toggles its own panel without affecting any other items. This is often the preferred pattern for FAQ pages because users can compare multiple answers at once.
An alternative pattern — sometimes called an "exclusive accordion" — collapses all other panels whenever a new one is opened, ensuring only one panel is ever visible. Which pattern you choose depends on the content and the needs of your users.