Which approach enables a CSS-only dropdown to be accessible and keyboard-operable?

Which approach enables a CSS-only dropdown to be accessible and keyboard-operable?

• A. Convert dropdown to a simple anchor menu with no state management.
• B. Hide the dropdown behind display:none until hovered.
• C. A pattern using a checkbox or details/summary with ARIA roles and aria-expanded attributes.
• D. Use JavaScript to handle keyboard events and focus.

Answer: (C)

Accessibility and keyboard operability in a CSS-only dropdown come from using a native, keyboard-friendly toggle that can communicate its state to assistive technologies. Using a checkbox (or the details/summary element) gives you a control that is focusable and operable with the keyboard (space/enter), and CSS can reflect the toggle state (for example, showing the menu when the checkbox is checked). With details/summary, the element provides built-in disclosure semantics and keyboard support, so expanding and collapsing the panel is natural for users, and ARIA attributes (like aria-expanded) can communicate state when you’re augmenting semantics. This approach keeps the interaction CSS-only while ensuring assistive tech can understand and announce the state and the relationship between the control and the dropdown. Hiding the dropdown with display: none until hover won’t be accessible to keyboard users or screen readers, because hover is not reliably available and the hidden content won’t be announced or operable via keyboard. A simple anchor menu with no state management lacks a real toggle for opening/closing. Relying on JavaScript to handle keyboard events breaks the CSS-only constraint, defeating the scenario.

Accessibility and keyboard operability in a CSS-only dropdown come from using a native, keyboard-friendly toggle that can communicate its state to assistive technologies. Using a checkbox (or the details/summary element) gives you a control that is focusable and operable with the keyboard (space/enter), and CSS can reflect the toggle state (for example, showing the menu when the checkbox is checked). With details/summary, the element provides built-in disclosure semantics and keyboard support, so expanding and collapsing the panel is natural for users, and ARIA attributes (like aria-expanded) can communicate state when you’re augmenting semantics. This approach keeps the interaction CSS-only while ensuring assistive tech can understand and announce the state and the relationship between the control and the dropdown.

Hiding the dropdown with display: none until hover won’t be accessible to keyboard users or screen readers, because hover is not reliably available and the hidden content won’t be announced or operable via keyboard. A simple anchor menu with no state management lacks a real toggle for opening/closing. Relying on JavaScript to handle keyboard events breaks the CSS-only constraint, defeating the scenario.