Outils personnels
Accueil Access-Key Les vidéos Access-Key Accessibilité du Web : Les alternatives textuelles aux images

Aller au contenu. | Aller à la navigation

Accessibilité du Web : Les alternatives textuelles aux images

Durée = 7:12 min Niveau = débutant Handicap concerné = visuel

Capture tutoriel vidéo n°4

Description

L’information contenue dans une image est entièrement perdue pour une personne déficiente visuelle. Des dispositifs de substitution doivent être prévus pour qu’une information alternative remplace l’image.

Dans ce film, Isabelle nous détaille les difficultés qu’elle rencontre lorsqu’aucune alternative aux images n’est prévue. Elle nous explique, au travers d’exemples, comment rendre images et illustrations accessibles de tous, notamment des personnes aveugles…

Tutoriel vidéo

Traduction espagnole réalisée par Lucas Bride Traduction chinoise réalisée par Lianhui Zhou Traduction anglaise réalisée par Ruth Woodrow

 

Ressources

Pour en savoir plus sur les images accessibles :

Vous pourrez en apprendre plus sur les images accessibles sur le site d’Openweb

Contribuez à la traduction

Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :

  1. Téléchargez le fichier sous titres en français, espagnol, chinois ou anglais au format SRT
  2. Envoyez par email le fichier sous titres au format SRT traduit à l’équipe Access-Key

Sous titres

Voici la version texte de la vidéo pédagogique sur les images accessibles dans une page web (notez que le texte en italique correspond à la voix de la synthèse vocale utilisée par Isabelle):

Isabelle: démonstration d’une mauvaise accessibilité des images

Je vais vous monter les conséquences qu’il peut y avoir pour une personne non-voyante lorsqu’elle n’accède pas aux images d’un site Internet. Je suis sur une page de géographie où il y a un exercice donc je lis ma page normalement lien présentation, lien polycopié, lien fiche, lien dossier, lien document, lien glossaire, lien auto-évaluation La synthèse me lit les liens qui se trouvent au début de la page, je continue Août 1991, Vilnius, Lithuanie, Belin, Histoire Terminale L, S, Paris Je tombe sur un texte qui ne m’apprend pas grand chose qui doit être la légende d’une image. Je continue 1, présenter le document, nature, thème, problématique Il y a une question, on me demande de présenter un document, que je ne connais pas. Une personne voyante m’a expliqué qu’il y avait une image qui aurait pu m’être décrite d’une manière très simple, par du texte et que les consignes de l’exercice se trouvent également dans un fichier image donc pareil il aurait fallu le mettre en texte sur le site internet pour que ce soit accessible donc je n’ai ni le document sur lequel je dois travailler puisqu’il n’a pas été décrit par du texte ni les consignes qui sont dans un fichier image et pas dans un texte je ne peux donc pas faire mon exercice normalement.

Isabelle: démonstration d’une bonne accessibilité des images

Voici un site un site accessible sur lequel toutes les images sont décrites et heureusement puisqu’il s’agit d’un site qui parle de l’accès aux plages et à la baignade pour les non-voyants donc je vais vous montrer ce que ça donne liste Audioplage, entrée, Arrivée à la plage…, graphique, le totem d’accueil photo 1 la première photo c’est apparemment une pancarte le totem d’accueil comme c’est marqué graphique, borne tactile de repérage le long du cheminement, photo 2 la deuxième photo apparemment ce serait d’après ce que je comprends le chemin tracé sur la plage avec des bornes pour que l’on arrive à la mer graphique, dépose de la serviette et descente à la mer, photo 3 La troisième photo représente d’après moi l’endroit auquel on laisse sa serviette et où on peut la récupérer après graphique, totem en bordure de mer, photo 4 et la quatrième montre de nouveau une pancarte au bord de la mer un totem donc tout est clair, on peut s’imaginer les photos grâce aux explications fournies par le site.

Isabelle: démonstration d’une mauvaise accessibilité d’un graphique

Autre exercice, autre situation un peu plus problématique, je lis ma page 1 barre oblique 6. A votre avis l’évolution globale de la balance commerciale des Etats-Unis avec ses principaux partenaires commerciaux depuis 1987 est-elle déficitaire, excédentaire, équilibrée ? Je tombe sur une question où on me demande de parler de la balance commerciale des Etats-Unis. Je dois analyser quelque chose que je n’ai pas sur la page du moins qui n’est pas dit par ma synthèse ce doit être des statistiques, des graphiques, un diagramme… quelque chose comme ça qui n’est pas repéré par ma synthèse donc ça demanderait un effort à une personne voyante au développeur du site web de description. C’est évidemment beaucoup plus long qu’une simple image comme tout à l’heure mais sinon nous n’avons pas accès à ces statistiques et je ne peux pas répondre à la question posée comme nous l’avons vu avec le diagramme de la balance économique des Etats-Unis

Isabelle: démonstration d’une bonne accessibilité d’un graphique

Certaines images sont complexes et donc compliquées à décrire cependant des solutions existent pour contourner le problème je vais vous montrer: Liste de titres… schéma projet 1, graphique, appuyez sur entrée pour obtenir une description longue donc la synthèse me dit "graphique" et me dit d’appuyer sur entrée si je veux une description longue ce qui signifie qu’une nouvelle page va s’ouvrir dans laquelle j’aurai la description du schéma Entrée, description du schéma projet - Windows Internet Explorer description du schéma projet. Titre de niveau 1, explication du schéma projet Donc là on voit tout de suite qu’il y a l’explication, c’est le premier titre Titre de niveau 2, Schéma 1. Le schéma présente deux lignes, l’une horizontale, l’autre verticale se croisant en leur milieu On a la description générale du schéma si je continue j’aurai le détail : liste de 4 éléments, ligne horizontale le signe moins est à gauche, le signe plus à droite, ligne verticale, le signe moins est en bas, le signe plus en haut donc toutes les lignes et colonnes sont clairement expliquées donc je peux analyser ce schéma, et pour pouvoir l’utiliser plus tard quand j’en aurai besoin et je n’aurai plus qu’à fermer la fenêtre quand j’aurai terminé.

Tutoriel: fournir des images accessibles

L’information contenue dans une image est entièrement perdue pour une personne déficiente visuelle. Des dispositifs de substitution doivent être prévus pour qu’une information alternative remplace l’image sous la forme d’un texte. L’attribut « alt » sera principalement utilisé. Il permet d’attribuer un court texte alternatif aux images mais également aux zones réactives d’images cliquables et aux boutons de formulaires. Ces descriptions doivent offrir une information complète et courte, elles devront compter environ une dizaine de mots. Lorsque l’image est complexe et que la description utile à sa compréhension excède une dizaine de mots il faut alors recourir à l’attribut longdesc qui crée un lien vers une explication détaillée. Ce cas est régulièrement rencontré pour décrire des diagrammes et autres graphiques complexes. Toutes les images ne peuvent cependant être traitées de la même façon. Certaines images sont strictement décoratives. Il est préférable de les gérer au moyen de la feuille de style. Il faudra alors évaluer quelles sont les images qui véhiculent une information utile dans le contexte du site et celles qui ont une valeur purement décorative. Les images typographiques telles que les puces ou les boulets doivent pour leur part être gérées par les balises ul et li dans le code HTML. Les images seront intégrées au CSS au moyen de la propriété list-style-image. Les images transparentes utilisées par certains Webmasters pour « caler » leur mise en page doivent être signalées. Une personne qui utilise un logiciel de synthèse vocale ne peut ignorer des portions de texte tel que nous pouvons le faire visuellement. Ces images non significatives doivent être dotées d’un attribut alt laissé vide. Sa valeur étant nulle, le navigateur ne l’affichera pas ou ne la lira pas. A noter que cette technique de développement ancienne peut avantageusement être remplacée par la technologie CSS qui rend obsolète l’utilisation d’images de calage.

Actions sur le document
|