A disclosure widget is a control whose sole purpose is to show and hide content.

It is typically implemented as a buton...

The default markup is enhanced using JavaScript so that the buttons are added to the headings. The buttons should NOT be in the headings by default. The markup should always consider what the component or content would look like if no Javascript is enabled and therefore the accordion is not functional. The content is most likely going to be all visible — either as a series of panels with headings or a definition list, depending on the type of content.

The buttons need to specify which panels they control using aria-controls, and they need to reflect the state of the panel (collapsed/expanded) using aria-expanded="true/false". The panel itself also should have aria-hidden set to true or false if it is hidden or shown, respectively.

The accordion needs to be able to trap keyboard focus when the user is IN the accordion and uses the arrow keys to traverse the items in it. Tabbing out of the accordion must be enabled.

You can allow one or more panels to be always collapsed or expanded. You can also set a panel to be open by default (e.g. the first one). All this functionality can be tied to the markup using data attributes as flags.