Accordion keyboard interactions
Each accordion is a single tab stop. Space or Enter keys expand or collapse accordions, which are collapsed by default. Interactive elements within expanded accordions integrate into the tab order automatically.
accordion/accessibility
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Accordion chevron state handling
The collapsed or expanded state of accordion chevrons is programmatically set by default, eliminating the need for designers to provide text equivalents for the chevron icons.
Accordion headings annotation requirement
Carbon accordions are not set as headings by default. For improved accessibility, designers should annotate accordions as headings on their first occurrence in a product, including the appropriate heading level (such as H1 or H2).
Accordion chevron alignment for accessibility
Carbon chevrons are right-aligned by default, but left-aligned chevrons are more accessible for users with low vision, as the expanded/collapsed indicator is closer to the accordion title. Designers should annotate if left-aligned chevrons are needed.
Accordion button ARIA attributes
The accordion header has a role of `<button>`, with an `aria-expanded` attribute set to 'true' or 'false'. The button has an `aria-controls` property set to the unique id of the panel it controls.
Accordion list structure for screen readers
Since accordions are typically grouped together, Carbon places each button inside a list item in an unordered list, which provides additional context to screen reader users. When only one accordion is used, it should not be put in a list.
Accordion headings with ARIA roles
When accordion titles are used as headings, the buttons are wrapped in an element with an appropriate heading level. ARIA can be used to set both the heading role and the level via the `aria-level` attribute.