Disclosure

Pattern

A disclosure widget is the simplest case of progressive disclosure: a button that toggles whether its associated content is visible. Native HTML <details>/<summary> implements the pattern.

Roles

• button

States and properties

aria-expanded

On the button.

aria-controls

On the button, pointing at the disclosed region.

Keyboard interaction

Enter or Space

Toggle disclosure.

WCAG criteria

• 2.1.1 — Keyboard

Canonical reference

WAI-ARIA Authoring Practices Guide — Disclosure

More

• All patterns
• WidgetPatternAnalyzer — the analyser that validates these patterns.
• Back to Paradise