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 aria-hidden="false">
  <p>[Contenu du panneau dépliant]</p>
</div>

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

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" aria-hidden="false">
  <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.

2 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

Ajouter un commentaire

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

Haut de page