Sémantique et lecteurs d'écran

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-ils ?

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 tout objet qui offre à l'utilisateur l'opportunité d'effectuer une action. La théière en est un exemple classique:

La poignée d'une théière est une affordance naturelle.

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. Comme vous avez vu d'autres objets dans le monde avec des identifiants similaires, vous pouvez en déduire 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 affinités visuelles à notre interface utilisateur. Par exemple, vous pouvez appliquer 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 s'appelle 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 utilisant 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 n'énonce que le contenu textuel de cette <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 une <div> qui agit comme un bouton par une valeur <button> réelle.

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 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 contenu textuel dans l'élément, s'il comporte ou non des attributs tels que title ou placeholder, s'il est associé ou non à un élément <label> réel et si l'élément comporte des 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 state, qui indique leur état actuel. Par exemple, un élément <select> peut avoir un état 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 de développement 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 en savez un peu plus sur la sémantique et sur la façon dont elle facilite la navigation avec les 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 de transmettre l'intégralité du contour d'une page à l'aide de en-têtes et de points de repère efficaces.