Question Details

No question body available.

Tags

best-practices html accessibility wai-aria wcag

Answers (1)

July 23, 2026 Score: -1 Rep: 5 Quality: Low Completeness: 80%

Do not add aria-expanded to the native in this case; fix the details[open] + div structure instead. The native expanded/collapsed state comes from the parent element's open attribute, and activating toggles that state in the browser (HTML spec).

Your menu content is currently a sibling of , so it is only being shown visually by CSS. For a CSS-only native disclosure, make the disclosed content part of the element:


  Utility menu
  

No extra aria-expanded is needed for that native widget. The is the trigger/label, and the contents of are the disclosed content (MDN).

If the menu content must remain an external sibling, then / is the wrong primitive for that relationship. Use a custom disclosure control, normally a with aria-expanded and aria-controls pointing at the sibling content. In that version, scripting is unavoidable to keep aria-expanded synchronized; CSS can style based on attributes, but it cannot update the HTML attribute value.