Skip to content

Accordion > Update accordion trigger semantics

The following was discovered during the initial accessibility audit for accordions &5663 (closed).

Problem

  • Without JS/CSS the content has no meaningful hierarchy. The current markup structure needs updated.
  • The button is not contained within a heading element.

Solution

  • Per the authoring practices, a heading element should contain the button that triggers the accordion.
  • “Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.” https://inclusive-components.design/collapsible-sections/ has a great suggestion for making sure the heading level is correct for where the accordion is within the page.
Edited by Jeremy Elder