Vous êtes-vous déjà demandé comment une technologie d'assistance, telle qu'un lecteur d'écran, sait quoi 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 ?
Tarifs et sémantique
Avant de nous plonger dans la sémantique, il est utile de comprendre un autre terme : les affordances. Une affordance est un objet qui offre ou donne à l'utilisateur la possibilité d'effectuer une action. La théière est un exemple classique:
Cette théière n'a pas besoin d'un manuel d'instructions ; sa conception physique indique à l'utilisateur comment elle doit être utilisée. Il possède un handle et, comme vous avez vu d'autres objets dans le monde avec des identifiants similaires, vous pouvez déterminer comment le récupérer et l'utiliser.
Lorsque nous créons des interfaces utilisateur graphiques, nous utilisons des éléments tels que CSS pour ajouter des affordances visuelles à notre interface utilisateur. Par exemple, vous pouvez attribuer une ombre projeté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 interface utilisateur est conçue de manière à pouvoir transmettre ces mêmes affordances aux technologies d'assistance. Cette exposition non visuelle des affordances d'un élément d'interface utilisateur est appelée sa sémantique.
Utiliser un code HTML sémantique
Le moyen le plus simple de transmettre une sémantique appropriée consiste à utiliser des éléments HTML riches d'un point de vue sémantique.
En 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 avec un lecteur d'écran.
Un <div> n'est qu'un élément de regroupement générique. Par conséquent, un lecteur d'écran énonce uniquement le contenu textuel de l'<div>.
Le <button> est annoncé comme un "bouton". Il s'agit d'un signal beaucoup plus fort pour indiquer à l'utilisateur qu'il s'agit d'un élément avec lequel il peut interagir.
La solution la plus simple et souvent la plus adaptée à ce problème consiste à éviter complètement les commandes interactives personnalisées.
Par exemple, remplacez un élément <div> qui agit comme un bouton par un élément <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:
- Rôle ou type
- Un nom
- Une valeur (facultatif)
- Un state (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 div et span.
Le nom d'un élément correspond au libellé calculé. Les lecteurs d'écran énoncent 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 texte dans l'élément, sa présence d'attributs tels que title ou placeholder, l'association ou non de l'élément à un élément <label> réel et les attributs ARIA de l'élément, 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 tout ce que l'utilisateur a saisi dans le champ de texte.
Certains éléments peuvent également avoir un state, qui indique leur état actuel.
Par exemple, un élément <select> peut être développé ou réduit, selon s'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, telle qu'un lecteur d'écran, fournit une autre UI à l'utilisateur, elle le fait souvent en parcourant cette arborescence d'accessibilité.
À l'aide des outils pour les développeurs 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 en savez un peu plus sur la sémantique et sur la façon dont elle facilite la navigation des lecteurs d'écran, vous ne pouvez pas vous empêcher de regarder les pages que vous créez différemment. Dans la section suivante, nous allons prendre du recul et réfléchir à la façon dont le plan complet d'une page peut être transmis à l'aide de titres et points de repère efficaces.