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