Accessibilit

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

• Mireille BLAY-FORNARINO
• Ecole polytechnique Universitaire de Nice- Sophia
  Antipolis,
• laboratoire I3S, projet rainbow
• blay_at_essi.fr
• Anouar MEJRI

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 dinternautes ont plus de 50 ans
• 85 souffrent de problèmes visuels
• Augmentation des terminaux mobiles
• lisibilité et interaction des facteurs de succès

3
Le Web un outil essentiel dintégration et
daccès aux savoirs

• Le handicap visuel, partiel ou complet,
  nempêche pas laccès à Internet
• livres, journaux, bases de connaissances
• documents professionnels, administratifs et
  commerciaux
• outil de communication  forums de  discussion,
  correspondances électroniques, formulaires.

4
Plan de lexposé

• Accessibilité du Web pour les personnes
  déficientes visuelles
• Corrections dun site web
• Autres approches de laccessibilité du web aux
  personnes déficientes visuelles

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. 

6
Egalité des internautes Visualisation du contenu

• Les modifications de taille de caractères
• Les modifications de couleurs
• Les contrastes
• Lécoute

7
Vision classique
8
Le texte est grossi
9
Le texte apparaît en petit
10
Changement de couleurs
11
Inversion des couleurs
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 daccessibilité, sinon
13
Inégalité des internautes Visualisation/Navigat
ion

• Visualisation
• Absence dinformations sur les images
• Absence de contrastes
• Absence dinformation sur les cadres
• .
• Mauvaise structuration
• Liens hors contexte ( cliquer ici )
• Confusion entre mise en page et visualisation

14
Interface classique
15
Le texte est faiblement grossi
16
Inversion des couleurs
17
Absence dimage
18
Information sur les liens
19
Pourquoi rendre votre Site accessible ?

• Pour mieux communiquer
• vendre, partager, informer
• Parce que cest 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
• 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
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. 

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.

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

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 dun site
  existant et dun écrivain débutant.

24
Rendre votre site accessible

• Prenons un exemple  facile 
• http//www.up.univmrs.fr/wpsycle/ColloqueLECAinter
  net/accueil.html
• Local

25
Validation html

• Vérifier votre site http//validator.w3c.org
• résultats
• Vérifier et réparer votre site http//tidy.sourcef
  orge.net/
• file///E/EcoleMarseille/Web/AccueilTidy.html
• résultat
• Comparons les sources

26
Validation html

• Vérifier votre site http//validator.w3c.org
• résultats
• Vérifier et réparer votre site http//tidy.sourcef
  orge.net/
• file///E/EcoleMarseille/Web/AccueilTidy.html
• résultat
• Comparons les sources

27
Validation html

• Vérifier votre site http//validator.w3c.org
• résultats
• Vérifier et réparer votre site http//tidy.sourcef
  orge.net/
• file///E/EcoleMarseille/Web/AccueilTidy.html
• résultat
• Comparons les sources

28
Validation et séparation entre contenu et
visualisation
Après Tidy
span.c5 font-family Verdana font-size
70 div.c2 text-align center lt/stylegt ltd
iv class"c2"gtltspan class"c5"gt ltbgtColloque de
l'Ecole Doctoralelt/bgt lt/spangt ltspan
class"c5"gt ltbgt"Cognition, Langage
et Education"lt/bgt lt/spangtlt/divgt lt/tdgt
Avant

• ltdiv align"center"gt
• ltfont face"Verdana" size"1"gt
• ltbgtColloque de l'Ecole Doctoralelt/bgt
• lt/fontgt
• ltfont face"Verdana" size"1"gt
• ltbgt"Cognition,Langage et Education"lt/bgt
• lt/fontgtlt/divgt

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/

30
Règles daccessibilité (2) Souhaité
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 ?
• lttable border"0" cellpadding"4" cellspacing"2"
  width"615"gt
• Après Ce qui change .
• lttable border"0" cellpadding"4" cellspacing"2"
  width"100"gt
• Testons

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 ?
• lttable border"0" cellpadding"4" cellspacing"2"
  width"615"gt
• Après Ce qui change .
• lttable border"0" cellpadding"4" cellspacing"2"
  width"100"gt
• Testons

33
Règles daccessibilité warning (1)
indispensable
34
If an image conveys important information beyond
what is in its alternative text, provide an
extended description.

• Actuellement
• ltdiv class"c2"gtltimg src"accueil_files/Sitelogo.g
  if" alt"" class"c1"gt
• La controverse du logo
• Soit un logo de FooBar
• alt"" ou alt"FooBar logo" ?
• ou alt"FooBar main page " ?
• Correction ?
• ltimg src"accueil_files/Sitelogo.gif" alt"Logo
  de l'université de Provence" class"c1"gt

35
Règles daccessibilité
36
Ne pas ouvrir automatiquement de nouvelles
fenêtres ou modifier la fenêtreactive sans en
avertir lutilisateur

• Avant
• ltp class"c12"gtinscription obligatoire lta
• href"http//...inscription.rtf"
• target"_blank"gttéléchargerlt/agt lt/pgt
• Que sest-il passé?
• désactivation du bouton back
• Prévenir lutilisateur de ce qui va se produire
  
• ltp class"c12"gtinscription obligatoire lta
• href"http//..inscription.rtf"
• onclick"window.open(this.href) return false"
  onkeypress"window.open(this.href) return
  false"gttéléchargerlt/agtlt/pgt

37
Règles daccessibilité niveau 3
38
Identify the language of the text provide a
summary for table

• ltHTML lang"fr"gt
• lttable border"0" cellpadding"4" cellspacing"2"
  width"100 
• summary"Cette table sépare l'écran en une partie
  navigation à gauche et contenu à droite"gt

39
Règles daccessibilité warning niveau 3
40
Consider adding keyboard shortcuts to frequently
used links

• lta href"./lieutidy.html" class"c6"
  accesskey"l"gtAccès au colloque amp
  inscriptionlt/agt
• Attention aux conflits avec certaines
  fonctionnalités du navigateur lui-même ou de la
  synthèse vocale (raccourcis propres).

41
Naviguer plus vite

• ltspan id""hideme" style"display none"gt
• lta href"skip" display"none" accesskey"s"
  title"Passer le menu de navigation pour aller à
  la partie principale du document"gtPasser la
  Navigationlt/agtlt/spangt

42
Votre site respecte la/les norme(s)
daccessibilité

• Vous êtes autorisés à marquer votre site
• Cest le moment
• de le tester avec différents utilisateurs
• De lenrichir

43
Autres retours dexpé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 ! ?
44
Début de conclusion

• La correction de sites web nest 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 ! ?
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 sadaptaient aux utilisateurs ?
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

47
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
12.00 Maths Maths
13.00 Astronomie Astronomie
19.00 Orchestre
20.00 Orchestre
mejrianouar_at_hotmail.com
48
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
12.00 Maths Maths
13.00 Astronomie Astronomie
19.00 Orchestre
20.00 Orchestre
49
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
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 ltgrisel_at_essi.frgtPANONT
Julie-Anne ltpanont_at_essi.frgtBIANCO Sébastien
ltbianco_at_essi.frgtLABAT Sébastien ltlabat_at_essi.frgt
Projet encadré par DERY Anne-Marieltpinna_at_essi.
frgtCOLLAVIZZA Hélènelthelen_at_essi.frgt
51
Signets électroniques

• ltlivre Titre"Le Horla" Auteur"Guy de
  Maupassant" Genre"Fantastique" Résume"Nouvelle
  racontant la progression de la folie de
  l'auteur"gt  
• ltchapitre titre"Chapitre 1 - Mai"gt
•    ltparagraphegt
•        ltlignegt 8 mai. lt/lignegt
•         ltlignegt Quelle journée admirable !
  lt/lignegt
•         ltlignegt 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. lt/lignegt
• ltbookmark id"stop" user"seb"/gt
•      lt/paragraphegt
•     ltparagraphegt
•         ltlignegt J'aime ma maison où j'ai
  grandi. lt/lignegt
•         ltlignegt 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. lt/lignegt
•     lt/paragraphegt
• lt/chapitregt
• ltchapitre titre"Chapitre 2 - Juin"gt
•     ltparagraphegt
•         ltlignegt Comme il faisait bon ce matin
  ! lt/lignegt
•     lt/paragraphegt
•   lt/chapitregt

52
Outil de  synthèse de la parole à partir du
texte  

• http//kaivalyam.essi.fr/
• Code-Barre To Speech andral_at_essi.fr
• Projets étudiants http//www.essi.fr/helen/

53
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 nest 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
(No Transcript)
55
Conclusion

• La France a rejoint de nombreux pays dans
  l'égalité pour tous à vivre dans la société de
  l'information numérique.
• Des actions en justice contre l'inaccessibilité
  de sites Web Internet et Intranet sont en cours
  aux USA.
• 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.
• Mais il reste encore à mieux comprendre la toile,
  
• à construire des outils de lecture, navigation,
  écriture adaptés à ce nouvel espace.

56
Merci

• Aussi à
• À l équipe denseignants (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_at_essi.fr

http//www.essi.fr/devint
57
(No Transcript)
58
(No Transcript)
59
(No Transcript)