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

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai 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.

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai * 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 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

Colloque LECAinternet, 30 mai Vision « classique »

Colloque LECAinternet, 30 mai Le texte est grossi

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

Colloque LECAinternet, 30 mai Changement de couleurs

Colloque LECAinternet, 30 mai Inversion des couleurs

Colloque LECAinternet, 30 mai 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 …

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai Interface classique

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

Colloque LECAinternet, 30 mai Inversion des couleurs

Colloque LECAinternet, 30 mai Absence dimage

Colloque LECAinternet, 30 mai Information sur les liens

Colloque LECAinternet, 30 mai 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.

Colloque LECAinternet, 30 mai 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 ………………..

Colloque LECAinternet, 30 mai 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.

Colloque LECAinternet, 30 mai 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é

Colloque LECAinternet, 30 mai 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.

Colloque LECAinternet, 30 mai Rendre votre site accessible … n Prenons un exemple « facile » Local

Colloque LECAinternet, 30 mai Validation « html » n Vérifier votre site: n résultats résultats n Vérifier et réparer votre site n file:///E:/EcoleMarseille/Web/AccueilTidy.html file:///E:/EcoleMarseille/Web/AccueilTidy.html n résultat n Comparons les sources

Colloque LECAinternet, 30 mai Validation « html » n Vérifier votre site: n résultats résultats n Vérifier et réparer votre site n file:///E:/EcoleMarseille/Web/AccueilTidy.html file:///E:/EcoleMarseille/Web/AccueilTidy.html n résultat n Comparons les sources

Colloque LECAinternet, 30 mai Validation « html » n Vérifier votre site: n résultats résultats n Vérifier et réparer votre site n file:///E:/EcoleMarseille/Web/AccueilTidy.html file:///E:/EcoleMarseille/Web/AccueilTidy.html n résultat n Comparons les sources

Colloque LECAinternet, 30 mai 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…

Colloque LECAinternet, 30 mai 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 » :

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

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai 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

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

Colloque LECAinternet, 30 mai 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 ?

Colloque LECAinternet, 30 mai Règles daccessibilité

Colloque LECAinternet, 30 mai 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=" 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=" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">télécharger ]

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

Colloque LECAinternet, 30 mai 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">

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

Colloque LECAinternet, 30 mai 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).

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

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai 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 ! ?

Colloque LECAinternet, 30 mai 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 ! ?

Colloque LECAinternet, 30 mai 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 ?

Colloque LECAinternet, 30 mai 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 …

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

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

Colloque LECAinternet, 30 mai Tableau : décompositions Colonne numéro 2 du tableau numéro 1 Heure Lundi Heure 8.00Anglais 9.00Espagnol Ligne numéro 1 du tableau numéro 1 Heure 8.00 LundiAnglais MardiCompta MercrediAnglais JeudiCompta VendrediAnglais

Colloque LECAinternet, 30 mai 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 Projet encadré par : DERY Anne-Marie COLLAVIZZA Hélène

Colloque LECAinternet, 30 mai 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>

Colloque LECAinternet, 30 mai Outil de « synthèse de la parole à partir du texte » Outil de « synthèse de la parole à partir du texte » n n Code-Barre To Speech : n Projets étudiants :

Colloque LECAinternet, 30 mai 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

Colloque LECAinternet, 30 mai

Colloque LECAinternet, 30 mai 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.

Colloque LECAinternet, 30 mai 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 …)

Colloque LECAinternet, 30 mai

Colloque LECAinternet, 30 mai

Colloque LECAinternet, 30 mai