Colloque LECAinternet, 30 mai 2005 1 Accessibilité numérique aux personnes déficientes visuelles ? Mireille BLAY-FORNARINO Ecole polytechnique Universitaire.

Présentation au sujet: "Colloque LECAinternet, 30 mai 2005 1 Accessibilité numérique aux personnes déficientes visuelles ? Mireille BLAY-FORNARINO Ecole polytechnique Universitaire."— Transcription de la présentation:

1 Colloque LECAinternet, 30 mai 2005 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 & Anouar MEJRI

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

3 Colloque LECAinternet, 30 mai 20053 Le Web : un outil essentiel dintégration et daccès aux savoirs n Le handicap visuel, partiel ou complet, nempêche pas laccès à Internet n livres, journaux, bases de connaissances n documents professionnels, administratifs et commerciaux n outil de communication : forums de discussion, correspondances électroniques, formulaires.

4 Colloque LECAinternet, 30 mai 20054 Plan de lexposé n Accessibilité du Web pour les personnes déficientes visuelles n Corrections dun site web n Autres approches de laccessibilité du web aux personnes déficientes visuelles

5 Colloque LECAinternet, 30 mai 20055 * 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. »

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

7 Colloque LECAinternet, 30 mai 20057 Vision « classique »

8 Colloque LECAinternet, 30 mai 20058 Le texte est grossi

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

10 Colloque LECAinternet, 30 mai 200510 Changement de couleurs

11 Colloque LECAinternet, 30 mai 200511 Inversion des couleurs

12 Colloque LECAinternet, 30 mai 200512 Egalité des internautes : La navigation n La structure de la page n Les liens n Les raccourcis Mais le site doit avoir été conçu dans une optique daccessibilité, sinon …

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

14 Colloque LECAinternet, 30 mai 200514 Interface classique

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

16 Colloque LECAinternet, 30 mai 200516 Inversion des couleurs

17 Colloque LECAinternet, 30 mai 200517 Absence dimage

18 Colloque LECAinternet, 30 mai 200518 Information sur les liens

19 Colloque LECAinternet, 30 mai 200519 Pourquoi rendre votre Site accessible ? n n Pour mieux communiquer n n vendre, partager, informer n n Parce que cest obligatoire : n n 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 » Larticle 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.

20 Colloque LECAinternet, 30 mai 200520 Votre site est-il accessible … aux déficients visuels ? 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. » Tester ………………..

21 Colloque LECAinternet, 30 mai 200521 Votre site est-il accessible ? Des « règles » à respecter … n WAI : Web Accessibility Initiative n groupe de travail émanant du W.3.C n 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. n ADAE n 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.

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

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

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

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

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

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

28 Colloque LECAinternet, 30 mai 200528 Validation et séparation entre contenu et visualisation Colloque de l'Ecole Doctorale "Cognition,Langage et Education" : span.c5 {font-family: Verdana; font-size: 70%} div.c2 {text-align: center} …… … Colloque de l'Ecole Doctorale "Cognition, Langage et Education" Avant Après Tidy…

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

30 Colloque LECAinternet, 30 mai 200530 Règles daccessibilité : (2) Souhaité

31 Colloque LECAinternet, 30 mai 200531 Use relative sizing and positioning, rather than absolute n n 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 … n n Avant : que se passe-t-il si on redimensionne lécran ? n n Après : Ce qui change …. Testons

32 Colloque LECAinternet, 30 mai 200532 Use relative sizing and positioning, rather than absolute n n 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 … n n Avant : que se passe-t-il si on redimensionne lécran ? n n Après : Ce qui change …. Testons

33 Colloque LECAinternet, 30 mai 200533 Règles daccessibilité : warning (1) indispensable

34 Colloque LECAinternet, 30 mai 200534 If an image conveys important information beyond what is in its alternative text, provide an extended description. n Actuellement : n La controverse du logo Soit un logo de FooBar : n n alt="" ou alt="FooBar logo" ? n n ou alt="FooBar main page " ? n Correction ?

35 Colloque LECAinternet, 30 mai 200535 Règles daccessibilité

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

37 Colloque LECAinternet, 30 mai 200537 Règles daccessibilité : niveau 3

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

39 Colloque LECAinternet, 30 mai 200539 Règles daccessibilité : warning niveau 3

40 Colloque LECAinternet, 30 mai 200540 Consider adding keyboard shortcuts to frequently used links n n Accès au colloque & inscription n n Attention aux conflits avec certaines fonctionnalités du navigateur lui-même ou de la synthèse vocale (raccourcis propres).

41 Colloque LECAinternet, 30 mai 200541 Naviguer … plus vite Passer la Navigation Passer la Navigation

42 Colloque LECAinternet, 30 mai 200542 Votre site respecte la/les norme(s) daccessibilité n Vous êtes autorisés à marquer votre site … n Cest le moment n de le tester avec différents utilisateurs n De lenrichir

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

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

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

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

47 Colloque LECAinternet, 30 mai 200547 Tableau : Emploi du temps Heure LundiMardiMercrediJeudiVendredi 8.00AnglaisComptaAnglaisComptaAnglais 9.00EspagnolComptaEspagnolComptaEspagnol 10.00Eco 11.00Maths 12.00Maths 13.00Astronomie 19.00Orchestre 20.00Orchestre mejrianouar@hotmail.com

48 Colloque LECAinternet, 30 mai 200548 Tableau : Emploi du temps Heure LundiMardiMercrediJeudiVendredi 8.00AnglaisComptaAnglaisComptaAnglais 9.00EspagnolComptaEspagnolComptaEspagnol 10.00Eco 11.00Maths 12.00Maths 13.00Astronomie 19.00Orchestre 20.00Orchestre

49 Colloque LECAinternet, 30 mai 200549 Tableau : décompositions Colonne numéro 2 du tableau numéro 1 Heure Lundi Heure 8.00Anglais 9.00Espagnol 10.00 11.00 12.00 13.00 19.00 20.00 Ligne numéro 1 du tableau numéro 1 Heure 8.00 LundiAnglais MardiCompta MercrediAnglais JeudiCompta VendrediAnglais

50 Colloque LECAinternet, 30 mai 200550 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. 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. 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 Chapitre 2 – Juin Comme il faisait bon ce matin ! Comme il faisait bon ce matin ! GRISEL Virginie PANONT Julie-Anne BIANCO Sébastien LABAT Sébastien grisel@essi.frpanont@essi.frbianco@essi.frlabat@essi.fr Projet encadré par : DERY Anne-Marie COLLAVIZZA Hélène pinna@essi.frhelen@essi.fr

51 Colloque LECAinternet, 30 mai 200551 Signets électroniques 8 mai. 8 mai. Quelle journée admirable ! 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'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. 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. 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> Comme il faisait bon ce matin ! Comme il faisait bon ce matin ! … </livre>

52 Colloque LECAinternet, 30 mai 200552 Outil de « synthèse de la parole à partir du texte » Outil de « synthèse de la parole à partir du texte » n http://kaivalyam.essi.fr/ http://kaivalyam.essi.fr/ n Code-Barre To Speech : andral@essi.fr andral@essi.fr n Projets étudiants : http://www.essi.fr/~helen/

53 Colloque LECAinternet, 30 mai 200553 Assistant Web pour aveugles n n Constats : n n Normes : rendre vocale le contenu des pages n n Un lecteur d'écran : « rendre » le contenu des pages web par sauts séquentiels (ligne à ligne, paragraphe à paragraphe...). n n La séquentialisation allonge le temps d'exploration et la rend incertaine. n n Abandons, blocage, 10 fois plus de temps qu'un voyant (avec clavier et souris) pour certaines tâches n n Objectifs : passer d'un logiciel centré sur la compréhension de la page à un logiciel centré sur l'accompagnement de tâches à réaliser avec la page. n n Proposer une arborescence de catégories de liens et des liens eux- mêmes. n n La Navigation nest plus linéaire : n n utilisateur voyant gain dans un ratio compris entre 1 et 2. n n Pour un non-voyant, ce ratio est entre 1 et 10. Equipe : Sébastien LOUIS, Etienne COUTANT, Romain VINCENS, Amaury NOIRCLERE Encadrants : Jean-Paul STROMBONI, Hélène COLLAVIZZA, Gérard UZAN

54 Colloque LECAinternet, 30 mai 200554

55 Colloque LECAinternet, 30 mai 200555 Conclusion n La France a rejoint de nombreux pays dans l'égalité pour tous à vivre dans la société de l'information numérique. n Des actions en justice contre l'inaccessibilité de sites Web Internet et Intranet sont en cours aux USA. n L'accessibilité des sites Web est une source de bénéfices non seulement pour les internautes handicapés mais aussi pour tous les internautes. n Mais il reste encore à mieux comprendre la toile, à construire des outils de lecture, navigation, écriture adaptés à ce nouvel espace.

56 Colloque LECAinternet, 30 mai 2005 56 Merci Aussi à n n À l équipe denseignants (Anne-Marie, Hélène, Jean- Paul, Jean-Yves, Karima, Stéphane, Michel, …), n n aux étudiants (trop nombreux pour être cités) n n À tous les autres (Anne-Marie, Alain, Carine, Daniel, David, Guy, Jean, Philippe …) devint@essi.fr http://www.essi.fr/devint

57 Colloque LECAinternet, 30 mai 200557

58 Colloque LECAinternet, 30 mai 200558

59 Colloque LECAinternet, 30 mai 200559