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
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/ouvisibility: 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’attributid
du panneau dépliant associé.
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
-
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 rajouteraria-hidden="true"
?J’avoue ne pas trouver de justification.
Merci pour votre éclairage ! -
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 cardisplay: 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
-
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
ettrue
s’inverseMerci du retour
-
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
-