Accessible Components

Disclosure (Show/Hide)

Disclosure (Show/Hide) imageDisclosure (Show/Hide) imageDisclosure (Show/Hide) image


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.

Sparkbox logo

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 button element
  • When the content is displayed, the button element must have aria-expanded set to true
  • When the content is hidden, aria-expanded should be set to false
  • 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 button element has aria-controls set to the id of 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