Dissocier la forme de la sémantique : lien vs. bouton
Un problème d’accessibilité que l’on rencontre sur de nombreux sites est la confusion dans l’utilisation entre lien et bouton.
Cette confusion peut principalement venir du fait que l’aspect visuel, seul, ne permet pas de déterminer s’il s’agit de l’un ou l’autre de ces composants interactifs. Par exemple, d’après vous, le composant ci-dessous est-il un lien ou un bouton ?
Même question pour ce composant interactif « Lire la transcription textuelle de la vidéo » ?
Pour pouvoir répondre correctement à ces questions et faire le bon choix lors du développement de ces éléments, ce qu’il nous manque, c’est la fonction de ces éléments interactifs.
Les interactions attendues entre un lien et un bouton sont différentes.
Leurs mauvais développements génèrent un impact direct pour les personnes naviguant avec une technologie d’assistance, comme un lecteur d’écran (synthèse vocale et/ou plage braille).
La sémantique en HTML, qu’est-ce que c’est ?
Avant d’aller plus loin et pour une meilleure compréhension de la suite de l’article, il me paraît important de récapituler brièvement ce qu’est la sémantique des balises HTML.
Une balise HTML sémantique est une balise permettant de donner un rôle / du sens aux contenus qu’elle structure.
Cette sémantique est notamment utilisée par les outils d’assistance, comme les lecteurs d’écran, pour décrire correctement les composants.
Par exemple, une balise <nav> donne à la liste de liens qu’elle structure le role de navigation.
Une balise <h1>, quand à elle, donnera au texte qu’elle structure le role de titre de premier niveau.
On utilise donc une balise HTML pour sa sémantique et non pour sa forme (le CSS servira à donner la forme que l’on veut donner au composant).
Dans le cas des liens et des boutons, afin de choisir la balise la plus appropriée, il faut donc au préalable connaître la fonction du composant et non se fier à sa forme.
Comment choisir entre un lien et un bouton ?
La question la plus importante est : « Que se passe-t-il lorsque la personne active ce composant ? ».
Le composant est-il utilisé pour naviguer vers une ressource ? Si oui, c’est un lien !
Si, à l’activation du composant, la personne est menée sur une autre page du site, un autre endroit sur la page, un autre site ou encore un document (tel qu’un fichier PDF) alors structurer ce composant avec une balise <a href="[URL]">.
Dans l’exemple en introduction :
Ce composant interactif (présent sur la page d’accueil du site Ideance) mène sur une autre page du site.
Il s’agit donc d’un lien.
Le composant déclenche-t-il une action ou un évènement ? Si oui, c’est un bouton !
Le bouton contrôle-t-il la soumission d’un formulaire ?
Un bouton de soumission de formulaire doit être structuré avec une balise <button> ou <input> et utiliser l’attribut type="submit".
Pour obtenir par exemple concrètement :
<button type="submit">Envoyer mon message</button>Le bouton permet-il d’actionner un script ?
Un bouton activant un script doit être structuré avec une balise <button> ou <input> et utiliser l’attribut type="button".
Dans l’exemple en introduction :
Ce composant interactif (présent sur le site Ameli.fr) permet de faire apparaître la transcription textuelle d’une vidéo via un système de déplier/plier.
Ce qui donne concrètement :
<button type="button" aria-expanded="false">Lire la transcription textuelle de la vidéo</button><div> et <span> ne sont pas des boutons !
Bien qu’il soit possible de faire d’un élément non interactif (<div> ou <span>) un bouton via l’utilisation de ARIA (et l’attribut role="button") nous ne recommandons pas d’utiliser cette méthode.
Ces boutons reconstruits en ARIA sont souvent sujets à plusieurs problèmes d’accessibilité pouvant gêner ou entraver leur utilisation entre autres avec un lecteur d’écran et au clavier.
Julie Moynat explique très bien les limites de l’utilisation de ces boutons ARIA dans son article Créer des boutons accessibles et dignes de ce nom en HTML.
Et qu’en est-il de <a role="button"> ?
Comme vu juste au-dessus, nous déconseillons l’utilisation de l’attribut role="button".
Même si contrairement à l’exemple précédent, la balise <a> est un élément interactif, les interactions clavier ne sont pas les mêmes entre un lien et un bouton (et même avec du JavaScript, il pourrait s’avérer très complexe de reproduire à l’identique toutes les interactions d’une véritable balise <button>).
Conclusion
Comme dit l’adage, l’habit ne fait pas le moine.
Pour bien choisir entre le développement d’un lien ou d’un bouton, ne vous fiez pas à son visuel mais demandez-vous plutôt quelle est l’interaction attendue de ce composant.
Et si possible, de manière plus générale, privilégiez un maximum l’utilisation des balises HTML natives 😉.
