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 » détaillé dans les WAI-ARIA 1.1 Authoring Practices 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 est important d’associer techniquement le panneau au bouton qui le contrôle.

Cette association doit être déclarée 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">
  <p>[Contenu du panneau dépliant]</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