Gestion des zones affichées/masquées avec et sans ARIA. Voir également notre page de tests pour l'élément HTML5 details.

Sans ARIA

Le contenu est affiché et l'intitulé du bouton a changé !

<div>
 <button>Afficher la description</button>
  <div class="is-closed">
   <p>Le contenu est affiché et l'intitulé du bouton a changé !</p>
  </div>
</div>

Motif ARIA Disclosure

ARIA all the things

Lorsque le contenu est masqué :

<div>
 <button aria-expanded="false" aria-controls="dd-infographie">Description détaillée</button>
  <div class="is-closed" id="dd-infographie">
   <p><img lang="en" src="[...]" alt="ARIA all the things" /></p>
 </div>
</div>

Lorsque le contenu est affiché :

<div>
 <button aria-expanded="true" aria-controls="dd-infographie">Description détaillée</button>
  <div class="" id="dd-infographie">
   <p><img lang="en src="[...]" alt="ARIA all the things" /></p>
 </div>
</div>

Ressources