Accessibilité du numérique - Une attitude user-centric

L'accessibilité du numérique, quand elle est déjà connue des personnes avec lesquelles vous avez l'occasion de discuter, est souvent perçue comme quelque chose qui ne nous concerne pas, très contraignante, et étant lié à une démarche bien trop spécifique pour être prise en compte au quotidien.

Cette présentation a pour but de vulgariser le sujet de l'accessibilité et d'évangéliser le propos au sein d'un groupe hétéroclite en terme de connaissances techniques ou de connaissances liées au design. Parfaite pour une première approche avant d'aller plus loin, et commencer à sensibiliser vos collaborateurs en augmentant leur niveau de conscience et connaissance sur ce sujet.

Cette présentation a été données en avril 2018 au sein de la compagnie d'assurance Foyer S.A.

Transcript

1. Accessibilité du numérique Une attitude user-centric
2. “Accessibilité du numérique” – @geoffrey_crofte Geoffrey Crofte UX / UI Designer — Accessibility & Design System Advocado @geoffreycrofte geoffrey.crofte.fr creativejuiz.fr
3. “Accessibilité du numérique” – @geoffrey_crofte Tour d’horizon Pourquoi parler d’accessibilité ? Qu’est-ce que l’accessibilité ? Cas pratiques. Des obligations légales. Les outils de test à notre disposition. Et l’innovation dans tout ça.
4. Pourquoi parler d’accessibilité ?
5. Qu’est-ce que l’UX Design ? soient facilement utilisables, soient agréables à l’oeil, répondent à un réel besoin. C’est un domaine de conception qui permet de construire des produits ou services en plaçant l’utilisateur au centre des attentions en s’assurant que ces premiers :
6. Des utilisateurs particuliers L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
7. Des utilisateurs particuliers handicaps moteurs, L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
8. Des utilisateurs particuliers handicaps moteurs, handicaps visuels, L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
9. Des utilisateurs particuliers handicaps moteurs, handicaps visuels, handicaps cognitifs, L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
10. Des utilisateurs particuliers handicaps moteurs, handicaps visuels, handicaps cognitifs, handicaps auditifs. L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
11. Des utilisateurs particuliers handicaps moteurs, handicaps visuels, handicaps cognitifs, handicaps auditifs. L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
12. Qu’est-ce que l’accessibilité numérique ?
13. “Accessibilité du numérique” – @geoffrey_crofte Permettre à tout un chacun d’accéder de la même manière à une information quelle que soit sa nature.
14. Historique du handicap Exclusion des personnes handicapées.
 Enfermement des mendiants, puis dépravés, handicapés…
 Affirmation du principe du devoir d’assistance.
 La loi commence à favoriser les infirmes et les premières associations de défense naissent.
 Définition du CIH puis des CIF par l’OMS XIVè Siècle 1656 - 1676 1790 XXè Siècle 1980 - 2002
15. Historique du handicap Exclusion des personnes handicapées.
 Enfermement des mendiants, puis dépravés, handicapés…
 Affirmation du principe du devoir d’assistance.
 La loi commence à favoriser les infirmes et les premières associations de défense naissent.
 Définition du CIH puis des CIF par l’OMS XIVè Siècle 1656 - 1676 1790 XXè Siècle 1980 - 2002 1997 - Accessibilité du Numérique
16. Qu’est-ce que le handicap ? On limite souvent le handicap à l’incapacité de la personne, à sa déficience. En réalité, il survient parce que l’environnement social n’est pas adapté. Pour réduire le gouffre entre handicapés et non-handicapés il faut éduquer et modifier l’environnement.
17. La déficience
 anomalie structurelle ou fonctionnelle du corps,
 Qu’est-ce que le handicap ? On limite souvent le handicap à l’incapacité de la personne, à sa déficience. En réalité, il survient parce que l’environnement social n’est pas adapté. Pour réduire le gouffre entre handicapés et non-handicapés il faut éduquer et modifier l’environnement.
18. La déficience
 anomalie structurelle ou fonctionnelle du corps,
 Les incapacités
 restriction des activités dues aux déficiences,
 Qu’est-ce que le handicap ? On limite souvent le handicap à l’incapacité de la personne, à sa déficience. En réalité, il survient parce que l’environnement social n’est pas adapté. Pour réduire le gouffre entre handicapés et non-handicapés il faut éduquer et modifier l’environnement.
19. La déficience
 anomalie structurelle ou fonctionnelle du corps,
 Les incapacités
 restriction des activités dues aux déficiences,
 Le handicap
 limitation en termes de réalisation d’un rôle social. Qu’est-ce que le handicap ? On limite souvent le handicap à l’incapacité de la personne, à sa déficience. En réalité, il survient parce que l’environnement social n’est pas adapté. Pour réduire le gouffre entre handicapés et non-handicapés il faut éduquer et modifier l’environnement.
20. Les stéréotypes lorsque l’on parle de handicap : les handicaps physiques lourds : tétraplégiques, les mal-voyants : aveugles, les handicaps cognitifs lourds : trisomiques, les mal-entendants : sourds. Les personnes concernées
21. Tout le monde ! Alors qu’en fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
22. Dyslexie, dyspraxie, Tout le monde ! Alors qu’en fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
23. Dyslexie, dyspraxie, Daltoniens, photosensibles, Tout le monde ! Alors qu’en fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
24. Dyslexie, dyspraxie, Daltoniens, photosensibles, Personnes âgées, Tout le monde ! Alors qu’en fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
25. Dyslexie, dyspraxie, Daltoniens, photosensibles, Personnes âgées, VOUS ! (fatigués, pressés, éblouis, bourrés, blessés, etc.) Tout le monde ! Alors qu’en fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
27. https://vimm.com/website-accessibility/
28. https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html
30. L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine.
31. L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine. Protanopie/malie (2%)
32. L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine. Protanopie/malie (2%) Deutéranopie/malie (5.1%)
33. L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine. Protanopie/malie (2%) Deutéranopie/malie (5.1%) Tritanopie/malie (0.005%)
34. L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine. Protanopie/malie (2%) Deutéranopie/malie (5.1%) Tritanopie/malie (0.005%) Achromatopsie (très rare)
35. Le test d’Ishihara Ce test, inventé en 1917 par Shinobu Ishihara, est un recueil de 38 planches utilisé pour dépister les anomalies de la vision des couleurs. Sources daltonien.free.fr
36. les sites web, les applications, votre outil informatique (ordi, tablette, smartphone), votre outil d’entrée (clavier, souris) un document PDF, un e-mail, une vidéo, etc… Les interfaces concernées
37. En réalité, nos machines et notre matériel sont déjà équipés pour être accessibles. Vous êtes déjà équipés…
38. Des exemples concrets
39. L’utilisation du clavier pour entrer du contenu sur nos interfaces numériques est habituelle. Écrire du contenu et interagir Le clavier
 Permet de rentrer des caractères dans les champs de formulaire ou documents.
 La souris / Trackpad
 Permet de bouger le curseur sur l’écran.
40. Nos claviers Touche J Touche F Touche 5 sur pavé numérique Des marques sur nos claviers permettent aux aveugles et mal-voyants de placer leurs doigts facilement.
41. Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet d’accéder à l’ensemble des touches à une main.
42. Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet d’accéder à l’ensemble des touches à une main. Le clavier Comic Sans ou coloré est idéal pour les dyslexiques.
43. Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet d’accéder à l’ensemble des touches à une main. Le clavier Comic Sans est idéal pour les dyslexiques ou personnes âgées. Le clavier séparé est plutôt un clavier ergo.
44. Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet d’accéder à l’ensemble des touches à une main. Le clavier Comic Sans est idéal pour les dyslexiques ou personnes âgées. Le clavier séparé est plutôt un clavier ergo. La plage braille pour mal-voyants.
45. Les pointeurs spécialisés La trackball ou souris ergo pour limiter les TMSLT.
46. Les pointeurs spécialisés La trackball ou souris ergo pour limiter les TMSLT. Le zoom curseur pour améliorer le repérage du curseur.
47. Les pointeurs spécialisés La trackball ou souris ergo pour limiter les TMSLT. Le zoom curseur pour améliorer le repérage du curseur. Le touch permet une interaction sensitive directe. Pas d’intermédiaire, pas de charge cognitive.
48. Les pointeurs spécialisés La trackball ou souris ergo pour limiter les TMSLT. Le zoom curseur pour améliorer le repérage du curseur. Le touch permet une interaction sensitive directe. Pas d’intermédiaire, pas de charge cognitive. Les besoins spécifiques peuvent être variés.
49. Manette personnalisable Microsoft a créé un contrôleur de jeu la Xbox Adaptive Controller, qui permet de s’adapter à plein d’usages différents grâce à des modules physiques et logiciels complémentaires. Voir la Xbox Adaptive Controller
50. Les aides « logicielles » Le principe des touches rémanentes (auto- maintien) permet d’utiliser les raccourcis clavier complexes (ex. CTRL + ALT + Suppr.) sans avoir à appuyer simultanément sur les touches. Appuyer 5 fois sur MAJ permet d’activer cette fonctionnalité sur Windows et Mac.
51. Repérer son curseur Le curseur de souris peut être grossi sur Mac et Windows dans les options d’accessibilité. Possible sur Mac de secouer la souris pour retrouver le curseur. Sur Windows appuyer sur CTRL permet de localiser le curseur.
52. Cibler un contenu Il est possible de faciliter l’accès aux cases à cocher. Les grossir dans certains cas. Aligner la souris sur les checkboxes.
53. Les commandes vocales Aujourd’hui il est possible de donner des ordres vocaux à son appareil : SIRI pour Apple, Cortana pour Microsoft, ou Google Voice sur Android. Il existe également des logiciels de dictée vocale comme le célèbre Dragon.
54. Le zoom navigateur Avec le raccourci CTRL + Molette il est possible de zoomer / dézoomer sur un site web. Également le pinch sur écran tactile ou sur trackpad.
55. Consommer de l’information La problématique principale de l’accessibilité est l’accès à l’information.
56. Consommer de l’information Des images, vidéos, sons Profiter de ces contenus quand on ne les voit ou entend pas. La problématique principale de l’accessibilité est l’accès à l’information.
57. Consommer de l’information Des images, vidéos, sons Profiter de ces contenus quand on ne les voit ou entend pas. Du contenu textuel Définir une hiérarchie de contenu et un langage adapté. La problématique principale de l’accessibilité est l’accès à l’information.
58. Consommer de l’information Des images, vidéos, sons Profiter de ces contenus quand on ne les voit ou entend pas. Du contenu complexe Arriver à accéder au contenu malgré des problèmes cognitifs. Du contenu textuel Définir une hiérarchie de contenu et un langage adapté. La problématique principale de l’accessibilité est l’accès à l’information.
59. Solution : le lecteur d’écran Une synthèse vocale parcourt le contenu et le retranscrit avec des mots.
60. Il va se baser sur la hiérarchie du document courant pour structurer sa lecture et faire gagner du temps à l’utilisateur. Le lecteur d’écran VoiceOver
 Installé sur tous les Mac, iPhone et iPad.
 NVDA – https:/ /www.nvda-fr.org/
 Installable sur Windows. JAWS
 Windows, mais un peu cher : $ 1.100
 ORCA – https:/ /wiki.gnome.org/Projects/Orca
 Installable sur Linux.
61. Solution : la plage braille Un lecteur d’écran qui retranscrit le contenu pour le lire du bout des doigts.
62. La Plage braille Les tarifs varient entre 1200€ et 10000€… Source : https:/ /www.ceciaa.com/
63. L’image et le son Une seule solution pour ces problématiques auditives et visuelles : Proposer une alternative textuelle. Avantage alternatif dans un contexte de calme. Permet d’améliorer le référencement naturel.
64. Alternative textuelle Des sous-titres aux videos, Un contexte textuel ou une retranscription de la vidéo ou du contenu audio.
 L’alternative textuelle devient lisible pour un mal-voyant.
65. Éviter au maximum les images textuelles, ou proposer une alternative textuelle. Les images-textes
66. Un effort de Twitter Propose aux auteurs de Tweets de renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
67. Un effort de Twitter Propose aux auteurs de Tweets de renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
68. Un effort de Twitter Propose aux auteurs de Tweets de renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
69. C’est bien… …mais pas suffisant.
70. Les éléments interactifs Pour pouvoir interagir avec l’interface, l’utilisateur doit pouvoir cibler, lire et reconnaître l’élément avec lequel il souhaite interagir. Proposer un texte explicite. (éviter les « Lire la suite » Proposer un vrai label. (pas juste des icônes)
71. Les éléments interactifs Pour pouvoir interagir avec l’interface, l’utilisateur doit pouvoir cibler, lire et reconnaître l’élément avec lequel il souhaite interagir. Proposer un texte explicite. (éviter les « Lire la suite » Proposer un vrai label. (pas juste des icônes)
72. La hiérarchie des contenus Définir une hiérarchie de titre et les utiliser permet de rendre le document sémantiquement correct. Contenu plus clair pour un lecteur d’écran.
 Contrôle de la cohérence graphique du document.
73. Les polices alternatives Proposer des variantes de fontes sur un site web peut-être un moyen de faire un pas en direction des personnes dyslexiques. Proposer des variantes d’espacement d’une fonte de votre charte.
 Proposer des alternatives de fonte comme DyslexieFont par exemple.
 Laisser le choix.
74. La couleur Une problématique visible est le choix de couleurs et les contrastes. Vérifier les contrastes texte / fond. Éviter les couleurs vives. (photosensibilité)
 Ne pas distinguer que par la couleur.
76. http://colorsafe.co/
77. Color Contrast Analyzer
78. La couleur De fait il ne faut pas faire reposer l’information que sur la couleur mais aussi sur les formes. Utiliser des pictogrammes en plus des couleurs.
 Utiliser des trames de fonds au lieux d’aplats.
79. Proposer des alternatives Un autre exemple dans un jeu bien connu qui permet de ne pas reposer uniquement sur la couleur. Proposer des formes en plus des couleurs.
 Éviter la surcharge visuelle pour limiter la charge mentale.
80. Proposer des alternatives Un autre exemple dans un jeu bien connu qui permet de ne pas reposer uniquement sur la couleur. Proposer des formes en plus des couleurs.
 Éviter la surcharge visuelle pour limiter la charge mentale.
81. Du contenu complexe Tout contenu qui serait : Implicite : représentation non légendée, iconographie, etc. Technique : jargon, langage soutenu,
 Chargé : trop de contenu, contenu animé, contenu surchargé.
82. Ajustement ergonomique Pour des problématiques moteur il est également possible de proposer des ajustements de l’ergonomie en connaissant le contexte d’utilisation. Connaître votre public cible permettra de ne pas vous planter lors de la conception de votre produit.
83. Ajustement ergonomique Pour des problématiques moteur il est également possible de proposer des ajustements de l’ergonomie en connaissant le contexte d’utilisation. Connaître votre public cible permettra de ne pas vous planter lors de la conception de votre produit.
84. Des obligations légales
85. Le WAI Le Web Accessibility Initiative (WAI) début en 1997 initié par le World Wide Web Consortium (W3C). Groupe de travail spécialisé, Objectifs de normalisation mondiaux
86. Le WCAG Les Web Content Accessibility Guidelines (WCAG) sont publiées en version 1.0 en 1999. 14 guidelines Couvre déjà les contenus graphiques, audiovisuels, l’aspect technique et graphique, le langage.
 Version 2.0 publiée en 2008, notations A et AA
87. Le RGAA Le Référentiel Général d'Accessibilité pour les Administrations (RGAA) est publié en 2008, adoption des WCAG au niveau national. Projet de modernisation de l’État, Plus adapté que le référentiel précédent Possibilité d’adoption progressive.
88. Le RGAA Le Référentiel Général d'Accessibilité pour les Administrations (RGAA) est publié en 2008, adoption des WCAG au niveau national. Projet de modernisation de l’État, Plus adapté que le référentiel précédent Possibilité d’adoption progressive.
89. Et au Luxembourg ? Le Référentiel Renow fait office de référentiel fourre-tout mêlant UX, bonnes pratiques ergonomiques, rédaction de contenu et règles d’accessibilité que l’on retrouve dans le RGAA Français.
90. Référentiel plus officiel ? Une nouvelle initiative Luxembourgeoise propose un site web pour aider à l’évaluation de votre site internet ou application mobile par exemple. Il est inspiré du référentiel du RGAA. https:/ /accessibilite.public.lu/fr/
91. Site Web et App Publiques La loi du 28 mai 2019 relative à l’accessibilité des sites internet et des applications mobiles des organismes du secteur public. La loi sur Legilux
92. Les sites web et applications d’organismes du secteur public
 se doivent de respecter les critères d’accessibilité et d’ergonomie. Exceptions qui n’ont pas l’obligation :
 — Site web des diffuseurs de services publics — Site web des ONG qui ne fournissent pas des services essentiels au public — Site web des établissement scolaire et crèches (sauf pour les démarches administratives) — Les formats de fichiers bureautiques publiés avant le 23 septembre 2018 (si pas indispensables) — Les médias temporel diffusés en direct Obligation légale
93. Les outils de test
94. Tester la couleur Des outils abordables permettent de vous aider à rendre les couleurs accessibles.
98. Tester le contenu textuel Le meilleur moyen de tester le contenu textuel d’un document reste de le faire lire par un lecteur d’écran. Démarrez VoiceOver et laissez-vous guider.
99. Que nous réserve le futur ?
100. Assistants vocaux En dehors du côté fun des assistants vocaux (comme Alexa, Google Assistant, Cortana) ces solutions sont aussi un bon moyen de proposer une alternative inclusive de navigation et d’accès à des outils de contrôle (passer commande, domotique, etc.)
101. Innovation, maintenant. Les lunettes qui permettent à des daltoniens de percevoir les couleurs comme la plupart des gens les perçoivent. Conçues par Enchroma, leur communication est très… émotive… mais hélas…
102. Enchroma - Fake News Je suis désolé de vous apprendre qu’en fait ce n’est pas le cas du tout. Enchroma propose des lunettes polarisantes qui accentuent la différence entre les couleurs et leur brillance. Ce n’est pas une solution qui « restaurent » les couleurs pour les daltoniens.
103. Comment puis-je contribuer ?
104. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous,
105. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus,
106. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus, Designers : tailles de texte, contrastes, choix de couleurs,
107. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus, Designers : tailles de texte, contrastes, choix de couleurs, Développeurs : qualité du code, hiérarchie de contenu, sémantique,
108. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus, Designers : tailles de texte, contrastes, choix de couleurs, Développeurs : qualité du code, hiérarchie de contenu, sémantique, Rédacteurs : éviter le jargon ou le définir, hiérarchie de contenu.
109. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus, Designers : tailles de texte, contrastes, choix de couleurs, Développeurs : qualité du code, hiérarchie de contenu, sémantique, Rédacteurs : éviter le jargon ou le définir, hiérarchie de contenu. Contribuer au sous-titrage de vidéos sur les plateformes qui le proposent,
110. Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus, Designers : tailles de texte, contrastes, choix de couleurs, Développeurs : qualité du code, hiérarchie de contenu, sémantique, Rédacteurs : éviter le jargon ou le définir, hiérarchie de contenu. Contribuer au sous-titrage de vidéos sur les plateformes qui le proposent, Toujours rester critique…
111. “Accessibilité du numérique” – @geoffrey_crofte Quelques ressources Test Daltonien Produit et services pour aveugles Un sujet daltonisme dans la vie réelle Color Blindness Simulator Accessibility Insights for Web (Chrome) Enchroma – Lunettes pour daltoniens Le WAI – L’initiative accessibilité Le RGAA – référentiel FR. accessibilité.public.lu – référentiel LU. Dragon — logiciel de dictée vocale.
112. “Accessibilité du numérique” – @geoffrey_crofte Lexique TMSLT : Troubles Musculo-squelettiques Liés au travail. CIF : Classification Internationale du Fonctionnement CIH : Classification Internationale des Handicaps OMS : Organisation Mondiale pour la Santé.