Collapsible sections

Priority: 2

Introduction

Collapsible sections are one of the simpler interaction design primitives. All they do is toggle the appearance of the flow content they introduce. The advantage of having collapsed section in the first place is that the user is afforded an overview of the page structure without necessitating scrolling through large quantities of content.

Despite the simplicity, there are a number of provisions to ensure collapsible sections are accessible:

• The toggle button must behave as a <button> and have the button role (either implicitly, from the element, or via role="button")
• The button must not override the heading semantics; typically, it is provided as a child of the section’s main heading.
• The toggle button must toggle the aria-expanded state between true (expanded) and false (collapsed)
• The content in its collapsed state must not be available to screen readers and interactive content within it must not be focusable (display: none or the hidden property takes care of both of these)

WCAG criteria

• 1.3.1 Info and Relationships (level A)
• 4.1.2 Name, Role, Value (level A)

Scope of the issue

Of the samples in the Scope, only the Marketing site’s About → Careers page appears to be affected. However, collapsibles are a common interaction primitive and the advice to follow should be (broadly speaking) incorporated for any similar pattern.

Fixing the issue

HTML

The following represents the HTML expected in the collapsible section’s collapsed state.

In the expanded state, aria-expanded is switched to true and the hidden property is removed:

Demo

The following demo uses a simple bit of vanilla JavaScript, in ES5. It is believed that this would be most efficient on a static information site such as the Marketing site. It can, however, be converted as desired.