Le modèle de conception ARIA Disclosure

Les modèles de conception (Design Patterns) ARIA visent à rendre accessibles des portions de document HTML, des composants, qui ne le sont pas nativement.

Pour démarrer en douceur avec quelque chose d'abordable et de facile à mettre en place, nous allons découvrir dans un premier temps le modèle de conception Disclosure.

Définition

Impossible de commencer cette série sans préciser ce que sont ces fameux modèles de conception !

En clair, il s'agit de l'ensemble des règles et principes qui régissent la création de composants accessibles dont le but est de garantir leur utilisabilité par le plus grand nombre.

Cela couvre un large panel de fonctionnalités allant de la fenêtre modale à une arborescence de dossiers, en passant par nos vieilles <table> ou encore un simple bouton (qui, on le verra, n'est pas toujours aussi simple que l'on peut le penser).

Le concept du jour: Disclosure

Comme indiqué plus haut, le modèle que nous allons évoquer aujourd'hui se nomme Disclosure.

Sous ce nom un peu obscur au premier abord se cache quelque chose de plutôt commun puisqu'il s'agit d'un bouton permettant d'afficher ou de cacher un contenu défini.

Rien de bien sorcier n'est-ce pas ?

Pourtant, les utilisateurs de technologies d'assistance peuvent passer à côté d'informations importantes ou même de fonctionnalités entières, selon ce que vous décidez de cacher derrière ces boutons.

Comment ça s'utilise ?

Rassurez-vous, c'est de loin le modèle de conception le plus abordable et qui demandera le moins d'adaptations du code existant.

Pour cela, nous utiliserons seulement 2 attributs ARIA:

• aria-expanded
• aria-controls

Le rôle du premier est d'indiquer, via une valeur booléenne (true ou false) l'état dans lequel se trouve l'élément qui est contrôlé par le bouton. Le second permet de relier ce dernier à l'élément qu'il contrôle via un attribut id HTML.

Si aria-controls est indiqué comme optionnel dans la documentation, il est tout de même fortement recommandé.

Voici un exemple de mise en place:

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

<div id="expandable">
  Contenu caché !
</div>

Et voilà, c'est tout pour la partie HTML ! Un id sur le contenu que vous souhaitez contrôler et 2 attributs sur votre bouton et le modèle est prêt !

Bon, ce n'est pas tout à fait vrai.
Il reste quelques lignes de Javascript à ajouter pour rendre le tout dynamique (gestion du clic, bascule true/false de l'attribut aria-expanded et changement du texte du bouton pour refléter l'état du contenu.).

Voici une démo plus complète qui vous permettra de voir le tout en action.

Mais à quoi ça peut servir dans la vraie vie ?

On peut légitimement se demander quels peuvent être les cas d'utilisation de Disclosure. En vérité, vous l'avez très certainement déjà rencontré sans y attacher beaucoup d'importance.

Pourtant, qui n'a jamais vu une FAQ déroulante ou un menu qui fait apparaitre ses enfants au clic (et pas qu'au survol hein, on parle d'accessibilité ici 😉) ?

À ces exemples, même si plus souvent gérés uniquement avec du Javascript et sans le petit zeste d'accessibilité qui ferait la différence, on peut rajouter l'ajout d'une description détaillée pour des images, tableaux ou autres contenus touffus qui pourraient être synthétisés dans un texte court ou que sais-je encore ?

Conclusion

À sujet plus simple, article plus court.

Les prochains articles de la série rentreront plus directement dans le sujet et devraient tous être présentés selon la même structure pour faciliter la lecture.

Si vous découvrez le concept de modèle de conception ARIA, nous espérons que vous avez appris quelque chose d'utile et que vous vous en servirez dans vos projets futurs.

Cependant, n'oubliez pas que si vous n'êtes pas sûrs de vous ou de ce que vous faites No ARIA is better than Bad ARIA !