Une histoire de l'accessibilité Web 
Codeurs En Seine - 2014 
@OlivierNourry – V-Technologies
L’ACCESSIBILITÉ WEB 
2
Une définition 
L’art de rendre 
perceptible, utilisable et compréhensible 
un contenu Web, 
pour tous les utilisateurs, 
...
L’ÉVOLUTION DE LA NOTION 
DE HANDICAP 
4
Une notion relativement 
récente 
À l’origine (« Hand in cap »): au XIXème siècle, 
dans le domaine sportif, désavantage c...
Handicap? 
Jusque dans les années 1970, définition 
« médicale »: résultat d’une déficience 
physique, mentale ou sensorie...
Handicapé? 
Philippe Croizon 
A traversé la Manche à la nage en 14h. Sans bras, ni jambes. 
© Leoty Xavier / MAXPPP 
http:...
Handicapé? 
Stevie Wonder 
24 Grammy Awards, 
20+ singles n°1 aux USA, 
20+ albums dans le Top 10. 
http://www.steviewonde...
Handicapé? 
Stephen Hawking 
Astrophysicien, auteur de découvertes 
cosmologiques majeures. 
http://www.hawking.org.uk/ima...
Handicapé? 
Dark Vador 
Tyran intergalactique
Une définition insuffisante 
• On peut présenter une déficience sans pour autant 
être systématiquement en situation de ha...
Sans commentaire… 
12
Une définition insuffisante 
La définition « médicale » ne rend pas compte des 
aptitudes et difficultés effectives de la ...
Daredevil, le super-héros aveugle. 
Mais pas que. 
14
Définition « fonctionnelle » du 
handicap 
Entre 1970 et 2005: La personne porteuse de 
déficiences est handicapée, mais p...
En progrès, mais peut mieux faire 
Le handicap reste perçu comme un état dont il faut 
sortir, en s’adaptant à la société....
Changeons de perspective 
Nic Steenhout: 
“Pourquoi est-ce si important de marcher? Sans 
les escaliers, les marches, les ...
Définition « sociale » du 
handicap 
Le handicap est l’effet produit par un 
environnement inadapté 
face à un besoin spéc...
Un renversement de perspective 
inscrit dans la loi 
• Loi du 30 juin 1975 d’orientation en faveur des 
personnes handicap...
Une définition opérationnelle de 
l’accessibilité 
L’accessibilité vise à compenser ou contourner une 
déficience pour réd...
ÉVOLUTION DE 
L’ACCESSIBILITÉ 
21
Un concept neuf pour une pratique 
ancienne 
L’accessibilité au sens où on l’entend aujourd’hui 
résulte du modèle social ...
VOYAGE DANS LE TEMPS 
Une histoire de 
l’accessibilité à l’écrit 
23
Note préliminaire 
Focus sur la déficience visuelle, mais concerne toutes 
les personnes « empêchées de lire »: 
• Illettr...
L’ACCESSIBILITÉ À L’ÉCRIT 
AVANT L’ÈRE NUMÉRIQUE 
25
Lecteur/Lectrice 
De tous temps, lecture par un tiers (tuteur, 
éducateur, assistant…).
Une solution efficace mais 
imparfaite 
• Réservé à un petit nombre 
• Dépendance 
o Vis-à-vis d’un tiers 
o Vis-à-vis du ...
Le Braille 
1829: Louis Braille présente une méthode de 
représentation de l’écrit accessible par le 
toucher
Le Braille permet l’accès à l’écrit de 
façon autonome. Mais… 
• Relativement peu pratiqué (10-15% des non-voyants) 
• Enc...
Les caractères agrandis 
Nombreux domaines couverts: romans, essais, 
jeux, bandes dessinées, etc.
Utile pour de nombreuses 
personnes. Mais… 
• Requiert un minimum de vision 
• Problème de disponibilité des contenus  
D...
Les livres audio 
Aussi anciens que le son enregistré (phonographe 
d’Edison en 1877).
Économique, marché élargi. Mais… 
• Lecture séquentielle 
• Problème de disponibilité des contenus 
 Dépendance vis-à-vis...
Un problème commun 
• La disponibilité, et donc le choix des contenus, 
dépendent d’un tiers 
• En général, retard de la v...
CE QUE LE NUMÉRIQUE A 
CHANGÉ 
35
Numérique vs. physique 
Le format numérique peut être décliné en différents 
formats physiques
Une nouvelle ère 
Avec le numérique on passe 
de l’adaptation à l’adaptabilité. 
• Une source unique pour satisfaire diffé...
LES TECHNOLOGIES 
D’ASSISTANCE 
NUMÉRIQUES, D’HIER À 
AUJOURD’HUI 
38
Lire l’écran autrement 1/2 
Les premiers micro-ordinateurs fonctionnant en 
mode texte, la conversion en Braille ou en voi...
Lire l’écran autrement 2/2 
En mode graphique, plus compliqué… 
 Représentation 2D 
 Visuels 
 Mise en forme des caract...
Une technologie devenue banale
Le Braille à l’ère du numérique 1/2 
• 1950: premier dispositif Braille 
« rafraichissable » (IBM) 
• 1969: première embos...
Le Braille à l’ère du numérique 2/2 
• 2011: HyperBraille, dispositif expérimental 
permettant les représentations en reli...
Il reste un problème… 
Malgré les progrès réalisés en termes d’autonomie, 
une dépendance persiste…
Graphiste 
Chef de projet 
Dev
LE FUTUR… 
Faire tomber la dernière 
dépendance? 
49
Un axe de progrès possible 
Les outils actuels sont encore très primitifs 
comparés au cerveau humain: 
• Compréhension li...
Et si demain... 
…les robots pouvaient nous comprendre?
Ellie, psychologue virtuelle
Description automatique d’images
Watson, ordinateur cognitif
BONUS 
55
Androne, par Goggle
Merci! 
@OlivierNourry – AccessiBlog.fr 
@VTechFr – V-technologies
Codeurs en Seine 2014: une histoire de l'accessibilité Web
Codeurs en Seine 2014: une histoire de l'accessibilité Web
Codeurs en Seine 2014: une histoire de l'accessibilité Web
Prochain SlideShare
Chargement dans…5
×

Codeurs en Seine 2014: une histoire de l'accessibilité Web

2 409 vues

Publié le

Le concept d'accessibilité prend sa source dans l'évolution de la notion de handicap à travers le temps, dans les esprits comme dans la loi. Nous verrons comment cette évolution nous a permis de passer d'une approche médicale à une approche sociale du handicap.
Puis, en prenant l'exemple de l'accès à l'écrit pour les personnes déficientes visuelles, nous évoquerons les solutions passées, présentes, et pourquoi pas, futures, pour l'accessibilité. Nous verrons comment nous sommes passés de l'ère de l'adaptation à celle de l'adaptabilité, en espérant entre un jour dans celle de l'inclusion.

Publié dans : Internet
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 409
Sur SlideShare
0
Issues des intégrations
0
Intégrations
220
Actions
Partages
0
Téléchargements
41
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Image: charest-ouellet.skyrock.com
  • Image: http://www.gbcoachsportif.fr/pages/handisport.html
  • Source: http://www.handiplace.org/media/pdf/autres/3303332603725_EX.pdf
  • Exemples de déficience sans situation de handicap: personnes sourdes entre elles; personne non-voyante dans un environnement sans lumière.
  • Image: http://www.lavantgardiste.com/accessoires/1533-bonnet-a-pompon-cartoon-eyes-lazy-oaf-3700745316288.html
  • Image: http://www.cinemablend.com/television/Marvel-Daredevil-Series-May-Scripted-By-Cabin-Woods-Director-Drew-Goddard-60493.html
  • http://incl.ca/a-different-take-on-world-cup-opening-kick/
  • Mouvement initié au début des années 1980, par le mouvement international des personnes handicapées naissant.
    http://www.handiplace.org/media/pdf/autres/3303332603725_EX.pdf
  • http://www.creai-ra.com/documents/Documents%20de%20formation/les_lois%20de_1975_a%CC%80_2005_1%C3%A8re_partie.pdf
  • Photo: http://en.wikipedia.org/wiki/Back_to_the_Future
  • Photo: couverture du livre « Vivre sans voir » de Zina Weygand, aux Éditions Creaphis.
  • Copie d’écran du film « La lectrice » (1987), de Michel Deville, avec Miou Miou dans le rôle-titre.
    http://solitudemonamour.blogspot.fr/2013/11/amour-du-langage-et-langage-de-lamour.html
  • Photo: Copie d’écran du film « La Lectrice » http://www.moicani.fr/article-mort-de-l-ecrivain-raymond-jean-103166685.html
  • Photo: https://twitter.com/jmspool/status/497457430625017856
  • http://fr.wikipedia.org/wiki/Braille
    http://www.braillenet.org/colloques/Bnet2000/actes/duchateau.htm
    http://www.planetoscope.com/Culture/974-edition---nouveaux-livres-publies-en-france.html
    En 2000, en France, environ 400 titres disponibles en Braille (dont 200 scolaires) pour environ 1000 fois plus de livres en noir.
  • Images extraites du catalogue du site web de Livre Confort: http://www.livreconfort.com/.
  • http://fr.wikipedia.org/wiki/Braille
    http://www.braillenet.org/colloques/Bnet2000/actes/duchateau.htm
    http://www.planetoscope.com/Culture/974-edition---nouveaux-livres-publies-en-france.html
    En 2000, en France, environ 400 titres disponibles en Braille (dont 200 scolaires) pour environ 1000 fois plus de livres en noir.
  • Photos:
    http://fr.wikipedia.org/wiki/Phonographe#mediaviewer/File:Edisonblank.jpg
    http://www.script-adour.com/audio/
    http://www.zicabloc.com/bonnes-raisons-garder-disques-vinyles
    http://www.futura-sciences.com/magazines/environnement/infos/qr/d/eco-consommation-peut-on-recycler-cd-dvd-1049/
  • http://fr.wikipedia.org/wiki/Livre_audio
    0.7% du marché français du livre, mais jusqu’à 10% sur les marchés nord-européens et anglo-saxons.
  • http://fr.dreamstime.com/illustration/aveugle.html
  • Illustrations:
    http://hdscreen.me/walls/games/abstract-binary-numbers-vortex-2775060-1600x900.jpg
    http://www.neoma-alumni.com/fr/actualite/sortie_livre_l_expatriation_au_feminin_delphine_joelson_marteau_sup_de_co_97
    http://my-paris.club/news/livres-gros-caracteres.html
    http://www.letterpress.fr/impression-en-braille/
    http://en.wikipedia.org/wiki/Refreshable_braille_display
    http://www.handistar-leblog.fr/services/un-logiciel-au-service-des-malvoyants
    http://www.clipart-fr.com/Icones/Serie-06/cliparts-Serie-06-61.php

  • http://fr.dreamstime.com/illustration/aveugle.html
  • http://en.wikipedia.org/wiki/Screen_reader
    http://en.wikipedia.org/wiki/JAWS_%28screen_reader%29
  • http://en.wikipedia.org/wiki/JAWS_%28screen_reader%29
    http://en.wikipedia.org/wiki/VoiceOver
  • https://www.apple.com/ios/accessibility-tips/
    http://www.androidcentral.com/what-google-talk-back
    http://mynokiablog.com/2014/04/28/windows-phone-8-1-more-accessible/
  • https://nfb.org/images/nfb/publications/fr/fr28/fr280109.htm
    http://www.kscitech.com/BC/D/Becker.htm
  • http://www.hyperbraille.de/?lang=en
  • Les contenus Web doivent respecter certains prérequis pour être lisibles avec des technologies d’assistance. Les créateurs de contenus ont donc une responsabilité dans la chaine d’accessibilité.
    Illustration trouvée sur: http://www.konbini.com/fr/tendances-2/france-cnn-aimer/
    Crédit: Marcel Gotlib.
  • Les clients et/ou managers peuvent avoir des attentes irréalistes concernant les sites Web, notamment sur les délais de réalisation.
    Photo trouvée sur: http://www.lucidsitedesigns.com/14-questions-to-ask-a-web-developer/ par http://memegenerator.net/
  • Mythe persistant: le développement Web est quelque chose de simple, à la portée de n’importe qui.
    Photo trouvée sur: http://www.cultofmac.com/254096/learn-html-css-and-more-with-the-become-a-web-developer-from-scratch-video-course-deals/
  • Une équipe Web au « travail ». L’argument souvent utilisé pour justifier la non-accessibilité est le manque de temps.
    Symboliquement, cette photo montre l’opposition possible entre le graphiste, qui défend sa position, et le développeur, qui l’attaque. Le chef de projet (en retrait, les mains dans les poches) observe le tout et subit plus ou moins l’action.
    Photo: https://hacks.mozilla.org/2012/09/cheerio-to-another-mdn-doc-sprint/
  • Copie d’écran extraite de https://www.youtube.com/watch?v=l3eb0DALdnA&list=UUmZe7GiM8tY5M8YHSg-Robg#!
  • http://l3-g0.blogspot.fr/2014/03/little-darth-vader-loves-r2-d2.html
  • Copie d’écran extraite de https://www.youtube.com/watch?v=ejczMs6b1Q4
    Dispositif permettant de simuler l’interaction avec un psychologue. Le système observe et écoute l’interlocuteur humain, et réagit en conséquence, de façon proche du langage oral et corporel humain.
  • http://googleresearch.blogspot.fr/2014/11/a-picture-is-worth-thousand-coherent.html
    Dispositif combinant reconnaissance d’images et génération de texte en langage naturel. L’illustration montre des exemples d’analyses réalisées par le système, allant de « décrit sans erreur » à « sans relation avec l’image ».
  • http://www.ibm.com/smarterplanet/us/en/ibmwatson/
    Copie d’écran extraite de http://www.ibm.com/smarterplanet/us/en/ibmwatson/what-is-watson.html
    Système informatique doté de capacités de compréhension et d’analyse, permettant de simuler voire dépasser l’expertise humaine.
  • Photo: http://www.paciellogroup.com/blog/2014/08/the-viking-and-the-lumberjack/
  • Extrait de la Vidéo « The Viking and the LumberJack » par Karl Groves et Billy Gregory (minutage: de 6’56 à 9’05).
    https://www.youtube.com/watch?v=l3eb0DALdnA&list=UUmZe7GiM8tY5M8YHSg-Robg#!
    Parodie de publicité pour Androne, drone connecté sensé remplacer les chiens-guides.
    (Merci à Karl et Billy pour leur autorisation  ).
  • Codeurs en Seine 2014: une histoire de l'accessibilité Web

    1. 1. Une histoire de l'accessibilité Web Codeurs En Seine - 2014 @OlivierNourry – V-Technologies
    2. 2. L’ACCESSIBILITÉ WEB 2
    3. 3. Une définition L’art de rendre perceptible, utilisable et compréhensible un contenu Web, pour tous les utilisateurs, y compris les utilisateurs handicapés. 3
    4. 4. L’ÉVOLUTION DE LA NOTION DE HANDICAP 4
    5. 5. Une notion relativement récente À l’origine (« Hand in cap »): au XIXème siècle, dans le domaine sportif, désavantage consenti pour égaliser les chances. Passe dans le langage commun pour désigner, au figuré, un désavantage, une infériorité, pour une personne. Dans les années 1950: entre dans le champ médico-social.
    6. 6. Handicap? Jusque dans les années 1970, définition « médicale »: résultat d’une déficience physique, mentale ou sensorielle.
    7. 7. Handicapé? Philippe Croizon A traversé la Manche à la nage en 14h. Sans bras, ni jambes. © Leoty Xavier / MAXPPP http://www.lepoint.fr/sport/sans-bras-ni-jambes-croizon-a-traverse-la-manche-a-la-nage-19-09-2010-1238259_26.php
    8. 8. Handicapé? Stevie Wonder 24 Grammy Awards, 20+ singles n°1 aux USA, 20+ albums dans le Top 10. http://www.steviewonder.org.uk/multimedia/photo_gallery/gallery.html
    9. 9. Handicapé? Stephen Hawking Astrophysicien, auteur de découvertes cosmologiques majeures. http://www.hawking.org.uk/images.html
    10. 10. Handicapé? Dark Vador Tyran intergalactique
    11. 11. Une définition insuffisante • On peut présenter une déficience sans pour autant être systématiquement en situation de handicap. • Inversement, on peut être en situation de handicap, sans pour autant systématiquement présenter de déficience.
    12. 12. Sans commentaire… 12
    13. 13. Une définition insuffisante La définition « médicale » ne rend pas compte des aptitudes et difficultés effectives de la personne.
    14. 14. Daredevil, le super-héros aveugle. Mais pas que. 14
    15. 15. Définition « fonctionnelle » du handicap Entre 1970 et 2005: La personne porteuse de déficiences est handicapée, mais possède des capacités. Elle est capable de s’adapter (ou se réadapter) à l’environnement.
    16. 16. En progrès, mais peut mieux faire Le handicap reste perçu comme un état dont il faut sortir, en s’adaptant à la société. Idée sous-jacente: il faut « corriger », « réparer », pour se rapprocher d’une norme implicite.
    17. 17. Changeons de perspective Nic Steenhout: “Pourquoi est-ce si important de marcher? Sans les escaliers, les marches, les portes étroites, les transports publics inaccessibles, les salles de bains trop petites, les places de parking étroites, être en fauteuil roulant ne serait pas si mal. Notez que la source de ces problèmes est externe à la personne elle-même. Le problème n’est pas le corps de la personne, et modifier ce ‘corps défectueux’ ne va pas réparer comme par magie une société inaccessible.” Extrait et traduit de « A different take on World Cup opening kick »
    18. 18. Définition « sociale » du handicap Le handicap est l’effet produit par un environnement inadapté face à un besoin spécifique.
    19. 19. Un renversement de perspective inscrit dans la loi • Loi du 30 juin 1975 d’orientation en faveur des personnes handicapées: logique d’intégration o C’est aux personnes porteuses de handicap de s’adapter à la société. • Loi du 11 février 2005 pour l’égalité des droits et des chances des personnes handicapées: logique d’inclusion o C’est la société qui prend en compte les spécificités de chaque groupe et chaque individu pour s’y adapter.
    20. 20. Une définition opérationnelle de l’accessibilité L’accessibilité vise à compenser ou contourner une déficience pour réduire ou annuler la situation de handicap.
    21. 21. ÉVOLUTION DE L’ACCESSIBILITÉ 21
    22. 22. Un concept neuf pour une pratique ancienne L’accessibilité au sens où on l’entend aujourd’hui résulte du modèle social du handicap. Mais depuis toujours, des techniques et outils existent.
    23. 23. VOYAGE DANS LE TEMPS Une histoire de l’accessibilité à l’écrit 23
    24. 24. Note préliminaire Focus sur la déficience visuelle, mais concerne toutes les personnes « empêchées de lire »: • Illettrisme • Dyslexie et autres troubles du langage • Troubles cognitifs divers: mémorisation, attention, phobies… • « handicap situationnel » (conduite, environnement perturbant, etc.)
    25. 25. L’ACCESSIBILITÉ À L’ÉCRIT AVANT L’ÈRE NUMÉRIQUE 25
    26. 26. Lecteur/Lectrice De tous temps, lecture par un tiers (tuteur, éducateur, assistant…).
    27. 27. Une solution efficace mais imparfaite • Réservé à un petit nombre • Dépendance o Vis-à-vis d’un tiers o Vis-à-vis du contenu • Possibles effets de bord
    28. 28. Le Braille 1829: Louis Braille présente une méthode de représentation de l’écrit accessible par le toucher
    29. 29. Le Braille permet l’accès à l’écrit de façon autonome. Mais… • Relativement peu pratiqué (10-15% des non-voyants) • Encombrant (4 pages épaisses pour une page « en noir » standard) • Différents codes (standard, abrégé, langues orientales, informatique, maths, musique…) • Problème de disponibilité des contenus  Dépendance vis-à-vis des producteurs de contenus
    30. 30. Les caractères agrandis Nombreux domaines couverts: romans, essais, jeux, bandes dessinées, etc.
    31. 31. Utile pour de nombreuses personnes. Mais… • Requiert un minimum de vision • Problème de disponibilité des contenus  Dépendance vis-à-vis des producteurs de contenus
    32. 32. Les livres audio Aussi anciens que le son enregistré (phonographe d’Edison en 1877).
    33. 33. Économique, marché élargi. Mais… • Lecture séquentielle • Problème de disponibilité des contenus  Dépendance vis-à-vis des producteurs de contenus
    34. 34. Un problème commun • La disponibilité, et donc le choix des contenus, dépendent d’un tiers • En général, retard de la version adaptée par rapport à la version « normale »  Autonomie limitée
    35. 35. CE QUE LE NUMÉRIQUE A CHANGÉ 35
    36. 36. Numérique vs. physique Le format numérique peut être décliné en différents formats physiques
    37. 37. Une nouvelle ère Avec le numérique on passe de l’adaptation à l’adaptabilité. • Une source unique pour satisfaire différents besoins • Les limitations physiques et temporelles sont considérablement réduites • Les coûts de production et de prise en charge baissent
    38. 38. LES TECHNOLOGIES D’ASSISTANCE NUMÉRIQUES, D’HIER À AUJOURD’HUI 38
    39. 39. Lire l’écran autrement 1/2 Les premiers micro-ordinateurs fonctionnant en mode texte, la conversion en Braille ou en voix est relativement aisée. • Années 80: Screen Reader, pour les ordinateurs BBC et Nec portable. • 1989: première version de JAWS (MS-DOS)
    40. 40. Lire l’écran autrement 2/2 En mode graphique, plus compliqué…  Représentation 2D  Visuels  Mise en forme des caractères Le principe général: recréer un modèle de la représentation graphique, pour une lecture linéaire non visuelle • 1993: JAWS For Windows • 2005: VoiceOver sur Mac • 2009: VoiceOver sur iPhone
    41. 41. Une technologie devenue banale
    42. 42. Le Braille à l’ère du numérique 1/2 • 1950: premier dispositif Braille « rafraichissable » (IBM) • 1969: première embosseuse Braille pour ordinateur (MIT) • 1975: premier appareil comportant une plage Braille (Université de Dortmund) • 1978: premier micro-ordinateur en Braille • 1987: premier dispositif portable comportant une plage Braille
    43. 43. Le Braille à l’ère du numérique 2/2 • 2011: HyperBraille, dispositif expérimental permettant les représentations en relief des graphiques
    44. 44. Il reste un problème… Malgré les progrès réalisés en termes d’autonomie, une dépendance persiste…
    45. 45. Graphiste Chef de projet Dev
    46. 46. LE FUTUR… Faire tomber la dernière dépendance? 49
    47. 47. Un axe de progrès possible Les outils actuels sont encore très primitifs comparés au cerveau humain: • Compréhension linguistique • Interprétation des formes, couleurs, tailles… • Interprétation des images et des sons • Intégration du contexte culturel
    48. 48. Et si demain... …les robots pouvaient nous comprendre?
    49. 49. Ellie, psychologue virtuelle
    50. 50. Description automatique d’images
    51. 51. Watson, ordinateur cognitif
    52. 52. BONUS 55
    53. 53. Androne, par Goggle
    54. 54. Merci! @OlivierNourry – AccessiBlog.fr @VTechFr – V-technologies

    ×