Comment naviguer sur le web quand on est non-voyant ?

Comment navigue-t-on sur le web lorsque l’on est aveugle ? Comment saisit-on des champs de formulaire ?

Jamshid Kohandel, juriste dans l’équipe DesignGouv, nous explique comment il procède et quels sont quelques-uns des problèmes d’accessibilité qu’il rencontre : information indiquée uniquement par la couleur, absence d’alternative aux images porteuses de sens…

Comme il le dit : “Cela montre quand même l’efficacité des mesures d’accessibilité à prévoir sur une page web […], mais les petites erreurs peuvent quand même tout compromettre. Même une seule.”

La vidéo est sous-titrée et accompagnée d’une transcription.

Voir la transcription

Transcription

Audio	Vidéo
Je m’appelle Jamshid Kohandel et je suis non voyant de naissance.	Jamshid est assis à son bureau. Il parle face à la caméra.
	Panneau titre avec le texte “Comment naviguer sur le web quand on est non-voyant ?”.
J’utilise un équipement particulier que l’on appelle un lecteur d’écran.	Jamshid est assis à son bureau. Un bandeau indique qu’il est juriste.
C’est un logiciel que l’on télécharge sur l’ordinateur	Plan sur un écran d’ordinateur.
et qui envoie à une synthèse vocale tout ce qui s’affiche sur l’écran.	Plan scindé en deux avec, à gauche, un écran d’ordinateur ; à droite, Jamshid à son bureau.
(synthèse vocale) Test DesignGouv	Plan de Jamshid devant à son bureau. Il utilise son afficheur braille.
Et aussi un afficheur braille que j’ai devant moi	Plan de Jamshid devant son bureau. Un système de points amovibles constituant les caractères en braille permet à Jamshid de lire l’écran.
qui affiche sur une plage en 40 caractères le contenu de l’écran.	Plan sur l’afficheur braille.
Je vais vous montrer la navigation sur une page web qui n’est pas très accessible et sur le même contenu une fois rendu accessible pour vous faire sentir la différence.	Plan de Jamshid à son bureau.
	Panneau titre avec le texte “L’accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap”.
(synthèse vocale) Les champs en jaune sont obligatoires.	Écran scindé en deux avec, à gauche, une page web avec un formulaire à remplir, dont un des champs apparaît en jaune ; à droite Jamshid.
Au début du formulaire on me dit que les champs en jaune sont obligatoires.	Panneau titre avec le texte “Premier cas : les champs obligatoires dans les formulaires”.
Donc comme je ne vois pas quels sont les champs en jaune,	Jamshid à son bureau. Apparition d’un panneau de texte : “Donner une information uniquement par la couleur n’est pas accessible”.
c’est aussi un problème d’accessibilité, il ne faut jamais que les couleurs soient déterminantes.	Écran scindé en deux avec, à gauche, une page web avec un formulaire à remplir dont un des champs apparaît en jaune ; à droite Jamshid.
Je vais cliquer sur le lien de la page accessible.	Plan de Jamshid à son bureau.
Maintenant, on va essayer de remplir le formulaire qui existe sur cette page.	Plan sur l’afficheur braille.
(synthèse vocale) Votre adresse électronique obligatoire	Écran scindé en deux avec, à gauche, une page web avec un formulaire à remplir sans champs en jaune mais avec un libellé indiquant le champ obligatoire ; à droite Jamshid.
Je valide, je fais une tabulation.	Plan sur Jamshid devant son ordinateur. Apparition d’un panneau de texte : “L’information est écrite, explicite et lisible par les outils d’assistance”.
Je vais sur le bouton s’inscrire et je valide.	Plan de sur les mains de Jamshid qui utilise son clavier et l’afficheur braille.
Sur cette page, il y a une image qui n’est pas décrite. Je vais dessus. (synthèse vocale) L’anatomie d’une bicyclette graphique.	Plan sur un écran d’ordinateur où l’on voit une image des pièces détachées composant une bicyclette.
C’est l’anatomie d’une bicyclette, c’est tout ce que l’on sait sur cette mauvaise page qui n’a pas d’alternative textuelle pour expliquer l’image.	Apparition d’un panneau titre avec le texte : “Deuxième cas : alternative textuelle aux contenus visuels”
Donc on va maintenant sur le même contenu qui a été rendu accessible.	Plan de Jamshid à son bureau.
(synthèse vocale) Voir la description de l’image.	Plan scindé en deux avec, à gauche, l’image présente sur la page web ; à droite, Jamshid à son bureau.
Voilà, donc c’est la description de l’image	Plan sur l’écran d’ordinateur.
Donc si je clique sur ce bouton, j’aurais une description de l’image. (synthèse vocale) Voici la liste des principaux composants d’une bicyclette. Ici, j’ai la liste des composants d’une bicyclette, ce qui était sur la photo.	Plan scindé en deux avec, à gauche, l’image présente sur la page web ; à droite, Jamshid à son bureau. Apparition d’un encart avec le texte “L’alternative textuelle apporte les mêmes informations que l’image”.
Cela montre quand même l’efficacité des mesures d’accessibilité à prévoir sur une page web assez simple. Mais les petites erreurs peuvent quand même tout compromettre. Même une seule.	Plan de Jamshid à son bureau. Apparition d’un encart avec le texte “Une seule erreur d’accessibilité peut bloquer une personne en situation de handicap dans sa navigation”.
Musique	Animation de fin avec le logo DesignGouv puis le logo du Gouvernement et la mention Direction interministérielle du numérique.