Disclosure (Show/Hide)
Definition
A Disclosure allows content to be either collapsed (hidden) or expanded (visible). A Disclosure has two parts: a button and a section of content whose visibility is controlled by the button. The button is often styled with a right-pointing arrow when the corresponding content is hidden and a down arrow when the content is visible.
One use case for a Disclosure would be to provide supplemental information for a complex image or graphic—especially when vertical screen space is limited. In this scenario, text indicating that there is additional information is contained in the Disclosure button, and the user can reveal the content. This pattern can be useful when a longer description than what can be conveyed in the alt text is needed to fully describe an image to those using accessible technologies.
Usage Guidelines
Use Disclosure when vertical real estate is limited or if the content contained in sections would cause excessive scrolling. Disclosures are useful for multiple scenarios, including cases where skimming headings would be the ideal way to search for information.
Focus Expectations
The Disclosure button has visible focus states.
Semantic Elements
button element (e.g. <button>)
ARIA Roles and Attributes
- The element that controls the visibility of the content is a
buttonelement - When the content is displayed, the
buttonelement must havearia-expandedset totrue - When the content is hidden,
aria-expandedshould be set tofalse - The element that contains the menu items displayed by activating the button has the role
menu - If the content includes a decorative icon, such as an arrow or caret, the icon is set to
aria-hidden - The
buttonelement hasaria-controlsset to theidof the element that contains the content (optional)
Keyboard Interactions
When focused on the Disclosure button:
- Enter or Space: toggles the visibility of the Disclosure content