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.
The Disclosure button has visible focus states.
button element (e.g.
ARIA Roles and Attributes
- The element that controls the visibility of the content is a
- When the content is displayed, the
buttonelement must have
- When the content is hidden,
aria-expandedshould be set to
- The element that contains the menu items displayed by activating the button has the role
- If the content includes a decorative icon, such as an arrow or caret, the icon is set to
aria-controlsset to the
idof the element that contains the content (optional)
When focused on the Disclosure button:
- Enter or Space: toggles the visibility of the Disclosure content