Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content. They can be helpful accessibility aids as they give users the choice of revealing content to read it, or bypassing the content, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices.
To ensure that they are accessible, it's important that expandable sections are coded so that their state (expanded or collapsed) and the relationship between the toggle button and the expandable content are established programmatically.
It's also important to ensure that the toggle functionality can be operated using the keyboard. This means including the toggle button in the focus order and supporting standard keyboard shortcuts (spacebar and Enter) to activate the button.
Example
This code example shows the collapsed state. Note the aria-controls
relationship attribute that establishes the relationship between the toggle button and the content (through the content’s id
). Also note that the aria-expanded
state attribute is set to false and, correspondingly, aria-hidden
is set to true.
<h3> <button
data-action="disclosure"
aria-controls="section-name" aria-expanded="false">Title of section</button> </h3> <p id="section-name" aria-hidden="true">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>
This code example shows the expandable section in its expanded state. Note the change in the aria-expanded
and aria-hidden
values.
<h3>
<button data-action="disclosure" aria-controls="section-name" aria-expanded="true">Title of section</button>
</h3>
<p id="section-name" aria-hidden="false">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>
✗ Bad example
In this example, the <h3>
has been used as the toggle element. The <h3>
element is not a natively interactive element, and so there's no way to focus it with a keyboard.
<h3 aria-controls="section-name" aria-expanded="true">Title of section</h3>
<p id="section-name" aria-hidden="false">Section content tincidunt turpis nec ultrices tristique. Aliquam bibendum metus dignissim dui placerat, sed porta urna blandit. Ut condimentum magna sit amet nulla finibus vestibulum.</p>
Code editor
Code editor for the expandable pattern as a jQuery plugin (external link)
See the Pen expandable section with jQuery plugin by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.