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

Slide 1

Slide 1 text

Accessibilité du numérique Une attitude user-centric

Slide 2

Slide 2 text

“Accessibilité du numérique” – @geoffrey_crofte Geoffrey Crofte UX / UI Designer — Accessibility & Design System Advocado @geoffreycrofte geoffrey.crofte.fr creativejuiz.fr

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Pourquoi parler d’accessibilité ?

Slide 5

Slide 5 text

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 :

Slide 6

Slide 6 text

Des utilisateurs particuliers L’UX englobe l’ensemble des utilisateurs. L’accessibilité prend en compte des utilisateurs spécifiques :

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 :

Slide 10

Slide 10 text

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 :

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Qu’est-ce que l’accessibilité numérique ?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

https://vimm.com/website-accessibility/

Slide 28

Slide 28 text

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

L’exemple de la couleur Le daltonisme touche 8% de la population masculine et 0.5% de la population féminine. Protanopie/malie (2%)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

En réalité, nos machines et notre matériel sont déjà équipés pour être accessibles. Vous êtes déjà équipés…

Slide 38

Slide 38 text

Des exemples concrets

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

Les claviers spécialisés Le clavier mono-manuel gaucher ou droitier permet d’accéder à l’ensemble des touches à une main.

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Les pointeurs spécialisés La trackball ou souris ergo pour limiter les TMSLT.

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

Consommer de l’information La problématique principale de l’accessibilité est l’accès à l’information.

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

Solution : le lecteur d’écran Une synthèse vocale parcourt le contenu et le retranscrit avec des mots.

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

Solution : la plage braille Un lecteur d’écran qui retranscrit le contenu pour le lire du bout des doigts.

Slide 62

Slide 62 text

La Plage braille Les tarifs varient entre 1200€ et 10000€… Source : https:/ /www.ceciaa.com/

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

Éviter au maximum les images textuelles, ou proposer une alternative textuelle. Les images-textes

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

C’est bien… …mais pas suffisant.

Slide 70

Slide 70 text

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)

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

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.

Slide 74

Slide 74 text

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.

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

http://colorsafe.co/

Slide 77

Slide 77 text

Color Contrast Analyzer

Slide 78

Slide 78 text

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.

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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.

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Des obligations légales

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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.

Slide 88

Slide 88 text

Slide 89

Slide 89 text

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.

Slide 90

Slide 90 text

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/

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Les outils de test

Slide 94

Slide 94 text

Tester la couleur Des outils abordables permettent de vous aider à rendre les couleurs accessibles.

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

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.

Slide 99

Slide 99 text

Que nous réserve le futur ?

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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…

Slide 102

Slide 102 text

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.

Slide 103

Slide 103 text

Comment puis-je contribuer ?

Slide 104

Slide 104 text

Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous,

Slide 105

Slide 105 text

Comment puis-je contribuer ? Prendre conscience que ça nous concerne tous, Faire des efforts en tant que créateur de contenus,

Slide 106

Slide 106 text

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,

Slide 107

Slide 107 text

Slide 108

Slide 108 text

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.

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

“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é.