Nombreux sont les aveugles et mal voyants qui communiquent grâce à Internet.
Des outils appropriés, en pleine évolution, permettent à ces utilisateurs de communiquer par courriel et de trouver sur la toile les informations dont ils ont besoin pour la vie quotidienne ou pour exercer une activité professionnelle.
Cela leur permet de gagner en autonomie et de sortir de l’isolement.
Les vidéos d’Access-Key s’adressent à ceux qui souhaitent mieux connaître l’évolution de ces outils et leur utilisation par les intéressés.
Accessibilité du Web : Des images liens accessibles
Description
Lorsqu’une image est utilisée comme lien, il est encore plus important de bien renseigner l’image sur l’action qu’elle engage. Jean réalise dans cette vidéo une petite démonstration des problèmes que les images-liens peuvent créer pour une personne utilisant une aide technique…
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
Contribuez à la traduction
Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :
Et maintenant je vais m’intéresser à un autre site, celui du Musée Océanographique de Monaco "Le titre est : Musée Océanographique de Monaco Microsoft Internet Explorer - Musée Océanographique de Monaco visitez lien graphique drapeauf, lien graphique drapeaua, lien graphique drapeauit Fondé en 1910 par le Prince Albert 1er de Monaco, le Musée Océanographique est un lieu exceptionnel entièrement dédié à la mer.". En dehors de la présentation générale j’ai entendu qu’il y avait des liens, donc j’ouvre mes liens : "liste de liens, boîte de dialogue, liste de liens, drapeauit, trois de trois, utilisez les… drapeaua, drapeauf". Je me retrouve en face de cette alternative, j’ai trois liens qui sont en fait des images je suppose, on m’a dit qu’il y avait des images et ce sont des drapeaux : drapeauf, drapeaua, drapeauit, j’en conclus que c’est le drapeau français qui donne l’indication de l’usage de la langue française, de même A anglaise et It italienne, mais c’est de la pure déduction, il aurait été souhaitable que les titres de ces images soient un peu plus explicites. Voilà, donc je vais choisir le français : "drapeaua, drapeauf, "entrée", sommaire" et je vais pouvoir accéder ainsi au sommaire du site du Musée Océanographique.
Jean: démonstration d’un site accessible
Maintenant, sur un autre site, celui du Languedoc Roussillon : "le titre est : Conseil Régional Languedoc Roussillon CRLR Microsoft Internet Explorer" Je vais chercher sur le site du Conseil Régional de Languedoc Roussillon le portail de la formation permanente. Si j’étais voyant une image m’enverrait directement sur cette page mais je sais parce qu’on me l’a dit que cette image était renseignée et donc quand je vais faire ma recherche de titre comme suit : "liste de liens, boîte de dialogue, liste de liens, valider, plan du site alt +3, "P", protéger l’environnement, "P", portail de la formation professionnelle en Languedoc Roussillon, nouvelle fenêtre" Voilà je trouve donc ce lien : "portail de la formation professionnelle en Languedoc Roussillon, nouvelle fenêtre, 26 de 60" qui correspond à une image sur la page de titre et donc je peux rentrer dans ma nouvelle page "entrée", la formation professionnelle et l’apprentissage en Languedoc Roussillon Microsoft Internet Explorer" Voilà, il est donc important de bien renseigner chaque image en précisant sur le titre de quelle image il s’agit sinon on ne peut pas agir dessus.
Tutoriel: renseigner les images qui remplissent le rôle de lien
Pour les images qui remplissent le rôle de lien, en l’absence d’un attribut Alt correctement renseigné, le logiciel de lecture d’écran se base sur le nom du fichier pour nommer l’image. Ici, nous retrouvons le nom des trois images auxquelles Jean est confrontées : Drapeauf. drapeaua. drapeauit. Pour chaque image qui remplit le rôle de lien, le texte contenu dans l’attribut alt de l’élément graphique doit donner la fonction du lien. Ainsi, pour chacun de ces drapeaux qui indique la langue des différentes versions du site, plutôt que d’indiquer dans l’attribut alt drapeau français ou drapeau italien, il est préférable d’indiquer "version française du site" ou "version italienne du site". Si l’image faisant office de lien inclus du texte l’alternative doit, au minimum, contenir le contenu textuel exact inscrit dans l’image. Des informations complémentaires pourront être apportées mais le contenu exact doit y être indiqué. Concernant le lien rendu opérationnel au moyen de la balise A href, il est nécessaire de le commenter au moyen de l’attribut title. Ici, l’attribut title devrait lui aussi comporter l’indication "version française du site". Si le lien s’ouvre dans une nouvelle page, l’attribut title devra alors comporter l’indication : version française du site et entre parenthèse, nouvelle fenêtre.
Les standards du web ouvrent les portes d’un web accessible pour tous et aujourd’hui nous pouvons aussi dire d’un web accessible aux situations de mobilité. Nous découvrons dans cette vidéo qu’il existe de nombreux points communs entre les deux situations et qu’il y a un réel avantage à utiliser les standards du web…
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
Contribuez à la traduction
Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :
Voici les sous titres en version texte de la vidéo pédagogique sur le mobile web :
Florence, étudiante à l’Université de Nice Sophia Antipolis:
Bonjour je m’appelle Florence, je suis étudiante en master multimédia à l’Université de Nice Sophia Antipolis. J’habite en collocation, je me déplace pas mal de campus en campus et le moyen le plus économique que j’ai trouvé pour accéder à Internet c’est à travers mon téléphone mobile. Comme ça j’ai accès aux sites web, j’ai accès à mon agenda, j’ai accès aux cours en ligne, je peux aussi écouter de la musique, etc… Mais c’est vrai que tous les sites ne sont pas encore accessibles à travers la téléphonie mobile et c’est quand même plus agréable quand c’est développé spécialement pour la téléphonie mobile. Sinon ça m’oblige à naviguer en zoomant, en dézoomant, alors que je cherche une information condensée et précise. Par exemple quand j’arrive sur le campus, je cherche à vérifier où est ce que j’ai cours et dans quelle salle ou lorsque je suis en déplacement je peux réécouter le cours qui a été enregistré pour mieux me préparer à celui qui arrive."
Christophe Bansart, responsable des technologies de l’Information et de la Communication pour l’Enseignement à l’Université de Nice Sophia Antipolis:
Aujourd’hui l’Université propose un environnement numérique disponible sur Internet à tous les étudiants de l’Université et à tous les enseignants, qui permettent aux étudiants de télécharger des supports de cours, de revoir des cours enregistrés, de s’auto-évaluer et qui permet bien entendu aux enseignants de suivre leurs étudiants de manière plus personnalisée et d’échanger avec eux de manière interactive. L’ensemble de cet environnement numérique par Internet aujourd’hui est disponible sur plateforme mobile et également respecte les normes et les contraintes liées à l’accessibilité. Un étudiant aujourd’hui dans toute sa scolarité, va être dans des situations de mobilité, va être en stage, à l’étranger, va être dans les transports en commun, va être en situation de handicap, bloqué chez lui, hospitalisé. Et donc il s’agit aujourd’hui de proposer un environnement qui répond à toutes ces contraintes et à tous ces besoins en terme de disponibilité des contenus pédagogiques pour apprendre dans n’importe quelles conditions."
Dominique Hazael-Massieux, responsable de l’initiative pour le Web Mobile au World Wide Web Consortium:
Le W3C a lancé en mai 2005 l’initiative pour le web mobile qui justement essaye de prendre en compte les différentes difficultés auxquelles se confronte un utilisateur lorsqu’il essaye d’accéder au web sur son téléphone. De manière assez intéressante d’ailleur, un grand nombre des bonnes pratiques qui ont été développées pour les téléphones portables ont une origine assez direct des bonnes pratiques qui ont été développées pour l’accessibilité du web du fait encore du nombre des similarités entre les deux conditions d’accès en situation de handicap ou en situation de mobilité. On peut prendre quelques exemples simples, si vous avez des problèmes moteurs par exemple pour contrôler une souris ou avoir accès facilement à un clavier, ça reproduit de manière assez proche les problèmes que vous pouvez avoir sur un téléphone sur lequel par exemple il n’y aura pas de système de pointage telle qu’une souris, telle que vous l’avez sur un ordinateur. Donc là pour prendre un exemple d’un site web qui n’a pas été forcément désigné dans l’optique d’une utilisation sur un téléphone portable et ce malgré tout sur un téléphone portable assez moderne assez puissant et en utilisant là aussi un navigateur considéré comme très moderne. D’abord d’un point de vue pûrement interface le téléphone a un clavier complet mais chaque touche est très petite, donc il est effectivement très difficile d’y accéder et de même le système de pointage qui existe reste quand même assez difficile à utiliser pour quelqu’un qui n’en a pas vraiment l’habitude ou qu’il ne le fait que de manière intermittente. Et ce qui concerne le site web lui même, on a donc un affichage qui est sur plusieurs colonnes qui est affiché en tout petit par le navigateur pour essayer de permettre à l’utilisateur de se repérer sur un plan large mais en pratique ça veut dire que l’utilisateur ne sait pas à quoi corresponde chacune des sections. Il va donc devoir faire par essai et erreur pour essayer de repérer effectivement la section qui l’intéresse: de zoomer, dézoomer et se retrouver dans la page. Ce qui est assez similaire finalement pour quelqu’un qui aurait des problèmes de vision qui aurait soit un écran avec un système de zoom qui montrerait qu’une seule partie de la page ou de manière plus poussée pour une personne aveugle qui n’a pas du tout une vision d’ensemble de la page et qui est obligé d’aller section par section pour trouver l’information qu’il recherche."
Accessibilité du Web : Les alternatives textuelles aux images
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
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.
L'ordinateur des aveugles : Utilisation des terminaux mobiles (iPhone, iPad, et Plage Braille)
Description
Certains smartphone, certaines tablettes tactiles intègrent des fonctionnalités d'accès pour les personnes en situation de handicap. Sur cette vidéo, Christian, non-voyant, accède en toute liberté à l'information et à l'échange de données, sur un ordinateur portable, un smartphone, une tablette tactile grâce à une synthèse vocale ou une plage braille.
Le lancement de cette dernière vidéo a fait l'objet d'une conférence de presse. Les vidéos de cette événement et la diffusion sur les médias nationaux sont visibles à la rubrique "Revue de presse"
Tutoriel vidéo
Acteur principal et talentueux utilisateur d'outils Hi-tech : Christian Lainé