Vous êtes-vous déjà demandé comment une technologie d'assistance, comme un lecteur d'écran, sait ce qu'elle doit annoncer aux utilisateurs ? La réponse est que ces technologies reposent sur les 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 vous lancer dans la sémantique, il est utile de comprendre un autre terme : les affordances. Une affordance est un objet qui offre à son utilisateur la possibilité d'effectuer une action. Prenons l'exemple classique de 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 l'utiliser. 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 soulever et l'utiliser.
Lorsque nous créons des interfaces utilisateur graphiques, nous utilisons des éléments tels que le CSS pour ajouter des affordances visuelles à notre UI. Par exemple, vous pouvez ajouter une ombre portée et une bordure à un bouton pour qu'il ressemble à un bouton réel.
Toutefois, si un utilisateur ne peut pas voir l'écran, ces affordances visuelles ne lui seront pas transmises. Par conséquent, vous devez vous assurer que votre UI est conçue de manière à transmettre ces mêmes affordances aux technologies d'assistance. Cette exposition non visuelle des affordances d'un élément d'interface utilisateur s'appelle sa sémantique.
Utiliser le HTML sémantique
Le moyen le plus simple de transmettre une sémantique appropriée consiste à utiliser des éléments HTML sémantiquement riches.
À l'aide du 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. Par conséquent, un lecteur d'écran n'annonce que le contenu textuel de l'<div>.
<button> est annoncé comme un "bouton", un signal beaucoup plus fort pour l'utilisateur indiquant qu'il peut interagir avec cet élément.
La solution la plus simple et souvent la meilleure à ce problème consiste à éviter complètement les commandes interactives personnalisées.
Par exemple, remplacez un <div> qui agit comme un bouton par un <button> réel.
Propriétés sémantiques et arborescence 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", "entrée" ou même simplement "groupe" pour des éléments tels que les éléments 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 divers éléments, par exemple de la présence ou non d'un contenu textuel dans l'élément, de la présence ou non d'attributs tels que title ou placeholder, de l'association ou non de l'élément à un élément <label> réel, et de la présence ou non 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 dans un état déployé ou résumé, 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é. Lorsqu'une technologie d'assistance, comme un lecteur d'écran, fournit une UI alternative à l'utilisateur, elle le fait souvent en parcourant cet arbre d'accessibilité.
Avec les outils pour les développeurs de Chrome, vous pouvez inspecter les propriétés sémantiques d'un élément et explorer sa position dans l'arborescence d'accessibilité.
Étapes suivantes
Une fois que vous savez un peu plus sur la sémantique et comment elle facilite la navigation avec un lecteur d'écran, vous ne pouvez pas faire autrement que de regarder les pages que vous créez différemment. Dans la section suivante, nous allons prendre du recul et examiner comment l'intégralité de la structure d'une page peut être transmise à l'aide d'titres et de repères efficaces.