Accordion Interface
Also known as: Accordion Widget, Collapsible Sections, Disclosure Widget
A user interface pattern that presents content in vertically stacked sections, each with a header that can be expanded or collapsed to show or hide the associated content. Accordions are particularly useful for accessibility because they allow users to navigate a hierarchical content structure without being overwhelmed by all the content at once. When properly implemented using ARIA attributes (aria-expanded, aria-controls), keyboard navigation (Enter/Space to toggle, Tab to move between headers), and semantic HTML, accordions provide an efficient way for screen reader users to browse organized content. The WAI-ARIA Authoring Practices provide a standard accordion pattern for accessible implementation.
Category: web accessibility · user interface · ARIA
Related: ARIA · Faceted Navigation · Screen Reader Navigation · Disclosure Widget