A disclosure trigger must be keyboard operable

Rule disclosure-trigger-operable · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A show/hide control carries aria-expanded. If that control is a non-focusable element (a plain span or div), keyboard and screen-reader users cannot operate it.

How to fix#

Use a <button> for the trigger, or make it focusable (tabindex="0") with role="button" and key handlers.

Example#

<span aria-expanded="false">Details</span>

<button aria-expanded="false">Details</button>

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Disclosure