Vous êtes-vous déjà demandé comment les technologies d'assistance, comme un écran s'il sait quoi annoncer aux utilisateurs ? La réponse est que ces technologies Nous comptons sur les développeurs pour baliser leurs pages en HTML sémantique. Mais que sont et comment les lecteurs d'écran les utilisent-ils ?
Affordances et sémantique
Avant de nous plonger dans la sémantique, il est utile de comprendre un autre terme: affordances. Une affordance est un objet qui offre, ou autorise, à son utilisateur l'occasion d'effectuer une action. La théière en est un exemple classique:
Cette théière n'a pas besoin d'un manuel d'instructions. mais sa conception physique indique à l'utilisateur comment il doit être utilisé. Il a un handle, et parce que vous avez vu d'autres objets dans le monde avec des poignées similaires, vous pouvez déduire comment vous devez le prendre et l’utiliser.
Lorsque nous créons des interfaces utilisateur graphiques, nous utilisons des éléments tels que CSS pour ajouter des éléments visuels affordances à notre interface utilisateur. Par exemple, vous pouvez attribuer une ombre projetée à un bouton et pour qu'elle ressemble à un bouton du monde réel.
Mais si un utilisateur ne peut pas voir l'écran, ces affordances visuelles ne leur seront pas transmises. Vous devez donc vous assurer que votre interface utilisateur est construites de manière à transmettre ces affordances à l'assistance de l'IA générative. Cette exposition non visuelle des affordances d'un élément d'interface utilisateur est appelée sa sémantique.
Utiliser du code HTML sémantique
Le moyen le plus simple de transmettre une sémantique appropriée est d'utiliser un code HTML riche en sémantique éléments.
Avec CSS, vous pouvez
pour appliquer un style aux é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.
<div> n'est qu'un élément de regroupement générique,
Ainsi, un lecteur d'écran n'énonce que le contenu textuel de <div>.
Le <button> est annoncé sous la forme d'un "bouton",
un signal beaucoup plus fort à l'utilisateur
qu'il peut interagir avec cela.
Le plus simple
et souvent la meilleure solution à ce problème
est d'éviter complètement
les commandes interactives personnalisées.
Par exemple, remplacez un élément <div> qui agit comme un bouton.
avec un <button> réel.
Propriétés sémantiques et arborescence d'accessibilité
De manière générale, chaque élément HTML possède l'une des caractéristiques sémantiques suivantes propriétés:
- 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 les éléments div et span, par exemple.
Le nom d'un élément correspond à son étiquette calculée. 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 les facteurs de nom d'un élément, par exemple s'il y a du texte
Contenu à l'intérieur de l'élément, qu'il comporte ou non des attributs tels que title
ou placeholder, que l'élément soit associé ou non à une valeur réelle
<label>, 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
ont une valeur reflétant 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 se trouver au format développé ou
réduit, selon qu'il est ouvert ou fermé.
Arborescence d'accessibilité
Pour chaque nœud du DOM, le navigateur détermine si le est sémantiquement "intéressant" et l'ajoute à la liste des paramètres d'accessibilité arbre. Lorsque une technologie d'assistance, comme un lecteur d'écran, fournit une autre UI pour l'utilisateur, il le fait souvent en parcourant cette arborescence d'accessibilité.
Les outils de développement de Chrome vous permettent d'inspecter la sémantique d'un élément propriétés et explorez 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 le lecteur d'écran, vous ne pouvez pas vous empêcher de revoir les pages que vous créez différemment. Dans la section suivante, nous prenons du recul et réfléchissons à la façon dont le contour entier d'une page peut être véhiculées par des en-têtes et des points de repère efficaces.