Motif ARIA disclosure

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

<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

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

• Motif de conception ARIA disclosure dans la recommandation WAI-ARIA Authoring Practices 1.1.
• aria-expanded dans la recommandation ARIA 1.1.
• aria-controls dans la recommandation ARIA 1.1.
• Using the aria-controls attribute, Léonie Watson.