Qu’est ce qu’un modèle de conception Disclosure ?

Il s’agit d’un type de bouton qui permet d’afficher ou de masquer, de réduire ou de développer un contenu. Le problème réside dans le fait que les utilisateurs de technologies d’assistance peuvent ne pas prendre en compte les informations ou les fonctionnalités caché derrière la bouton.

Ce modèle de conception comporte deux éléments :

  • un bouton 
  • un contenu donc la visibilité est contrôlée par le bouton

Lorsque le contenu est masqué, le bouton est conçu comme un bouton-poussoir normal avec une flèche ou un triangle pointant vers le bas ou vers la droite pour indiquer que l’activation du bouton affichera du contenu supplémentaire. Lorsque le contenu est visible, la flèche ou le triangle pointe généralement vers le bas.

Les attributs ARIA

L’élément qui va afficher et masquer le bouton a le rôle “button”.

Puis 2 attributs ARIA

  • aria-expanded – Lorsque le contenu est visible, aria-expanded est défini sur True. Lorsque la zone de contenu est masquée, il est définit sur false.
  • aria-controls – Il relie le bouton à l’élément qu’il contrôle via la valeur spécifique id HTML.

En exemple :

<button type="button" aria-controls="contenu" aria-expanded="false">
  Afficher le contenu
</button>

<div id="contenu">
 Le contenu masqué.
</div>

 

Source : https://www.w3.org/TR/wai-aria-practices/#disclosure