Accessibilité accordion

Appliquez le motif de conception Disclosure sur les accordions :

  • Entourez le bloc cliquable à l'aide d'une balise <button type="button">image
  • ajoutez sur la balise <button> un attribut aria-expanded="true|false"selon l'état déplié/plié du panneau
  • ajoutez un attribut id sur le conteneur du contenu du panneau (<div class="content">) : il devra être calculé pour être unique à chaque instance de l'accordion
  • ajoutez sur la balise <button> un attribut aria-controls="<id du contenu>"
  • Définissez des styles de prise de focus clavier sur ce bouton, si nécessaire à l'aide du pseudo sélecteur focus-visible