Accessibilité numérique aux personnes déficientes visuelles ?

1. Accessibilité numérique aux personnes déficientes visuelles ? Mireille BLAY-FORNARINO Ecole polytechnique Universitaire de Nice- Sophia Antipolis, laboratoire I3S, projet rainbow blay@essi.fr & Anouar MEJRI Colloque LECAinternet, 30 mai 2005

2. Personnes déficientes visuelles et internet • Plus de 6 millions de personnes handicapées en France • 1,2 millions de personnes déficientes visuelles • 2 fois plus équipées que la moyenne des français • 2,6 millions d’internautes ont plus de 50 ans • 85% souffrent de problèmes visuels • Augmentation des terminaux mobiles : • lisibilité et interaction des facteurs de succès Colloque LECAinternet, 30 mai 2005

3. Le Web : un outil essentiel d’intégration et d’accès aux savoirs • Le handicap visuel, partiel ou complet, n’empêche pas l’accès à Internet • livres, journaux, bases de connaissances • documents professionnels, administratifs et commerciaux • outil de communication : forums de  discussion, correspondances électroniques, formulaires. Colloque LECAinternet, 30 mai 2005

4. Plan de l’exposé • Accessibilité du Web pour les personnes déficientes visuelles • Corrections d’un site web • Autres approches de l’accessibilité du web aux personnes déficientes visuelles Colloque LECAinternet, 30 mai 2005

5. * Accessibilité du web Définition de l'accessibilité par Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web : « Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » Colloque LECAinternet, 30 mai 2005

6. Egalité des internautes : Visualisation du contenu • Les modifications de taille de caractères • Les modifications de couleurs • Les contrastes • L’écoute Colloque LECAinternet, 30 mai 2005

7. Vision « classique » Colloque LECAinternet, 30 mai 2005

8. Le texte est grossi Colloque LECAinternet, 30 mai 2005

9. Le texte apparaît en petit Colloque LECAinternet, 30 mai 2005

10. Changement de couleurs Colloque LECAinternet, 30 mai 2005

11. Inversion des couleurs Colloque LECAinternet, 30 mai 2005

12. Egalité des internautes : La navigation • La structure de la page • Les liens • Les raccourcis Mais le site doit avoir été conçu dans une optique d’accessibilité, sinon … Colloque LECAinternet, 30 mai 2005

13. Inégalité des internautes : Visualisation/Navigation • Visualisation • Absence d’informations sur les images • Absence de contrastes • Absence d’information sur les cadres • …. • Mauvaise structuration • Liens hors contexte (« cliquer ici ») • Confusion entre mise en page et visualisation Colloque LECAinternet, 30 mai 2005

14. Interface classique Colloque LECAinternet, 30 mai 2005

15. Le texte est « faiblement » grossi Colloque LECAinternet, 30 mai 2005

16. Inversion des couleurs Colloque LECAinternet, 30 mai 2005

17. Absence d’image Colloque LECAinternet, 30 mai 2005

18. Information sur les liens Colloque LECAinternet, 30 mai 2005

19. Pourquoi rendre votre Site accessible ? • Pour mieux communiquer • vendre, partager, informer • Parce que c’est obligatoire : • Le 12 février 2005, publication de la loi pour « l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » L’article 47 indique : "Les services de communication publique en ligne des services de l'Etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées". Un délai de 3 ans est donné pour respecter cette obligation. Colloque LECAinternet, 30 mai 2005

20. Votre site est-il accessible … aux déficients visuels ? Tester ……………….. Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.» ? Colloque LECAinternet, 30 mai 2005

21. Votre site est-il accessible ? Des « règles » à respecter … • WAI : Web Accessibility Initiative • groupe de travail émanant du W.3.C • W.C.A.G 1.0 (Web Content Accessibility Guidelines) : ensemble de recommandations permettant de développer des sites Internet dans le respect de l'accessibilité à tous. • ADAE • L'Agence pour le Développement de l'Administration Electronique a établi un référentiel pour l'accessibilité des sites web de l'administration française. Colloque LECAinternet, 30 mai 2005

22. Votre site est-il accessible ? Des outils de vérification • 2) Outils standards de visualisation: • LoupeMS, fonte, changements de contrastes • Traduction textuelle • 1) Outils de validation • Syntaxes • Règles d’accessibilité Colloque LECAinternet, 30 mai 2005

23. Rendre votre site accessible … • Prenons un exemple • Attention, sur la « toile », vous trouverez différentes méthodologies de validation de site web. • Nous nous plaçons ici dans le contexte d’un site existant et d’un «écrivain» débutant. Colloque LECAinternet, 30 mai 2005

24. Rendre votre site accessible … • Prenons un exemple « facile » http://www.up.univmrs.fr/wpsycle/ColloqueLECAinternet/accueil.html Local Colloque LECAinternet, 30 mai 2005

25. Validation « html » • Vérifier votre site: http://validator.w3c.org • résultats • Vérifier et réparer votre site http://tidy.sourceforge.net/ • file:///E:/EcoleMarseille/Web/AccueilTidy.html • résultat • Comparons les sources Colloque LECAinternet, 30 mai 2005

26. Validation « html » • Vérifier votre site: http://validator.w3c.org • résultats • Vérifier et réparer votre site http://tidy.sourceforge.net/ • file:///E:/EcoleMarseille/Web/AccueilTidy.html • résultat • Comparons les sources Colloque LECAinternet, 30 mai 2005

27. Validation « html » • Vérifier votre site: http://validator.w3c.org • résultats • Vérifier et réparer votre site http://tidy.sourceforge.net/ • file:///E:/EcoleMarseille/Web/AccueilTidy.html • résultat • Comparons les sources Colloque LECAinternet, 30 mai 2005

28. Validation et séparation entre contenu et visualisation Après Tidy… <div align="center"> <font face="Verdana" size="1"> <b>Colloque de l'Ecole Doctorale</b> </font> <font face="Verdana" size="1"> <b>"Cognition,Langage et Education"</b> </font></div> : span.c5 {font-family: Verdana; font-size: 70%} div.c2 {text-align: center} …… </style> … <div class="c2"><span class="c5"> <b>Colloque de l'Ecole Doctorale</b> </span> <span class="c5"> <b>"Cognition, Langage et Education"</b> </span></div> </td> Avant Colloque LECAinternet, 30 mai 2005

29. Mon site respecte la syntaxe HTML, est-il accessible ? • Des outils de vérifications des règles WCAG. • Testons le site avec « bobby » : http://webxact.watchfire.com/ Colloque LECAinternet, 30 mai 2005

30. Règles d’accessibilité : (2) Souhaité Colloque LECAinternet, 30 mai 2005

31. Use relative sizing and positioning, rather than absolute • Tables and table cells, columns, etc. — Use percent values for widths and heights. A percent is a proportion of available space; otherwise the values are taken to be number of pixels, which may be too many or too few depending on the screen size. A fixed-size table cell cannot expand if its contents expand, for instance because the user has increased the font size … • Avant :que se passe-t-il si on redimensionne l’écran ? <table border="0" cellpadding="4" cellspacing="2" width="615"> • Après : Ce qui change …. <table border="0" cellpadding="4" cellspacing="2" width="100%"> Testons Colloque LECAinternet, 30 mai 2005

32. Use relative sizing and positioning, rather than absolute • Tables and table cells, columns, etc. — Use percent values for widths and heights. A percent is a proportion of available space; otherwise the values are taken to be number of pixels, which may be too many or too few depending on the screen size. A fixed-size table cell cannot expand if its contents expand, for instance because the user has increased the font size … • Avant :que se passe-t-il si on redimensionne l’écran ? <table border="0" cellpadding="4" cellspacing="2" width="615"> • Après : Ce qui change …. <table border="0" cellpadding="4" cellspacing="2" width="100%"> Testons Colloque LECAinternet, 30 mai 2005

33. Règles d’accessibilité : warning (1) indispensable Colloque LECAinternet, 30 mai 2005

34. If an image conveys important information beyond what is in its alternative text, provide an extended description. • Actuellement : <div class="c2"><img src="accueil_files/Sitelogo.gif" alt="" class="c1"> • La controverse du logo Soit un logo de FooBar : • alt="" ou alt="FooBar logo" ? • ou alt="FooBar main page " ? • Correction ? <img src="accueil_files/Sitelogo.gif" alt="Logo de l'université de Provence" class="c1"> Colloque LECAinternet, 30 mai 2005

35. Règles d’accessibilité Colloque LECAinternet, 30 mai 2005

36. Ne pas ouvrir automatiquement de nouvelles fenêtres ou modifier la fenêtreactive sans en avertir l’utilisateur • Avant <p class="c12">inscription obligatoire [ <a href="http://...inscription.rtf" target="_blank">télécharger</a> ]</p> • Que s’est-il passé? • désactivation du bouton back • Prévenir l’utilisateur de ce qui va se produire : <p class="c12">inscription obligatoire [ <a href="http://..inscription.rtf" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">télécharger</a>]</p> Colloque LECAinternet, 30 mai 2005

37. Règles d’accessibilité : niveau 3 Colloque LECAinternet, 30 mai 2005

38. Identify the language of the text & provide a summary for table • <HTML lang="fr"> • <table border="0" cellpadding="4" cellspacing="2" width="100%«  summary="Cette table sépare l'écran en une partie navigation à gauche et contenu à droite"> Colloque LECAinternet, 30 mai 2005

39. Règles d’accessibilité : warning niveau 3 Colloque LECAinternet, 30 mai 2005

40. Consider adding keyboard shortcuts to frequently used links • <a href="./lieutidy.html" class="c6" accesskey="l">Accès au colloque &amp; inscription</a> • Attention aux conflits avec certaines fonctionnalités du navigateur lui-même ou de la synthèse vocale (raccourcis propres). Colloque LECAinternet, 30 mai 2005

41. Naviguer … plus vite <span id=""hideme" style="display: none"> <a href="#skip" display="#none" accesskey="s" title="Passer le menu de navigation pour aller à la partie principale du document">Passer la Navigation</a></span> Colloque LECAinternet, 30 mai 2005

42. Votre site respecte la/les norme(s) d’accessibilité • Vous êtes autorisés à marquer votre site … • C’est le moment • de le tester avec différents utilisateurs • De l’enrichir Colloque LECAinternet, 30 mai 2005

43. Autres retours d’expériences • Résumer le texte de bienvenue • Rajouter des icônes beaucoup plus grosses sur la page d'accueil • Simplifier au maximum le menu • Mettre en place une méthode qui grossit les caractères au passage de la souris  • Mettre le logo de bobby sur les pages réellement correctes et aussi la compatibilité W3C  • Ajouter un plan du site pour connaître d'un coup d'œil l'articulation des choses  • Changer la couleur des boutons pour être plus visible par tout le monde • …. Au-delà des normes ! ? Colloque LECAinternet, 30 mai 2005

44. Début de conclusion • La correction de sites web n’est pas toujours aussi « facile » • problèmes de structuration • codes générés avec des outils « verbeux » • Choix : est-ce correct? • Par exemple, mettre un symbole pour signaler le caractère obligatoire après le champs! Au-delà des normes ! ? Colloque LECAinternet, 30 mai 2005

45. Suite de début de conclusion • Mais les sites corrigés sont : • plus accessibles à tous • Plus faciles à maintenir Notons des progrès dans les outils de construction des sites webs Et si les outils s’adaptaient aux utilisateurs ? Colloque LECAinternet, 30 mai 2005

46. Autres travaux réalisés dans un cadre pédagogique • Des tableaux linéarisés • Des signets pour tous • Des sites web embarqués « parlant » • Des analyseurs de sites web • … Colloque LECAinternet, 30 mai 2005

47. Tableau : Emploi du temps Colloque LECAinternet, 30 mai 2005 mejrianouar@hotmail.com

48. Tableau : Emploi du temps Colloque LECAinternet, 30 mai 2005

49. Tableau : décompositions Colonne numéro 2 du tableau numéro 1 Ligne numéro 1 du tableau numéro 1 Colloque LECAinternet, 30 mai 2005

50. Signets électroniques Le Horla, Guy de Maupassant, Fantastique Résumé : Nouvelle racontant la progression de la folie de l'auteur Chapitre 1 – Mai       8 mai.      Quelle journée admirable !       J'ai passé toute la matinée étendu sur l'herbe, devant ma maison, sous l'énorme platane qui la couvre,       l'abrite et l'ombrage tout entière.       J'aime ma maison où j'ai grandi.      De mes fenêtres, je vois la Seine qui coule, le long de mon jardin, derrière la route, presque chez moi,      la grande et large Seine qui va de Rouen au Havre, couverte de bateaux qui passent. Chapitre 2 – Juin       Comme il faisait bon ce matin ! GRISEL Virginie <grisel@essi.fr>PANONT Julie-Anne <panont@essi.fr>BIANCO Sébastien <bianco@essi.fr>LABAT Sébastien <labat@essi.fr> Projet encadré par : DERY Anne-Marie<pinna@essi.fr>COLLAVIZZA Hélène<helen@essi.fr> Colloque LECAinternet, 30 mai 2005