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

(1)

Colloque LECAinternet, 30 mai 2 005

1

Accessibilité numérique aux Accessibilité numérique aux

personnes déficientes personnes déficientes

visuelles ? visuelles ?

Mireille BLAY-FORNARINO Mireille BLAY-FORNARINO

Ecole polytechnique Universitaire de Nice- Sophia Antipolis, laboratoire I3S, projet rainbow

blay@essi.fr

&

& Anouar MEJRIAnouar MEJRI

(2)

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 France

en 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)

3

Le Web : un outil essentiel Le Web : un outil essentiel

d’intégration et d’accès aux savoirs d’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.

(4)

4

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

 Accessibilité du Web pour les Accessibilité du Web pour les personnes déficientes visuelles personnes 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 visuelles

visuelles

(5)

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)

6

Egalité des internautes : Egalité des internautes :

Visualisation du contenu Visualisation 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)

7

Vision « classique »

(8)

8

Le texte est grossi

(9)

9

Le texte apparaît en petit

(10)

10

Changement de couleurs

(11)

11

Inversion des couleurs

(12)

12

Egalité des internautes : Egalité des internautes :

La navigation La 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)

13

Inégalité

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

Visualisation/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)

14

Interface classique

(15)

15

Le texte est « faiblement » grossi

(16)

16

Inversion des couleurs

(17)

17

Absence d’image

(18)

18

Information sur les liens

(19)

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)

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)

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)

22

Votre site est-il accessible ? Votre site est-il accessible ?

Des outils de vérification Des outils de vérification

 2) Outils standards de visualisation: 2) Outils standards de visualisation:

 LoupeMS, fonte, changements de LoupeMS, fonte, changements de contrastes

contrastes

 Traduction textuelleTraduction textuelle

 1) Outils de validation1) Outils de validation

 SyntaxesSyntaxes

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

(23)

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.

 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.

(24)

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

(25)

25

Validation « html » Validation « html »

 Vérifier votre site: Vérifier votre site: http://validator.w3c.org http://validator.w3c.org

 résultatsrésultats

 Vérifier et réparer votre site Vérifier et réparer votre site

http://tidy.sourceforge.net/

 file:///E:/EcoleMarseille/Web/AccueilTidy.htmlfile:///E:/EcoleMarseille/Web/AccueilTidy.html

 résultatrésultat

 Comparons les sourcesComparons les sources

(26)

26

Validation « html » Validation « html »

(27)

27

Validation « html » Validation « html »

(28)

28

Validation et séparation entre Validation et séparation entre

contenu et visualisation contenu et visualisation

<b>Colloque de l'Ecole Doctorale</b>

</font>

<b>"Cognition,Langage et Education"</b>

</font></div>

: span.c5 {font-family: Verdana; font-size:

70%}

div.c2 {text-align: center}

……

</style>

…

<b>Colloque de l'Ecole Doctorale</b>

</span> <span class="c5">

<b>"Cognition, Langage et Education"</b>

</span></div>

</td>

Avant

Après Tidy…

(29)

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)

30

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

(2) Souhaité

(31)

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 ?

 Après : Ce qui change ….

Testons Testons

(32)

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 ?

 Après : Ce qui change ….

Testons Testons

(33)

33

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

warning (1) indispensable warning (1) indispensable

(34)

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.

 Actuellement :Actuellement :

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

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)

35

Règles d’accessibilité

(36)

36

Ne pas ouvrir automatiquement de nouvelles fenêtres ou modifier la fenêtre

active 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>

(37)

37

Règles d’accessibilité : niveau 3

(38)

38

Identify the language of the text Identify the language of the text

& 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%«

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">

(39)

39

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

niveau 3

(40)

40

Consider adding keyboard Consider adding keyboard

shortcuts to frequently used links shortcuts 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)

41

Naviguer … plus vite Naviguer … plus vite

<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>

(42)

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)

43

Autres retours d’expériences Autres 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 monde

monde

 ……..

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

(44)

44

Début de conclusion Dé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)

45

Suite de début de conclusion Suite 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 webs construction des sites webs

Et si les outils s’adaptaient aux utilisateurs ?

(46)

46

Autres travaux réalisés dans un Autres travaux réalisés dans un

cadre pédagogique cadre 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)

47

Tableau : Emploi du temps Tableau : Emploi du temps

Heure 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

13.00 Astronomie Astronomie

19.00 Orchestre

20.00 Orchestre

mejrianouar@hotmail.com

(48)

48

Tableau : Emploi du temps Tableau : Emploi du temps

Heure Lundi Mardi Mercredi Jeudi Vendredi

8.00 Anglais Compta Anglais Compta Anglais

9.00 Espagnol Compta Espagnol Compta Espagnol

10.00 Eco Eco

13.00 Astronomie Astronomie

19.00 Orchestre

20.00 Orchestre

(49)

49

Tableau : décompositions Tableau : décompositions

Colonne numéro 2 du tableau numéro 1

Heure Lundi Heure

8.00 Anglais 9.00 Espagnol 10.00

11.00 12.00 13.00 19.00 20.00

Ligne numéro 1 du tableau numéro 1

Heure 8.00 Lundi Anglais Mardi Compta Mercredi Anglais

Jeudi Compta Vendredi Anglais

(50)

50

Signets électroniques Signets électroniques

Le Horla, Guy de Maupassant, Fantastique Le Horla, Guy de Maupassant, Fantastique

Résumé : Nouvelle racontant la progression de la folie de l'auteur Résumé : Nouvelle racontant la progression de la folie de l'auteur Chapitre 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.

Chapitre 2 – Juin Chapitre 2 – Juin

Comme il faisait bon ce matin !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>

(51)

51

Signets électroniques Signets électroniques

<livre Titre="Le Horla" Auteur="Guy de Maupassant" Genre="Fantastique"

Résume="Nouvelle racontant la progression de la folie de l'auteur">

<chapitre titre="Chapitre 1 - Mai">

<paragraphe><paragraphe>

<ligne> <ligne> 8 mai. </ligne> 8 mai. </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, devant 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.

ma maison, sous l'énorme platane qui la couvre, l'abrite et l'ombrage tout entière. </ligne> </ligne>

<bookmark id="stop" user="seb"/>

</paragraphe> </paragraphe>

<paragraphe> <paragraphe>

<ligne> <ligne> J'aime ma maison où j'ai grandi. </ligne> J'aime ma maison où j'ai grandi. </ligne>

<ligne> <ligne> De mes fenêtres, je vois la Seine qui coule, le long de 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 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.

Havre, couverte de bateaux qui passent. </ligne> </ligne>

</paragraphe> </paragraphe>

</chapitre>

<chapitre titre="Chapitre 2 - Juin">

<paragraphe> <paragraphe>

<ligne> <ligne> Comme il faisait bon ce matin ! </ligne> Comme il faisait bon ce matin ! </ligne>

</paragraphe></paragraphe>

… … </chapitre> </chapitre>

</livre>

(52)

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 : andral@essi.frCode-Barre To Speech : andral@essi.fr

 Projets étudiants : Projets étudiants :

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

(53)

53

Assistant Web pour aveugles Assistant 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 NOIRCLERE Encadrants : Jean-Paul STROMBONI, Hélène COLLAVIZZA, Gérard UZAN

(54)

54

(55)

55

Conclusion Conclusion

 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.

 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.

(56)

56

Merci Merci

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 …)

devint@essi.fr http://www.essi.fr/devint

(57)

57

(58)

58

(59)

59