Accordion

The discrimination here is arithmetic, and it is worth getting right because three words sit on top of each other. One header over one region is a disclosure, and it answers to nobody: nothing on the page coordinates it. A stack of those headers, presented as one component with one set of rules, is an accordion. And progressive disclosure is neither of them, it is the principle both can serve, the decision about what waits behind a second step at all. You can build progressive disclosure with an accordion, with a wizard, or with a link to another page.

The policy question every accordion has to answer is whether more than one section may be open at once. The instrument the name comes from could only be in one shape at a time, and early implementations followed it: opening a section closed whichever one was open. Most now allow any number, and that is usually the better default, because forcing single-open takes something real away from the reader. They can no longer put two sections side by side and compare them, and the section they were reading vanishes because they opened a different one. Keep single-open for the cases where the sections are genuinely alternatives rather than parts of one document, and where losing the previous section costs nothing.

The markup is a list of header buttons, each carrying aria-expanded and an aria-controls pointing at the region it owns, with the region hidden outright rather than merely made transparent. Each header is its own tab stop, and the ARIA Authoring Practices Guide treats arrow keys between headers as optional rather than required, which is the opposite of tabs: a tab set is one stop with arrows inside it, while an accordion is a plain stack of buttons that Tab walks through. The rotating chevron is the visual half of aria-expanded and never a substitute for it. An expandable row is the same mechanism inside a table, where the revealed content belongs to one row of data rather than to a section of a page.

Two things go wrong in practice. The first is that an accordion sitting inside a page that already has few sections is just a page with its content hidden: if almost everyone opens almost everything, the stack was a table of contents with an extra click. The second is the animation. Growing a section to fit its content is the exact problem height animation is about, and the cheap fix, a transition on max-height to a guessed maximum, is why so many accordions finish their open early and snap the rest of the way.