Introduction à la sémantique et aux technologies d'assistance
Vous avez vu comment rendre un site accessible aux utilisateurs qui ne peuvent pas utiliser de souris ou de point d'accès (en raison d'une déficience physique, d'un problème technique ou de préférences personnelles) en traitant uniquement l'utilisation du clavier. Bien que cela demande un peu de soin et de réflexion, ce n'est pas une énorme quantité de travail si vous le planifiez dès le début. Une fois ce travail de base terminé, vous aurez bientôt atteint un site plus soigné et entièrement accessible.
Dans cette leçon, nous allons nous appuyer sur ce travail et vous faire réfléchir à d'autres facteurs d'accessibilité, tels que la création de sites Web pour répondre aux utilisateurs comme Victor Tsaran, qui ne peuvent pas voir l'écran.
Tout d'abord, nous reviendrons sur les technologies d'assistance, le terme général désignant des outils tels que les lecteurs d'écran qui aident les utilisateurs souffrant de déficiences à accéder aux informations.
Nous allons maintenant nous intéresser à certains concepts généraux liés à l'expérience utilisateur, qui nous permettront d'approfondir l'expérience des utilisateurs de technologies d'assistance.
Enfin, nous verrons comment utiliser le code HTML de manière efficace pour créer une bonne expérience pour ces utilisateurs, et à quel point il coïncide avec la façon dont nous avons abordé la notion de concentration plus tôt.
Technologie d'assistance
Technologie d'assistance est un terme générique désignant les appareils, les logiciels et les outils qui aident toute personne handicapée à accomplir une tâche. Au sens large, il peut s'agir d'éléments moins techniques, comme une béquille pour marcher ou une loupe pour lire, ou encore quelque chose de high-tech comme un bras robotisé ou un logiciel de reconnaissance d'image sur smartphone.
La technologie d'assistance peut inclure quelque chose d'aussi général que le zoom du navigateur ou d'aussi spécifique qu'une manette de jeu conçue sur mesure. Il peut s'agir d'un appareil physique distinct, comme une plage braille, ou entièrement implémenté dans un logiciel tel qu'une commande vocale. Il peut être intégré au système d'exploitation, comme certains lecteurs d'écran, ou être un module complémentaire, comme une extension Chrome.
La frontière entre technologie d'assistance et technologie en général est floue. Après tout, toute technologie est destinée à aider les individus dans une tâche ou une autre. De plus, les technologies peuvent souvent entrer et sortir de la catégorie "d'assistance".
Par exemple, l'un des premiers produits commerciaux de synthèse vocale était une calculatrice parlante pour non-voyants. La synthèse vocale est partout, des itinéraires routiers aux assistants virtuels. À l'inverse, les technologies qui étaient à l'origine un usage général trouvent souvent une utilisation d'assistance. Par exemple, les personnes malvoyantes peuvent utiliser le zoom de l'appareil photo de leur smartphone pour mieux voir un petit objet du monde réel.
Dans le contexte du développement Web, nous devons envisager un large éventail de technologies. Les internautes peuvent interagir avec votre site Web à l'aide d'un lecteur d'écran ou d'une plage braille, d'une loupe, d'une commande vocale, d'un contacteur ou d'une autre forme de technologie d'assistance qui adapte l'interface par défaut de la page pour créer une interface plus spécifique qu'ils peuvent utiliser.
Beaucoup de ces technologies d'assistance s'appuient sur une sémantique exprimée de manière programmatique pour créer une expérience utilisateur accessible, et c'est le sujet principal de cette leçon. Mais avant d'expliquer la sémantique exprimée de manière programmatique, nous devons parler un peu des affordances.
Tarifs
Lorsque nous utilisons un outil ou un appareil fabriqué par l'homme, nous examinons généralement sa forme et sa conception pour nous donner une idée de ce qu'il fait et de son fonctionnement. Une affordance est tout objet qui offre ou offre à son utilisateur la possibilité d'effectuer une action. Plus l' affordance est conçue, plus son utilisation est évidente ou intuitive.
Une bouilloire ou une théière en est un exemple classique. Il est facile de reconnaître que c'est la poignée et non le bec que vous devez saisir, même si vous n'avez jamais vu de théière.
En effet, l' affordance est semblable à celle que vous avez vue sur de nombreux autres objets : arrosoirs, pichets de boissons, tasses à café, etc. Vous pourriez probablement ramasser la marmite à l'aide du bec, mais d'après votre expérience avec des affirmations similaires, c'est la meilleure option.
Dans les interfaces utilisateur graphiques, les affordances représentent des actions que nous pouvons effectuer, mais elles peuvent être ambiguës, car il n'y a pas d'objet physique avec lequel interagir. Les affordances de l'IUG sont donc spécialement conçues pour être sans ambiguïté: les boutons, les cases à cocher et les barres de défilement sont destinés à transmettre leur utilisation avec le moins d'entraînement possible.
Par exemple, vous pouvez paraphraser l'utilisation de certains éléments de forme courants (affordances) comme ceci:
- Cases d'option : "Je peux choisir l'une de ces options."
- Case à cocher : "Je peux choisir 'oui' ou 'non' pour cette option."
- Champ de texte : "Je peux saisir quelque chose dans cette zone."
- Menu déroulant : "Je peux ouvrir cet élément pour afficher mes options."
Vous pouvez tirer des conclusions sur ces éléments uniquement parce que vous pouvez les voir. Naturellement, une personne qui ne peut pas voir les indices visuels fournis par un élément ne peut pas comprendre sa signification ni saisir intuitivement la valeur de l' affordance. Nous devons donc nous assurer que les informations sont exprimées de manière suffisamment flexible pour être accessibles par une technologie d'assistance capable de créer une interface alternative répondant aux besoins de ses utilisateurs.
Cette exposition non visuelle de l'utilisation d'une affordance s'appelle sa sémantique.
Lecteurs d'écran
Un type de technologie d'assistance populaire est le lecteur d'écran, un programme qui permet aux personnes malvoyantes d'utiliser des ordinateurs en lisant à voix haute le texte à l'écran avec une voix générée. L'utilisateur peut contrôler ce qui est lu en déplaçant le curseur vers une zone pertinente à l'aide du clavier.
Nous avons demandé à Victor Tsaran d'expliquer comment, en tant que personne aveugle, il accède au Web à l'aide d'un lecteur d'écran intégré sous OS X, appelé VoiceOver. Regardez cette vidéo dans laquelle Victor utilise VoiceOver.
Maintenant, c'est à votre tour d'essayer d'utiliser un lecteur d'écran. Voici une page avec ChromeVox Lite, un lecteur d'écran minimal, mais fonctionnel, écrit en JavaScript. L'écran est délibérément flouté pour simuler une expérience de déficience visuelle et forcer l'utilisateur à effectuer la tâche avec un lecteur d'écran. Vous devrez bien sûr utiliser le navigateur Chrome pour cet exercice.
Page de démonstration de ChromeVox Lite
Vous pouvez utiliser le panneau de configuration en bas de l'écran pour contrôler le lecteur d'écran. Ce lecteur d'écran offre des fonctionnalités très minimales, mais vous pouvez explorer son contenu à l'aide des boutons Previous et Next. Vous pouvez également cliquer sur des éléments à l'aide du bouton Click.
Pour vous familiariser avec l'utilisation d'un lecteur d'écran, consultez cette page lorsque ChromeVox Lite est activé. Pensez au fait qu'un lecteur d'écran (ou une autre technologie d'assistance) crée en fait une autre expérience utilisateur complète, basée sur la sémantique exprimée de manière programmatique. Au lieu d'une interface visuelle, le lecteur d'écran fournit une interface audible.
Notez comment le lecteur d'écran vous fournit des informations sur chaque élément d'interface. Attendez-vous à ce qu'un lecteur bien conçu vous dise toutes, ou du moins la plupart, des informations suivantes sur les éléments qu'il rencontre.
- Rôle ou type de l'élément, s'il est spécifié (ce qui devrait être le cas).
- Le nom de l'élément, le cas échéant
- Valeur de l'élément, si celui-ci en possède une.
- state de l'élément, par exemple s'il est activé ou désactivé (le cas échéant).
Le lecteur d'écran peut créer cette autre UI, car les éléments natifs contiennent des métadonnées d'accessibilité intégrées. Tout comme le moteur de rendu utilise le code natif pour construire une interface visuelle, le lecteur d'écran utilise les métadonnées des nœuds DOM pour construire une version accessible, quelque chose comme ceci.
