Panneaux dépliants

Sommaire

Principe.
Socle HTML.
Rôles, états et propriétés ARIA.
Interactions au clavier.
Comportements attendus.
Remarque.
Composants.

Principe

Les panneaux dépliants sont des composants dynamiques qui permettent d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système de « plier/déplier ».

Ils sont contrôlables le plus souvent via une action sur un bouton qui surplombe le contenu du panneau.

Cette fiche s’appuie sur le motif de conception « Disclosure (Show/Hide) » détaillé dans les ARIA Authoring Practices Guide (APG) du W3C.

Socle HTML

<button aria-expanded="true">[Intitulé du bouton]</button>
<div class="visible">
  <p>[Contenu du panneau dépliant]</p>
</div>

Rôles, états et propriétés ARIA

L’attribut aria-expanded doit être appliqué sur le bouton qui contrôle le panneau dépliant. Sa valeur doit être renseignée dynamiquement en fonction de l’état du panneau dépliant associé :

aria-expanded="true" lorsque le panneau est déplié.
aria-expanded="false" lorsque le panneau est plié.

Interactions au clavier

`Entrée` et `Espace`

Lorsque le focus clavier est positionné sur le bouton, affiche/masque alternativement le panneau dépliant associé.

Comportements attendus

Lorsque le focus clavier est positionné au niveau du bouton, il est possible de contrôler l’affichage/masquage du panneau associé avec les touches Espace et Entrée. Pour cela, passer par l’écoute de l’événement click.
Lorsque le panneau est plié, il doit être masqué avec display: none; et/ou visibility: hidden;.
La valeur de l’attribut aria-expanded doit être modifiée dynamiquement à chaque changement d’état du panneau dépliant.

Remarque

Dans le cas particulier où le bouton d’action n’est pas situé immédiatement avant le code HTML du panneau dépliant associé, il sera nécessaire de faciliter l’accès à ce panneau :

À l’activation du bouton, le focus est automatiquement déplacé dans le panneau dépliant associé :
- Au niveau du premier élément du panneau, si celui-ci est interactif,
- sinon, au niveau du conteneur du panneau (en y ajoutant l’attribut tabindex="-1" afin de le rendre focusable).
Lorsque le focus est dans le panneau et qu’il en ressort, il devra être placé :
- Au niveau du bouton qui a permis son ouverture, après avoir tabulé en arrière à la suite du premier élément interactif dans le panneau.
- Au niveau du prochain élément interactif situé immédiatement après le bouton qui a permis son ouverture dans le code HTML, après avoir tabulé en avant à la suite du dernier élément interactif dans le panneau.
Lors de l’ouverture du panneau, le raccourci Échap devra permettre de le refermer, en repositionnant le focus au niveau du bouton.
Associer le bouton à son panneau par l’intermédiaire de l’attribut aria-controls :
- Le panneau dépliant doit posséder un attribut id renseigné avec une valeur unique.
- Le bouton doit posséder un attribut aria-controls renseigné avec la valeur de l’attribut id du panneau dépliant associé.

<button aria-expanded="true" aria-controls="panneau-depliant">[Intitulé du bouton]</button>
[…]
<div id="panneau-depliant" class="visible" tabindex="-1">
  <p>[Contenu du panneau dépliant dont le premier élément n'est pas interactif]</p>
</div>

Composants

Ces composants « Panneaux dépliants » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

4 commentaires

Par Claire Bizingre, le 23 février 2016 à 14h53.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

Est-ce que la gestion de l’attribut aria-hidden sur le panneau dépliant est vraiment indispensable ?

Quand le contenu masqué est par exemple en display:none, pourquoi doit-on rajouter aria-hidden="true" ?

J’avoue ne pas trouver de justification.
Merci pour votre éclairage !

Répondre
Par Johan Ramon, le 24 février 2016 à 17h40.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour Claire,

Merci pour ton commentaire.

Dans les faits, à l’heure actuelle, effectivement, l’attribut aria-hidden="true" n’est pas indispensable car display: none; suffit à ne pas faire restituer les contenus cachés.

Toutefois, nous le préconisons :
- Pour coller aux pratiques des Design Pattern ARIA.
- Par sécurité car peut-être qu’à l’avenir les aides techniques restitueront les contenus masqués avec display: none;.
Johan

Répondre
Par jonathan, le 21 avril 2019 à 18h32.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour

J’ai un problème sur un menu de mon site web.

En version mobile lorsque je clic sur mon menu il passe de aria-expanded="false" à true

jusque la pas de problème

Cependant si j’ouvre le menu et que je scroll pour faire apparaître le menu sticky (en tête collante) les attributs false et true s’inverse

Merci du retour

Répondre
- Par Sébastien Delorme, le 22 avril 2019 à 10h31.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour,
  
  Cet espace de commentaires est dédié aux échanges à propos de l’accessibilité et des recommandations AcceDe Web.
  Je ne suis pas sûr de pouvoir vous aider, car si je comprends bien, il s’agit dans votre cas d’un bug sur le développement de votre script (ou du script que vous utilisez).
  
  Si vous utilisez un composant tiré d’un framework ou d’une librairie, l’idéal est de contacter directement les développeurs de celui-ci.
  
  S’il s’agit de votre propre script, je ne peux que vous conseiller de montrer un exemple concret et présenter votre problème sur un forum d’entraide.
  
  Bien à vous,
  Sébastien Delorme
  
  Répondre