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

Colloque LECAinternet, 30 mai 2005

1

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

visuelles ?visuelles ?

Mireille BLAY-FORNARINOMireille BLAY-FORNARINOEcole polytechnique Universitaire de Nice- Sophia Antipolis,

laboratoire I3S, projet [email protected]

& & Anouar MEJRIAnouar MEJRI

http://rainbow.essi.fr/


2

Personnes déficientes visuelles et Personnes déficientes visuelles et internet internet

Plus de 6 millions de personnes handicapées Plus de 6 millions de personnes handicapées en Franceen France 1,2 millions de personnes déficientes visuelles1,2 millions de personnes déficientes visuelles 2 fois plus équipées que la moyenne des français2 fois plus équipées que la moyenne des français

2,6 millions d’internautes ont plus de 50 ans 2,6 millions d’internautes ont plus de 50 ans 85% souffrent de problèmes visuels85% souffrent de problèmes visuels

Augmentation des terminaux mobiles : Augmentation des terminaux mobiles : lisibilité et interaction des facteurs de succèslisibilité et interaction des facteurs de succès


3

Le Web : un outil essentiel Le Web : un outil essentiel d’intégration et d’accès aux savoirsd’intégration et d’accès aux savoirs Le handicap visuel, partiel ou complet, Le handicap visuel, partiel ou complet,

n’empêche pas n’empêche pas l’accès l’accès à à Internet Internet livres, journaux, bases de connaissanceslivres, journaux, bases de connaissances documents professionnels, administratifs et documents professionnels, administratifs et

commerciaux commerciaux outil de communication : forums de outil de communication : forums de

discussion, correspondances électroniques, discussion, correspondances électroniques, formulaires. formulaires.


4

Plan de l’exposéPlan de l’exposé

Accessibilité du Web pour les Accessibilité du Web pour les personnes déficientes visuellespersonnes déficientes visuelles

Corrections d’un site webCorrections d’un site web Autres approches de l’accessibilité du Autres approches de l’accessibilité du

web aux personnes déficientes web aux personnes déficientes visuellesvisuelles


5

** Accessibilité du web 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

Egalité des internautes : Egalité des internautes : Visualisation du contenuVisualisation du contenu Les modifications de taille de caractèresLes modifications de taille de caractères Les modifications de couleursLes modifications de couleurs Les contrastesLes contrastes L’écouteL’écoute


7

Vision « classique »Vision « classique »


8

Le texte est grossiLe texte est grossi


9

Le texte apparaît en petitLe texte apparaît en petit


10

Changement de couleursChangement de couleurs


11

Inversion des couleursInversion des couleurs


12

Egalité des internautes : Egalité des internautes : La navigationLa navigation La structure de la pageLa structure de la page Les liensLes liens Les raccourcisLes raccourcis

Mais le site doit avoir été conçu Mais le site doit avoir été conçu dans une optique d’accessibilité, dans une optique d’accessibilité, sinon …sinon …


13

Inégalité Inégalité des internautes : des internautes : Visualisation/NavigationVisualisation/Navigation VisualisationVisualisation

Absence d’informations sur les imagesAbsence d’informations sur les images Absence de contrastesAbsence de contrastes Absence d’information sur les cadresAbsence d’information sur les cadres ……..

Mauvaise structurationMauvaise structuration Liens hors contexte (« cliquer ici »)Liens hors contexte (« cliquer ici ») Confusion entre mise en page et visualisation Confusion entre mise en page et visualisation


14

Interface classiqueInterface classique


15

Le texte est « faiblement » grossiLe texte est « faiblement » grossi


16

Inversion des couleursInversion des couleurs


17

Absence d’imageAbsence d’image


18

Information sur les liensInformation sur les liens


19

Pourquoi rendre votre Site Pourquoi rendre votre Site accessible ?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.


20

Votre site est-il accessible … Votre site est-il accessible … aux déficients visuels ? 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 ………………..Tester ………………..


21

Votre site est-il accessible ? Votre site est-il accessible ? Des « règles » à respecter …Des « règles » à respecter … WAI : Web Accessibility Initiative WAI : Web Accessibility Initiative

groupe de travail émanant du W.3.C groupe de travail émanant du W.3.C W.C.A.G 1.0 (Web Content Accessibility W.C.A.G 1.0 (Web Content Accessibility

Guidelines) : ensemble de recommandations Guidelines) : ensemble de recommandations permettant de développer des sites Internet dans permettant de développer des sites Internet dans le respect de l'accessibilité à tous. le respect de l'accessibilité à tous.

ADAEADAE L'Agence pour le Développement de L'Agence pour le Développement de

l'Administration Electronique a établi un référentiel l'Administration Electronique a établi un référentiel pour l'accessibilité des sites web de pour l'accessibilité des sites web de l'administration française.l'administration française.


22

Votre site est-il accessible ? Votre site est-il accessible ? Des outils de vérificationDes outils de vérification 2) Outils standards de visualisation: 2) Outils standards de visualisation:

LoupeMS, fonte, changements de LoupeMS, fonte, changements de contrastescontrastes

Traduction textuelleTraduction textuelle

1) Outils de validation1) Outils de validation SyntaxesSyntaxes Règles d’accessibilitéRègles d’accessibilité


23

Rendre votre site accessible …Rendre votre site accessible …

Prenons un exemplePrenons un exemple Attention, sur la « toile », vous trouverez Attention, sur la « toile », vous trouverez

différentes méthodologies de validation de différentes méthodologies de validation de site web.site web.

Nous nous plaçons ici dans le contexte Nous nous plaçons ici dans le contexte d’un site existant et d’un «écrivain» d’un site existant et d’un «écrivain» débutant.débutant.


24

Rendre votre site accessible …Rendre votre site accessible …

Prenons un exemple « facile »Prenons un exemple « facile »

http://www.up.univmrs.fr/wpsycle/ColloqueLECAinternet/accueil.html

Local

E:\EcoleMarseille\Web\accueil.html


25

Validation « html »Validation « html » Vérifier votre site: Vérifier votre site: http://validator.w3c.orghttp://validator.w3c.org

résultatsrésultats

Vérifier et réparer votre site Vérifier et réparer votre site http://tidy.sourceforge.net/http://tidy.sourceforge.net/ file:///E:/EcoleMarseille/Web/AccueilTidy.htmlfile:///E:/EcoleMarseille/Web/AccueilTidy.html résultatrésultat Comparons les sourcesComparons les sources

http://validator.w3c.org/

E:\EcoleMarseille\Web\Validation Results1.htm

http://tidy.sourceforge.net/

E:\EcoleMarseille\Web\AccueilTidy.html


26









27









28

Validation et séparation entre Validation et séparation entre contenu et visualisationcontenu et visualisation

<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 etEducation"</b></span></div></td>

Avant

Après Tidy…


29

Mon site respecte la syntaxe HTML, Mon site respecte la syntaxe HTML, est-il accessible ?est-il accessible ? Des outils de vérifications des règles Des outils de vérifications des règles

WCAG.WCAG. Testons le site avec « bobby » : Testons le site avec « bobby » :

http://webxact.watchfire.com/http://webxact.watchfire.com/


30

Règles d’accessibilité : Règles d’accessibilité : (2) Souhaité(2) Souhaité


31

Use relative sizing and Use relative sizing and positioning, rather than absolute 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%">

TestonsTestons

E:\EcoleMarseille\Web\accueilTidyBarreBobby.html


32

Use relative sizing and Use relative sizing and positioning, rather than absolute 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%">

TestonsTestons

E:\EcoleMarseille\Web\accueilTidyBarreBobby.html


33

Règles d’accessibilité : Règles d’accessibilité : warning (1) indispensablewarning (1) indispensable


34

If an image conveys important information If an image conveys important information beyond what is in its alternative text, beyond what is in its alternative text, provide an extended description.provide an extended description.

Actuellement :Actuellement : <div class="c2"><img src="accueil_files/Sitelogo.gif" <div class="c2"><img src="accueil_files/Sitelogo.gif"

alt="" class="c1">alt="" class="c1">

La controverse du logo La controverse du logo Soit un logo de FooBar :

alt="" ou alt="FooBar logo" ? ou alt="FooBar main page " ?

Correction ? Correction ? <img src="accueil_files/Sitelogo.gif" alt="Logo de <img src="accueil_files/Sitelogo.gif" alt="Logo de

l'université de Provence" class="c1">l'université de Provence" class="c1">


35

Règles d’accessibilitéRègles d’accessibilité


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 [ <ahref="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 [ <ahref="http://..inscription.rtf" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href);

return false;">télécharger</a>]</p>


37

Règles d’accessibilité : niveau 3Règles d’accessibilité : niveau 3


38

Identify the language of the text Identify the language of the text & provide a summary for table& provide a summary for table

<HTML lang="fr"> <HTML lang="fr">

<table border="0" cellpadding="4" <table border="0" cellpadding="4" cellspacing="2" width="100%« cellspacing="2" width="100%«

summary="Cette table sépare l'écran en summary="Cette table sépare l'écran en une partie navigation à gauche et une partie navigation à gauche et contenu à droite">contenu à droite">


39

Règles d’accessibilité : warning Règles d’accessibilité : warning niveau 3niveau 3


40

Consider adding keyboard Consider adding keyboard shortcuts to frequently used linksshortcuts to frequently used links

<a href="./lieutidy.html" class="c6" accesskey="l">Accès au colloque & inscription</a>

Attention aux conflits avec certaines fonctionnalités du navigateur lui-même ou de la synthèse vocale (raccourcis propres).


41

Naviguer … plus viteNaviguer … plus vite

<span id=""hideme" style="display: none"><span id=""hideme" style="display: none"><a href="#skip" display="#none" <a href="#skip" display="#none"

accesskey="s" title="Passer le menu de accesskey="s" title="Passer le menu de navigation pour aller à la partie principale navigation pour aller à la partie principale du document">Passer la du document">Passer la Navigation</a></span>Navigation</a></span>


42

Votre site respecte la/les Votre site respecte la/les norme(s) d’accessibiliténorme(s) d’accessibilité Vous êtes autorisés à marquer votre Vous êtes autorisés à marquer votre

site …site … C’est le moment C’est le moment

de le tester avec différents utilisateursde le tester avec différents utilisateurs De l’enrichirDe l’enrichir


43

Autres retours d’expériencesAutres retours d’expériences Résumer le texte de bienvenue Résumer le texte de bienvenue Rajouter des icônes beaucoup plus grosses sur la page Rajouter des icônes beaucoup plus grosses sur la page

d'accueil d'accueil Simplifier au maximum le menu Simplifier au maximum le menu Mettre en place une méthode qui grossit les caractères au Mettre en place une méthode qui grossit les caractères au

passage de la souris passage de la souris Mettre le logo de bobby sur les pages réellement correctes et Mettre le logo de bobby sur les pages réellement correctes et

aussi la compatibilité W3C aussi la compatibilité W3C Ajouter un plan du site pour connaître d'un coup d'œil Ajouter un plan du site pour connaître d'un coup d'œil

l'articulation des choses l'articulation des choses Changer la couleur des boutons pour être plus visible par tout le Changer la couleur des boutons pour être plus visible par tout le

mondemonde ……..

Au-delà des normes !Au-delà des normes ! ?


44

Début de conclusionDébut de conclusion

La correction de sites web n’est pas La correction de sites web n’est pas toujours aussi « facile »toujours aussi « facile » problèmes de structurationproblèmes de structuration codes générés avec des outils « verbeux »codes générés avec des outils « verbeux » Choix : est-ce correct?Choix : est-ce correct?

Par exemple, mettre un symbole pour signaler Par exemple, mettre un symbole pour signaler le caractère obligatoire après le champs!le caractère obligatoire après le champs!

Au-delà des normes ! ?


45

Suite de début de conclusionSuite de début de conclusion

Mais les sites corrigés sont :Mais les sites corrigés sont : plus accessibles à tousplus accessibles à tous Plus faciles à maintenirPlus faciles à maintenir

Notons des progrès dans les outils de Notons des progrès dans les outils de construction des sites websconstruction des sites webs

Et si les outils s’adaptaient aux utilisateurs ?


46

Autres travaux réalisés dans un Autres travaux réalisés dans un cadre pédagogiquecadre pédagogique Des tableaux linéarisésDes tableaux linéarisés Des signets pour tousDes signets pour tous Des sites web embarqués « parlant »Des sites web embarqués « parlant » Des analyseurs de sites webDes analyseurs de sites web ……


47

Tableau : Emploi du tempsTableau : Emploi du tempsHeure Lundi Mardi Mercredi Jeudi Vendredi

8.00 Anglais Compta Anglais Compta Anglais

9.00 Espagnol Compta Espagnol Compta Espagnol

10.00 Eco Eco

11.00 Maths Maths

12.00 Maths Maths

13.00 Astronomie Astronomie

19.00 Orchestre

20.00 Orchestre

[email protected]


48

Tableau : Emploi du tempsTableau : Emploi du tempsHeure Lundi Mardi Mercredi Jeudi Vendredi

8.00 Anglais Compta Anglais Compta Anglais

9.00 Espagnol Compta Espagnol Compta Espagnol

10.00 Eco Eco

11.00 Maths Maths

12.00 Maths Maths

13.00 Astronomie Astronomie

19.00 Orchestre

20.00 Orchestre


49

Tableau : décompositionsTableau : décompositionsColonne numéro 2 du tableau numéro 1

Heure Lundi

Heure8.00 Anglais

9.00 Espagnol

10.0011.0012.0013.0019.0020.00

Ligne numéro 1 du tableau numéro 1

Heure 8.00

Lundi Anglais

Mardi Compta

Mercredi Anglais

Jeudi Compta

Vendredi Anglais


50

Signets électroniquesSignets électroniquesLe Horla, Guy de Maupassant, FantastiqueLe Horla, Guy de Maupassant, FantastiqueRésumé : Nouvelle racontant la progression de la folie de l'auteurRésumé : Nouvelle racontant la progression de la folie de l'auteurChapitre 1 – Mai Chapitre 1 – Mai 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, J'ai passé toute la matinée étendu sur l'herbe, devant ma maison, sous l'énorme platane qui la couvre, sous l'énorme platane qui la couvre, l'abrite et l'ombrage tout entière. 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, De mes fenêtres, je vois la Seine qui coule, le long de mon jardin, derrière la route, presque chez moi,derrière la route, presque chez moi, la grande et large Seine qui va de Rouen au Havre, couverte de la grande et large Seine qui va de Rouen au Havre, couverte de bateaux qui passent. bateaux qui passent.

Chapitre 2 – Juin Chapitre 2 – Juin Comme il faisait bon ce matin !Comme il faisait bon ce matin !

GRISEL Virginie <[email protected]>PANONT Julie-Anne <[email protected]>BIANCO Sébastien <[email protected]>LABAT Sébastien <[email protected]>

Projet encadré par :DERY Anne-Marie<[email protected]>COLLAVIZZA Hélène<[email protected]>

mailto:[email protected]







51

Signets électroniquesSignets électroniques<livre Titre="Le Horla" Auteur="Guy de Maupassant" Genre="Fantastique" <livre Titre="Le Horla" Auteur="Guy de Maupassant" Genre="Fantastique"

Résume="Nouvelle racontant la progression de la folie de l'auteur"> Résume="Nouvelle racontant la progression de la folie de l'auteur"> <chapitre titre="Chapitre 1 - Mai"><chapitre titre="Chapitre 1 - Mai">

<paragraphe><paragraphe> <ligne> <ligne> 8 mai. 8 mai. </ligne> </ligne> <ligne> <ligne> Quelle journée admirable ! Quelle journée admirable ! </ligne> </ligne> <ligne> <ligne> J'ai passé toute la matinée étendu sur l'herbe, 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. devant ma maison, sous l'énorme platane qui la couvre, l'abrite et l'ombrage tout entière. </ligne> </ligne>

<bookmark id="stop" user="seb"/><bookmark id="stop" user="seb"/> </paragraphe></paragraphe> <paragraphe><paragraphe> <ligne> <ligne> J'aime ma maison où j'ai grandi. J'aime ma maison où j'ai grandi. </ligne> </ligne> <ligne> <ligne> De mes fenêtres, je vois la Seine qui coule, le long 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 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. au Havre, couverte de bateaux qui passent. </ligne> </ligne>

</paragraphe></paragraphe> </chapitre> </chapitre> <chapitre titre="Chapitre 2 - Juin"><chapitre titre="Chapitre 2 - Juin">

<paragraphe><paragraphe> <ligne> <ligne> Comme il faisait bon ce matin ! Comme il faisait bon ce matin ! </ligne> </ligne> </paragraphe></paragraphe> … … </chapitre> </chapitre> </livre></livre>


52

Outil de « synthèse de la parole à Outil de « synthèse de la parole à partir du texte » partir du texte » http://kaivalyam.essi.fr/http://kaivalyam.essi.fr/ Code-Barre To Speech : Code-Barre To Speech : [email protected]@essi.fr Projets étudiants : Projets étudiants :

http://www.essi.fr/~helen/http://www.essi.fr/~helen/

http://kaivalyam.essi.fr/



53

Assistant Web pour aveuglesAssistant Web pour aveugles Constats :

Normes : rendre vocale le contenu des pages Un lecteur d'écran : « rendre » le contenu des pages web par sauts

séquentiels (ligne à ligne, paragraphe à paragraphe...). La séquentialisation allonge le temps d'exploration et la rend incertaine.

Abandons, blocage, 10 fois plus de temps qu'un voyant (avec clavier et souris) pour certaines tâches

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. Proposer une arborescence de catégories de liens et des liens eux-

mêmes. La Navigation n’est plus linéaire :

utilisateur voyant gain dans un ratio compris entre 1 et 2. Pour un non-voyant, ce ratio est entre 1 et 10.

Equipe : Sébastien LOUIS, Etienne COUTANT, Romain VINCENS, Amaury NOIRCLEREEncadrants : Jean-Paul STROMBONI, Hélène COLLAVIZZA, Gérard UZAN


54


55

ConclusionConclusion La France a rejoint de nombreux pays dans l'égalité La France a rejoint de nombreux pays dans l'égalité

pour tous à vivre dans la société de l'information pour tous à vivre dans la société de l'information numérique. numérique. Des actions en justice contre l'inaccessibilité de sites Web Des actions en justice contre l'inaccessibilité de sites Web

Internet et Intranet sont en cours aux USA. Internet et Intranet sont en cours aux USA.

L'accessibilité des sites Web est une source de L'accessibilité des sites Web est une source de bénéfices non seulement pour les internautes bénéfices non seulement pour les internautes handicapés mais aussi pour tous les internautes. handicapés mais aussi pour tous les internautes.

Mais il reste encore à mieux comprendre la toile, Mais il reste encore à mieux comprendre la toile, à construire des outils de lecture, navigation, écriture à construire des outils de lecture, navigation, écriture

adaptés à ce nouvel espace.adaptés à ce nouvel espace.


56

MerciMerci

Aussi à Aussi à À l’ équipe d’enseignants (Anne-Marie, Hélène, Jean-Paul, Jean-Yves, Karima, Stéphane, Michel, …), aux étudiants (trop nombreux pour être cités)À tous les autres (Anne-Marie, Alain, Carine, Daniel, David, Guy, Jean, Philippe …)

[email protected]

http://www.essi.fr/devint



57


58


59

Documents

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