Panneaux dépliants

Sommaire

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 par l’utilisateur, le plus souvent via une action sur un bouton qui surplombe le contenu du panneau.

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é :

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

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 :

<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

Les composants ci-après 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, variables en fonction de la version utilisée.

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

4 commentaires

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

    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.

    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.

    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.

      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

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Mises à jour

14/10/2019
Suppression de la demande d’utilisation de l’attribut aria-hidden.
10/10/2019
Ajout de la mention « Pour cela, passer par l’écoute de l’événement click. ».

Haut de page