vous êtes ici

Une interaction très courante consiste à afficher ou cacher du contenu au moyen d'un bouton. Quelques exemples:

  • Une page FAQ, où chaque question est un bouton qui permet d'afficher ou cacher la réponse :

    module FAQ avec 4 questions et une réponse affichée

  • Un bouton hamburger qui permet d'afficher ou cacher le menu mobile:

    Le site Ancienne Belgique avec menu mobile caché Le site Ancienne Belgique avec menu mobile affiché

  • Un simple menu déroulant qui affiche ou cache un élément ou une liste d'éléments:

    sous-menu tourisme affiché

Dans les exemples ci-dessus, quand le focus se trouve sur l'élément qui déclenche l'affichage de contenu, un utilisateur de lecteur d'écran ne voit pas si le contenu est affiché ou caché. C'est là que l'attribut aria-expanded est utile.

Placez l'attribut sur l'élément qui déclenche l'action, en général un bouton. Par exemple pour le FAQ:

<button aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>

Synchronisez la valeur de l'attribut (aria-expanded="false" or "true") avec l'état visuel du composant (ouvert ou fermé).

Ne placez pas l'attribut sur le contenu affiché/caché mais sur l'élément déclencheur. C'est une erreur assez courante.

L'attribut aria-expanded est vocalisé par un lecteur d'écran: en français NVDA annonce 'réduit' ou 'développé'. Cela permet à l'utilisateur de savoir d'une part que le bouton sert à afficher du contenu et d'autre part si le contenu est actuellement affiché ou caché.

Dans l'exemple ci-dessus on utilise aussi un attribut aria-controls qui permet de faire le lien entre le bouton et le contenu contrôlé par le bouton. Malheureusement il y a peu de support pour cet attribut (aria-controls). Si le contenu se trouve juste sous le bouton qui permet de l'afficher, il n'est pas vraiment nécessaire.


Commentaires

Soyez le premier à commenter