Vous êtes-vous déjà demandé comment les technologies d'assistance, comme les lecteurs d'écran, savent ce qu'elles doivent annoncer aux utilisateurs ? La réponse est que ces technologies reposent sur des développeurs qui balisent leurs pages avec du code HTML sémantique. Mais qu'est-ce que la sémantique et comment les lecteurs d'écran l'utilisent-ils ?
Affordances et sémantique
Avant de nous pencher sur la sémantique, il est utile de comprendre les affordances. Une affordance est un objet qui offre à son utilisateur la possibilité d'effectuer une action. Un exemple classique est la théière :
Cette théière n'a pas besoin de manuel d'instructions. Au lieu de cela, sa conception physique indique à l'utilisateur comment il doit être utilisé. Il possède une poignée et, comme vous avez vu d'autres objets dans le monde avec des poignées similaires, vous pouvez déduire comment le ramasser et l'utiliser.
Lorsque nous créons des interfaces utilisateur graphiques, nous utilisons CSS pour ajouter des affordances visuelles à notre interface. Par exemple, vous pouvez ajouter une ombre portée et une bordure à un bouton pour qu'il ressemble à un véritable bouton.
Toutefois, les utilisateurs qui ne peuvent pas voir l'écran ne sont pas informés de ces affordances visuelles. Vous devez donc vous assurer que votre interface est construite de manière à pouvoir transmettre ces mêmes affordances aux technologies d'assistance. Cette exposition non visuelle des affordances d'un élément d'UI est appelée sémantique.
Écrire du code HTML sémantique
Le moyen le plus simple de transmettre une sémantique appropriée consiste à utiliser des éléments HTML sémantiquement riches.
En utilisant le CSS, il est possible de styliser les éléments <div> et <button> afin qu'ils transmettent les mêmes affordances visuelles, mais les deux expériences sont très différentes lorsque vous utilisez un lecteur d'écran. Un <div> n'est qu'un élément de regroupement générique. Un lecteur d'écran n'annonce donc que le contenu textuel du <div>.
Le <button> est annoncé comme un "bouton", ce qui indique beaucoup plus clairement à l'utilisateur qu'il peut interagir avec.
Souvent, la meilleure solution à ce problème consiste à éviter complètement les commandes interactives personnalisées. Par exemple, remplacez un <div> qui se comporte comme un bouton par un véritable <button>.
Propriétés sémantiques et arbre d'accessibilité
En règle générale, chaque élément HTML possède certaines des propriétés sémantiques suivantes :
- Un rôle ou un type
- Un nom
- Une valeur (facultatif)
- Un état (facultatif)
Le rôle d'un élément décrit son type (par exemple, "bouton", "input" ou même "group" pour des éléments tels que div et span).
Le nom d'un élément correspond à son libellé calculé. Les lecteurs d'écran annoncent généralement le nom d'un élément suivi de son rôle, par exemple "S'inscrire, bouton". L'algorithme qui détermine le nom d'un élément tient compte de facteurs tels que la présence de contenu textuel à l'intérieur de l'élément, la présence ou l'absence d'attributs tels que title ou placeholder, l'association ou non de l'élément à un élément <label> réel, et la présence ou l'absence d'attributs ARIA tels que aria-label et aria-labelledby.
Certains éléments peuvent avoir une valeur. Par exemple, <input type="text"> peut avoir une valeur qui reflète ce que l'utilisateur a saisi dans le champ de texte.
Certains éléments peuvent également avoir un état, qui indique leur état actuel.
Par exemple, un élément <select> peut être à l'état expanded (développé) ou collapsed (réduit), selon qu'il est ouvert ou fermé.
Arborescence d'accessibilité
Pour chaque nœud du DOM, le navigateur détermine si le nœud est sémantiquement "intéressant" et l'ajoute à l'arborescence d'accessibilité. Lorsque des technologies d'assistance, comme un lecteur d'écran, fournissent une autre UI à l'utilisateur, elles le font souvent en parcourant cet arbre d'accessibilité.
Les outils pour les développeurs Chrome vous permettent d'inspecter les propriétés sémantiques d'un élément et d'explorer sa position dans l'arborescence d'accessibilité.
Étapes suivantes
Une fois que vous en savez un peu plus sur la sémantique et sur la façon dont elle facilite la navigation avec un lecteur d'écran, vous ne pouvez plus vous empêcher de regarder les pages que vous créez différemment. Dans la section suivante, nous allons prendre du recul et voir comment l'ensemble du plan d'une page peut être transmis à l'aide de titres et de repères efficaces.