Component Library

Expandable elements do not announce state to assistive technology.

Expanded elements do not take focus when a menu is expanded.

Expanded content is not announced to assistive technology.

When a menu is opened, it's expanded state should change to true, it's hidden state changes to false, and focus should move to the first menu option that isn't disabled.

Expandable sections should be labeled as interactive elements using ARIA markup to instruct users to click to expand and collapse.

When the state of expandable content is toggled, it should be announced via assistive technology.

• Use the <aria-expanded> state to indicate whether regions of the content are collapsible.
• Hide collapsed content with <aria-hidden>, toggling it's state with javascript.
• Announce displayed content when it is displayed visually to AT using <aria-live="polite">. Announce only content toggled using <aria-atomic="true">, rather than reading the entire page again.

https://accessibility.huit.harvard.edu/technique-expandable-sections