Show / hide panels
Summary
- Principle.
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interactions.
- Expected behavior.
- Note.
- Components.
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.
This code is based on the “Disclosure (Show/Hide)” design pattern found in ARIA Authoring Practices Guide (APG) of the W3C.
Core HTML base
ARIA roles, states and properties
The aria-expanded
attribute must be added to the button which controls the panel. Its value is must be dynamically set based upon the status of the associated expanded panel:
aria-expanded="true"
when the associated panel is open.aria-expanded="false"
when the associated panel is closed.
Keyboard interactions
Enter and Spacebar
When the keyboard focus is on the button, either of these keys will toggle the associated panel open or closed.
Expected behavior
- When the focus is on the button, the panel can be opened or closed using the Spacebar and Enter keys. To do so, listen to the
click
event. - When the panel is closed, it must be hidden with
display: none;
and/orvisibility: hidden;
. - The value of the
aria-expanded
attribute must be modified dynamically each time the state of the associated panel is updated.
Note
If the action button is not located immediately before the HTML code of the associated expanded 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:
- The show / hide panel must have an
id
attribute set to a unique value. - The button that controls it must have the
aria-controls
attribute set to the value of the show / hide panelid
attribute.
Components
The “Expandable panel” components are shown here because their level of accessibility is considered good or very good.
However, before using it in your project, it is important to check for compliancy with the specifications presented above. Depending on the version used, the components may need some adjustments before they can be used in your project.