Show / hide panels
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interactions.
- Expected behavior.
- Examples of components.
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
ARIA roles, states and properties
aria-expanded attribute should be added to the button which controls the panel. Its value is set based upon the state of the panel:
aria-expanded="true"when the associated panel is open.
aria-expanded="false"when the associated panel is closed.
Enter et Spacebar
When the keyboard focus is on the button, either of these keys will toggle the associated panel open or closed.
- When the focus is on the button, the panel can be opened or closed using the Spacebar and Enter. To do so, listen for the
- When the panel is closed, it should be hidden with
- The value of the
aria-expandedattribute should be modified dynamically each time the state of the associated panel is updated.
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
- The show / hide panel should have an
idattribute set to a unique value.
- The button that controls it should have the
aria-controlsattribute set to the value of the show / hide panel
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.