Show / hide panels

Sommaire

Principle

Expand/collapse panels are dynamic components designed to optimize the display of content in limited spaces by means of an “expand/collapse” system.

They can be controlled by the user, usually by activating a button at the top of the panel.

Core HTML base

<button aria-expanded="true">[Label for the button]<button>
<div class="visible">
  <p>[Content of collapsed panel]</p>
</div>

ARIA roles, states and properties

The aria-expanded attribute should be added to the button which controls the panel. Its value is set based upon the state of the panel:

Keyboard interactions

Enter et Spacebar

When the keyboard focus is on the button, either of these keys will toggle the associated panel open or closed.

Expected behavior

Note

If the button is not located immediately before the show / hide panel, it is important to programmatically associate the panel with the button that controls it.

This association should be made explicit using the aria-controls attribute:

<button aria-expanded="true" aria-controls="expanded-panel">[Button label]<button>

[…]

<div id="expanded-panel" class="visible">
  <p>[Content of the expanded panel]</p>
</div>

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using it in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

  1. jQuery simple and accessible hide-show system (collapsible regions), using ARIA.

Comments

Add a comment

Required fields are marked *.

Updates

14 October 2019
Remove the request to use the aria-hidden attribute.
10 October 2019
Adding the mention “To do so, listen for the click event.”.

Back to top