Which approach correctly uses ARIA to convey the expanded/collapsed state of a collapsible control?

Prepare for the CSS Mastery SAD Maintenance and CSA Stand Ups Test. With flashcards and multiple choice questions, ready yourself for the exam with hints and explanations for every question. Ace your exam today!

Exposing whether a collapsible panel is open or closed to assistive technologies relies on a dedicated ARIA state on the control. The correct approach is to put aria-expanded on the element that toggles the content and have it reflect the current state (true when expanded, false when collapsed). This gives screen readers an explicit, dynamic indicator of the panel’s status, regardless of how the content is styled with CSS. It’s important that the controlling element remains keyboard accessible, typically by using a real button (or an element with proper button semantics and keyboard handling) so users can toggle the state without a mouse.

Linking the control to the region with aria-controls can also help AT users understand what is being toggled, and you can manage the region’s visibility with CSS while keeping its state synchronized. Using aria-hidden to represent expanded state isn’t appropriate because it hides or reveals content from assistive technologies rather than communicating the current state. Relying on CSS alone doesn’t convey state to AT, and aria-label on all elements would be error-prone and wouldn’t reliably reflect the dynamic open/closed status.