Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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.

Geoffrey Crofte

April 23, 2018
Tweet

More Decks by Geoffrey Crofte

Other Decks in Design

Transcript

  1. “Accessibilité du numérique” – @geoffrey_crofte Geoffrey Crofte UX / UI

    Designer — Accessibility & Design System Advocado @geoffreycrofte geoffrey.crofte.fr creativejuiz.fr
  2. “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.
  3. 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 :
  4. Des utilisateurs particuliers handicaps moteurs, L’UX englobe l’ensemble des utilisateurs.

    L’accessibilité prend en compte des utilisateurs spécifiques :
  5. Des utilisateurs particuliers handicaps moteurs, handicaps visuels, L’UX englobe l’ensemble

    des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :
  6. 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 :
  7. 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 :
  8. 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 :
  9. “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.
  10. 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
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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
  17. Tout le monde ! Alors qu’en fait l’accessibilité peut aussi

    vous concerner ponctuellement un jour, voire au quotidien.
  18. Dyslexie, dyspraxie, Tout le monde ! Alors qu’en fait l’accessibilité

    peut aussi vous concerner ponctuellement un jour, voire au quotidien.
  19. Dyslexie, dyspraxie, Daltoniens, photosensibles, Tout le monde ! Alors qu’en

    fait l’accessibilité peut aussi vous concerner ponctuellement un jour, voire au quotidien.
  20. 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.
  21. 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.
  22. L’exemple de la couleur Le daltonisme touche 8% de la

    population masculine et 0.5% de la population féminine.
  23. L’exemple de la couleur Le daltonisme touche 8% de la

    population masculine et 0.5% de la population féminine. Protanopie/malie (2%)
  24. 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%)
  25. 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%)
  26. 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)
  27. 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
  28. 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
  29. En réalité, nos machines et notre matériel sont déjà équipés

    pour être accessibles. Vous êtes déjà équipés…
  30. 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.
  31. 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.
  32. Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet

    d’accéder à l’ensemble des touches à une main.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. Solution : la plage braille Un lecteur d’écran qui retranscrit

    le contenu pour le lire du bout des doigts.
  50. 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.
  51. 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.
  52. Un effort de Twitter Propose aux auteurs de Tweets de

    renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
  53. Un effort de Twitter Propose aux auteurs de Tweets de

    renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
  54. Un effort de Twitter Propose aux auteurs de Tweets de

    renseigner des alternatives textuelles. Difficile à trouver et pas complet.
 Peu adopté…
  55. 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)
  56. 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)
  57. 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.
  58. 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.
  59. 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.
  60. 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.
  61. 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.
  62. 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.
  63. 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é.
  64. 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.
  65. 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.
  66. 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
  67. 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
  68. 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.
  69. 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.
  70. 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.
  71. 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/
  72. 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
  73. 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
  74. 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.
  75. 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.)
  76. 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…
  77. 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.
  78. Comment puis-je contribuer ? Prendre conscience que ça nous concerne

    tous, Faire des efforts en tant que créateur de contenus,
  79. 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,
  80. 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,
  81. 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.
  82. 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,
  83. 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…
  84. “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.
  85. “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é.