Le Web et les personnes handicapées Accessibilité au Web Le Web et les personnes handicapées

Accessibilité & handicap 1) Généralités 2) Quels sont les types de handicap ? 3) Accessibilité par type de handicap 4) Exemple d'outil de validation : Bobby 5) Conclusion 1) 2) Types de handicaps : ceux qui posent un problème d'accessibilité 3) Essentiellement le problème des aveugles 4) Permet d'évaluer le niveau d'accessibilité des pages HTML 5) Perspectives

Accessibilité & handicap Généralité Le Web est conçu pour les voyants Les progrès du Web : danger pour les aveugles L’internet puissant outil de communication pour les handicapés Les interfaces standards sont inadaptées Utilisabilité : s’adapter aux caractéristiques de tous les utilisateurs Les enjeux : moraux, commerciaux Au départ le Web a été conçu pour une interface visuelle donc pour les seuls voyants. 80 à 90% des sites Web français pas accessibles aux aveugles (source : voir+.net) Le progrès des technologies du Web sont orientées vers le visuel (technologie Flash) => on risque une exclusion technologique des aveugles. Aujourd'hui, pour les personnes aveugles, l'accès à l'information est avant tout informatique. Internet est pour eux une source inépuisable d'informations et un outil formidable d'intégration -> 52% des déficients visuels utilisent un ordinateur dont 9% naviguent régulièrement sur internet Interfaces standards : souris, clavier, écran Interfaces alternatives : l'audition, le toucher Le Web doit être accessible aux plus grand nombre quelque soit le handicap. Il faut programmer les pages Web de manière cohérente et structurées pour que les interfaces de type synthèse vocale ou terminal braille les interprètent correctement. Les enjeux : améliorer l'accessibilité pour 2 raisons : morales : donner à tous l'accès à l'information commerciales : les handicapés sont des clients potentiels (10% des utilisateurs américains ont des problèmes d'utilisation des périphériques d'entrée sortie.

Accessibilité & handicap Types de handicaps Ne pas voir ou mal voir Ne pas entendre Ne pas pouvoir bouger Avoir du mal à traiter certains types d'information Avoir des difficultés à lire Ne pas posséder ou ne pas pouvoir utiliser un clavier, une souris Ne pas voir ou mal voir : aveugles et mal voyants Ne pas entendre : sourds Ne pas pouvoir bouger : handicapés moteurs Avoir du mal à traiter certains types d'information : certaines couleurs pour les daltoniens, les formes… Avoir des difficultés à lire : problèmes cognitifs

Accessibilité & handicap Types de handicaps Avoir un écran n'affichant que le texte, un petit écran, une connexion lente Ne pas comprendre la langue Avoir les yeux, leurs oreilles, leurs mains occupés ou gênés Avoir une ancienne version d'un logiciel de consultation, un logiciel différent ou un système d'exploitation différent Avoir les yeux, les oreilles, les mains occupés ou gênés : dans un atelier bruyant par exemple.

Accessibilité & Handicap Handicap visuel - stats En France on compte : 6 000 000 de personnes ayant un handicap 55 000 aveugles 225 000 mal voyants 15 000 ont appris le braille 7 000 le pratiquent .

Accessibilité & Handicap Handicap visuel - législation Obligation pour l’employeur : 10 juillet 1987 : quotas imposés 12 juillet 1990 : la discrimination est interdite 1999 : fonds spéciaux pour l’aménagement des postes de travail Convention collective spécifique .

Accessibilité & handicap Handicap visuel - perception Comment les handicapés visuels perçoivent-ils l'information ? De manière partielle (ré-assemblage mental) Seuls les éléments textuels sont perçus la charge mentale est importante Quel serait la solution ? Reconstruire une interface spécifique avec une structure de présentation adaptée à l'audition basée sur le sens et non sur la forme le document original n'est pas perçu dans sa globalité mais par fragments. Plus difficile à appréhender et à manipuler, à comprendre. Structure des pages adaptée à la lecture visuelle mais pas à une lecture tactile ou auditive L'utilisateur doit en quelque sorte ré-assembler mentalement les fragments pour reconstituer l'information contenue dans le document. La fragmentation concerne en fait l'ensemble de l'interface, menus de commandes et boîtes de dialogue notamment qu'il n'est pas possible de lire en même temps que le document lui-même. Charge mentale importante qui peut être allégée si conception claire et logique du document Reconstruire une interface spécifique avec une structure de présentation adaptée à l'audition-> éviterait les problèmes liés aux images, graphiques, icônes qui perturbent la perception

Accessibilité & Handicap Handicap visuel - outils Outils techniques d'accès au Web : Afficheur braille Et / ou synthétiseur vocal Déplacement dans l'écran avec un clavier standard ou spécial Logiciel d'agrandissement Navigateur standard ou spécifique Afficheurs éphémères en Braille : 20, 40, 80 caractères à la fois : coûteux, lent (4 à 5 fois + lent que la lecture auditive) , nécessité de connaître le Braille - fait ressortir les lettres braille grâce à des points rétractables. Imprimantes en Braille permanent : édition sur papier : cher volumineux - (tout n'est pas retranscriptible : police, couleur..) Perception du clignotement possible Synthétiseurs vocaux : convertit les textes affichables en sons similaires à une lecture humaine : pas parfait (2 fois plus lent que la lecture visuelle) Claviers spéciaux : retour tactile en braille éphémère Agrandisseur d'écran : nécessite des déplacements d'affichage : pas évident de se situer. Scanners : transformer des textes imprimés en fichiers informatiques pouvant être lus par un synthétiseur vocal ou converti en braille après reconnaissance de caractères Reconnaisseurs de la voix : pas indispensables, les utilisateurs peuvent utiliser les claviers Mal voyants : appel aux fonctions de personnalisation du système d'exploitation : polices de caractères, couleurs, contraste,... Faire appel à un navigateur standard complété par un logiciel d'accès ou à un navigateur spécifique. . ==> il faut rendre les interfaces plus conviviales notamment les commandes des logiciels et des matériels pour produire du texte.

Accessibilité & Handicap Handicap visuel - outils Exemple de clavier braille : Visiobraille2040 et mini2040 Afficheurs éphémères en Braille : 20, 40, 80 caractères à la fois : coûteux, lent (4 à 5 fois + lent que la lecture auditive) , nécessité de connaître le Braille - fait ressortir les lettres braille grâce à des points rétractables. Imprimantes en Braille permanent : édition sur papier : cher volumineux - (tout n'est pas retranscriptible : police, couleur..) Perception du clignotement possible Synthétiseurs vocaux : convertit les textes affichables en sons similaires à une lecture humaine : pas parfait (2 fois plus lent que la lecture visuelle) Claviers spéciaux : retour tactile en braille éphémère Agrandisseur d'écran : nécessite des déplacements d'affichage : pas évident de se situer. Scanners : transformer des textes imprimés en fichiers informatiques pouvant être lus par un synthétiseur vocal ou converti en braille après reconnaissance de caractères Reconnaisseurs de la voix : pas indispensables, les utilisateurs peuvent utiliser les claviers Mal voyants : appel aux fonctions de personnalisation du système d'exploitation : polices de caractères, couleurs, contraste,... Faire appel à un navigateur standard complété par un logiciel d'accès ou à un navigateur spécifique. . ==> il faut rendre les interfaces plus conviviales notamment les commandes des logiciels et des matériels pour produire du texte.

Accessibilité & handicap Handicap visuel - problèmes Les problèmes les plus fréquemment rencontrés Présence d'éléments graphiques sans alternative texte Nom des cadres n'est pas explicite Documents au format PDF pas toujours exploitables Utilisation de scripts Utilisation d'images pour afficher du texte Présence d'éléments graphiques sans alternative texte : Lorsqu'on passe la souris sur une image un texte explicatif est censé donner le sens de l'image, son utilité Nom des cadres n'est pas explicite : Le nom des cadres permet au non voyant de situer l'information dont il a besoin Documents au format PDF pas toujours exploitables : Pas consultable sur toutes les plate-formes sans manipulations Utilisation de scripts : Les scripts ne sont pas gérés par les navigateurs textuels (peuvent également être désactivés par crainte de virus)

Accessibilité & handicap Handicap visuel - problèmes Les problèmes les plus fréquemment rencontrés (suite) Liens images peu explicites Utilisation de la technologie Flash Titres des pages absents ou peu informatifs Sites complexes et peu homogènes Utilisation d'images pour afficher du texte : Dans ce cas on ne peut plus modifier la taille, la couleur, le contraste Liens images peu explicites : En l'absence d'image on ne comprend pas les liens. Il faut que les liens soient commentés pour que le contenu de la page de destination soit bien identifié. Utilisation de la technologie Flash : Cette technologie n'est pas prise en charge par les navigateurs pour aveugles Titres des pages absents ou peu informatifs : Ces titres sont très importants car ils sont un moyen de repère pour les internautes qui n'ont pas une vue globale de la page. Ils sont utiles également pour les moteurs de recherche Sites complexes et peu homogènes : Pour utiliser un site de manière optimale il faut une certaine homogénéité dans un site (une seule charte graphique)

Accessibilité & handicap Handicap visuel - recommandations Contraste : Contraste suffisant entre texte et arrière plan Eviter les motifs d'arrière plan trop visibles Longueur des pages : Pas de pages trop longues Structure : Respecter la codification HTML pour la structure (<H1>,< H2>,< H3>…) Contraste : Des combinaisons de couleurs entre le premier et l'arrière plan peuvent rendre les pages illisibles pour des daltoniens (attention au rouge et au vert) Des motifs en arrière plan peuvent rendre les pages illisibles Longueur des pages : Pas de pages trop longues : un aveugle aura du mal à parcourir rapidement la page Structure : Respecter la codification HTML pour la structure (entêtes <H1>,< H2>,< H3>, paragraphes…). Un aveugle pourra connaître le sujet et la structure de la page par la lecture des titres et sauter d'une section à l'autre en fonction de se qu'il recherche. Utilisation de feuilles de style pour séparer la structure et la forme

Accessibilité & handicap Handicap visuel - recommandations Pour les images, photos, animations : L'équivalent textuel doit faire passer un message Images décoratives l'attribut "ALT" doit être présent mais sans texte Images réactives : utiliser l'élément "MAP" pour fournir des descriptions textuelles. Vidéo : Fournir des descriptions audio ou texte des éléments vidéo Pour les images, photos, animations : Tout élément visuel doit être accompagné d'un commentaire textuel le décrivant. L'équivalent textuel doit faire passer un message, doit expliquer le rôle - la fonction de l'image, ce qui va se passer si on clique dessus et non une description du contenu de l'image. Utile pour les aveugles mais aussi pour les personnes qui désactivent l'affichage des images ou dont le navigateur ne prend en compte que le texte. Utile aussi pour les équipements du type PDA ou téléphones mobiles qui ne reconnaissent que le texte. On parle alors de contenus alternatifs. Par exemple, l'attribut «alt» permet de commenter une image insérée grâce à l'élément «IMG». Remarquons que ces commentaires d'images sont mis à profit par les principaux navigateurs graphiques — pendant les chargements des images et comme légende lorsque la souris s'attarde sur l'image. Images décoratives l'attribut "ALT" doit être présent mais sans texte, le logiciel de synthèse vocale sait alors qu'il peut ignorer l'image. ex : pour une barre de séparation il est inutile de préciser : "barre noire de séparation" Images réactives ou images à zones cliquables : image découpées en différentes zones (areas) auxquelles sont associées des actions. Utiliser l'élément "MAP" côté client pour fournir des descriptions textuelles. Example. <IMG src="welcome.gif" alt="Image map of areas in the library" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"> </MAP> Vidéo : Fournir des descriptions audio ou texte des éléments vidéo

Accessibilité & handicap Handicap visuel - recommandations Organisation des pages : Agencement cohérent des pages Texte : Pour les mal-voyants utiliser des polices relatives Liens Hypertextes : S'assurer que chaque lien a un sens. Exemple : <A href="mon-doc.html">Mon document est disponible en HTML</A> Texte : Utiliser des polices relatives (utiliser un pourcentage de la taille de la police par défaut). En principe, l'apparence de la page ne devrai pas changer si on fait varier la police (10, 12, 14, 18, 24) Organisation des pages : Utiliser une structure claire et constante / utiliser les CSS pour la mise en page et le style. Utiliser des en-têtes, listes et sommaires pour créer des pages faciles à scanner Liens Hypertextes : s'assurer que chaque lien a un sens quand il est lu seul. Le texte descriptif des liens améliore l'accès à ceux qui ne peuvent pas voir.

Accessibilité & handicap Handicap visuel - recommandations Graphiques et cartes : Faire un résumé du contenu ou utiliser l'attribut "longdesc". Cadres : Nommer chaque "frame" avec "title" ou "name", et inclure une version "NOFRAMES" Tableaux : Pas de tableaux pour formater du texte en colonnes. Utiliser les attributs "header", "scope" et "abbr" Graphiques et cartes : faire un résumé du contenu ou utiliser l'attribut longdesc. Cadres : Certaines technologies du Web ne peuvent pas interpréter les frames. Si le nom du cadre est explicite, l'aveugle qui n'a pas une vue globale de l'écran pourra repérer dans quel cadre trouver l'information qu'il recherche. Tableaux : La présentation d'un tableau en 2 dimensions est avant tout visuelle. Les interfaces d'assistance restitue cette présentation sous forme linéaire Le tableau doit rester compréhensible en lecture linéaire - Ajouter un résumé du tableau - Coder des entêtes clairs pour chaque ligne et chaque colonne - Ne pas utiliser de tableaux pour de la mise en page multi-colonnes de textes - Utiliser des feuilles de style pour séparer la présentation du contenu .

Accessibilité & handicap Handicap visuel - recommandations Scripts, appliquettes et plug-ins Prévoir un contenu équivalent Éviter la technologie Flash Documents en format PDF Proposer des formats alternatifs : TXT, RTF, HTML Scripts, appliquettes, et plug-ins : Les scripts ou applets peuvent être désactivés, ils peuvent ne pas être gérés par tous les navigateurs. Les plug-ins peuvent ne pas être présents sur le PC Technologie Flash : La technologie Flash n'est pas accessible aux déficients visuels. Certains navigateurs ne savent pas la gérer

Accessibilité & handicap Handicap visuel - recommandations Évaluer l'accessibilité Tester différents navigateurs (notamment Lynx) Utiliser des outils de validation * Faites tester votre site par des utilisateurs représentatifs (si possible) * Voir site du W3C/WAI : http://www.w3.org/WAI/ER/ (WAI : Web Accessibility Initiative) Tester différents navigateurs (notamment Lynx) - désactiver les graphiques, les sons et les animations - naviguer via un clavier - utiliser un écran monochrome - utiliser les outils d'analyses automatiques.

Accessibilité & Handicap Handicap visuel Exemple de deux pages Web présentant la même information : En mode graphique -> pour les voyants En mode texte -> exploitable par des lecteurs d'écran avec sortie en synthèse vocale pour les aveugles

http://www.microsoft.com/enable/default.htm Page comportant des images

http://www.microsoft.com/enable/default-u.htm Les images sont remplacées par du texte entre crochets

Accessibilité & Handicap Handicap auditif Le Web étant très visuel ce handicap est peu problématique (pour l'instant) Recommandations : Transcription des séquences audio Version sous-titrée des vidéos Actuellement, les effets sonores peuvent souvent être ignorés mais avec le développement du multimédia, le son devrait à l'avenir prendre une plus grande place. Transcription des séquences audio Version sous-titrée : intéressant pour les sourds et malentendants mais aussi pour les personnes valides dont l'ordinateur n'a pas de carte son, ou lorsque la vidéo est en langue étrangère.

Accessibilité & Handicap Déficience de la parole Dialogue homme / ordinateur = souris, clavier Peu d’incidence sur l’utilisation du Web actuellement Futurs développements : Possibilité d’utilisation du langage des signes universel, favorisée par le haut-débit Recommandation : Si interfaces vocales deviennent les seules méthodes d’entrée, les utilisateurs devront pouvoir utiliser d’autres interfaces alternatives. Dans certaines situations l'emploi d'un clavier peut être difficile. A l'avenir il est probable que le dialogue homme / ordinateur se fera davantage par la voix. Pour l'instant la voix n'est qu'un complément à la saisie au clavier. Le problème se posera lorsque la parole sera la principale voire la seule méthode d'entrée. Chat, téléphonie / internet : les utilisateurs devront garder la possibilité d'échanger sous forme de textes.

Accessibilité & Handicap Handicaps moteurs Imagemaps Ne doivent pas nécessiter un positionnement trop précis de la souris (utilisation possible du clavier) Les applets doivent fournir des méthodes d'interaction sans la souris Recherches en cours sur le cerveau pour les paraplégiques, définition neuronale de la volonté Les handicapés moteurs ont souvent du mal à effectuer des mouvements précis ou à enfoncer plusieurs touches en même temps au clavier => mieux concevoir les navigateurs.

Accessibilité & Handicap Handicaps cognitifs Les règles ne sont pas encore clairement définies 2 types de problèmes : Raisonnement spatial Mémoire

Accessibilité & Handicap Handicaps cognitifs-recommandations Navigation Simplifier la navigation (souhaitable pour tous) Si problème de perception spatiale => nécessité d'une aide Longueur des pages : Faire des pages courtes Structure : Utiliser les balises de titres (<H1>,<H2>,<H3>…) Navigation simplifier la navigation (souhaitable pour tous) si problème de perception spatiale => nécessité d'une aide : plan de site visualisation du trajet de l'utilisateur et position actuelle

Accessibilité & Handicap Handicaps cognitifs-recommandations Liens Hypertextes : Les documenter pour les rendre explicites Moteurs de recherche : Devraient intégrer un correcteur d'orthographe

Accessibilité & Handicap Bobby Analyse l'accessibilité des pages Web pour les handicapés Analyse les problèmes de compatibilité de votre code avec différents navigateurs Le logo "Bobby approved" peut être utilisé si le site répond au niveau de conformité A du WAI Niveau A : toutes les priorités 1 sont traitées : voir site du W3C / WAI Il existe 3 niveaux d'accessibilités correspondant aux priorités 1-2-3 : A AA AAA

Accessibilité & Handicap Bobby Remarque : Bobby n'est pas conçu pour valider votre code HTML mais pour valider l'accessibilité de vos pages. Pour valider votre code HTML utiliser par exemple : le "W3C validation service" : http://validator.w3.org/ Dr Watson : http://watson.addy.com etc ...

Accessibilité & Handicap Bobby Démo http://www.cast.org/bobby/

Accessibilité & Handicap Conclusion Les progrès technologiques ont deux effets contradictoires : Créer des barrières technologiques Apporter des solutions aux handicaps Solution : davantage sensibiliser les développeurs de sites et/ou réglementer ? Dès la création d'un site l'accessibilité doit être prise en compte même partiellement et non après coup. De cette manière on évite des coûts supplémentaires de redéveloppement.

Accessibilité & Handicap Conclusion Véritable révolution pour le monde des non voyants : Aspect sociologique , tissage de liens Premier accès à une lecture illimitée et diversifiée Agents utilisateurs de plus en plus performants pour les différents types d’handicap visuel : perception des couleurs, photophobie,vision tubulaire… Dès la création d'un site l'accessibilité doit être prise en compte même partiellement et non après coup. De cette manière on évite des coûts supplémentaires de redéveloppement.

Accessibilité & Handicap Conclusion Maintenant, pour tous, le web remplit sa fonction première : Le transfert de l’information Dès la création d'un site l'accessibilité doit être prise en compte même partiellement et non après coup. De cette manière on évite des coûts supplémentaires de redéveloppement.

Accessibilité & Handicap Bibliographie Nielsen J. Conception de sites Web www.w3c.org www.braillenet.jussieu.fr www.cast.org/bobby/ www.fonction-publique.gouv.fr/lareform/admelec/ www.00h00.com