Introduction

Marie Guillaumet : Bonsoir ! Merci d’être venu·e·s aussi nombreux, le design inclusif a l’air de vous tenir à cœur, je pense qu’on va bien s’entendre vous et nous. Je tiens aussi à remercier le collectif UX Rennes pour son invitation et son accueil chaleureux.

La transcription de cette conférence est en ligne à l’adresse a42.fr/uxrennes pour vous permettre de suivre plus facilement si besoin.

Je vais laisser ma collègue Sylvie Duchateau se présenter.

Sylvie Duchateau : Bonsoir ! Je suis donc Sylvie, je suis aveugle de naissance et j’utilise depuis plusieurs dizaines d’années un ordinateur et une plage braille pour ma vie professionnelle et personnelle. Je travaille chez Access42 depuis trois ans et je sensibilise et forme des personnes à l’accessibilité numérique.

Marie Guillaumet : Quant à moi, je m’appelle Marie Guillaumet, je travaille également chez Access42 où je me spécialise en accessibilité depuis quelques mois, après avoir travaillé huit ans en agences en tant qu’intégratrice et web designer.

Access42 est une société coopérative spécialisée en accessibilité numérique, qui propose de l’accompagnement et de nombreuses formations.

Je vais commencer par faire un petit sondage :

L’accessibilité numérique est un domaine du design passionnant, mais qui est hélas peu connu, et peu enseigné.

En deux mots, l’accessibilité est un droit fondamental : c’est le droit fondamental des personnes handicapées à utiliser le Web. Pour les personnes handicapées, l’accessibilité numérique est un vecteur d’intégration sociale, de participation citoyenne et d’indépendance individuelle.

L’accessibilité bénéficie aussi à d’autres, notamment aux personnes âgées dont les capacités changent avec l’âge.

La notion de design inclusif est intéressante car elle sous-entend que, sans ça, le design a tendance à exclure.

Vous-mêmes, quand vous concevez des interfaces, vos propres biais cognitifs peuvent intervenir, et vous amener à exclure certaines catégories d’utilisateurs de manière totalement inconsciente.

Concrètement, un site inaccessible est un site sur lequel l’expérience utilisateur des personnes handicapées va être quasiment impossible, ou alors très, très frustrante.

Il y a des défauts d’accessibilité qui empêchent certaines personnes d’utiliser complètement le site. Et celles qui arrivent à se débrouiller, y arriveront au prix de moyens détournés extrêmement fastidieux et d’une perte de temps énorme. Dans tous les cas, l’expérience va être ultra négative.

Éthiquement, un site inaccessible véhicule l’idée qu’il existe des catégories de personnes, et que les personnes handicapées ne font pas partie de la bonne catégorie aux yeux des concepteurs du site.

Voilà pourquoi parler d’accessibilité dans un cadre UX est très pertinent : pour replacer ces utilisateurs-là au cœur de la conception. L’accessibilité répond en effet à une myriade de besoins utilisateurs.

L’accessibilité est en quelque sorte une extension du design UX : l’UX accessible, c’est une démarche UX plus inclusive, consciente de ses impacts sur les autres et sur la société, en particulier sur les personnes habituellement considérées comme des citoyennes et des citoyens de seconde zone.

L’objectif de cette présentation est de vous donner envie d’incorporer l’accessibilité dans votre processus de conception actuel, et de vous donner suffisamment de pistes pour vous y atteler dès lundi !

Notre présentation va durer une trentaine de minutes, et se dérouler de la façon suivante :

  1. d’abord nous allons nous pencher sur les utilisateurs handicapés, pour mieux comprendre leurs besoins et leurs attentes. Sylvie fera une démonstration de son lecteur d‘écran ;
  2. ensuite nous vous présenterons rapidement le cadre légal et normatif de l’accessibilité, à savoir la loi et les référentiels de référence, pour que vous n’avanciez pas dans le brouillard ;
  3. enfin, si j’ai le temps, je vous présenterai quelques outils et pistes méthodologiques pour commencer à concevoir de façon accessible.

1. Quels utilisateurs ?

1.1. Panoramas des handicaps concernés

Marie Guillaumet : Commençons par nous intéresser aux utilisateurs concernés par l’accessibilité, et à leurs spécificités.

Il faut savoir que le handicap concerne beaucoup de monde en France aujourd’hui.

En outre, près d’un tiers des internautes français ont plus de 50 ans. Parmi eux 85 % ont de problèmes de vue (sources : Ipsos, Datamonitor, Insee/Sesi, citées par Romy Duhem-Verdière).

Ces chiffres prouvent que ceux qui considèrent les utilisateurs en situation de handicap comme « des cas isolés » se trompent. Rien que dans votre rue, votre bus, ou parmi vos clients, ça en fait du monde ! Surtout que 80 % des handicaps sont invisibles. Par exemple, être daltonien, c’est un handicap. Être dyslexique, aussi. Ça concerne sans doute des personnes parmi vous.

Pour comprendre à quoi sert l’accessibilité, il faut connaître les déficiences qui affectent l’accès à Internet.

Or, ce n’est pas inné de connaître tout ça, car les situations individuelles qui existent en matière de handicap sont très diverses. Et puis on n’a pas toujours la chance de connaître des personnes handicapées.

C’est pourquoi je vous conseille une très bonne lecture pour vous familiariser avec les besoins et les attentes des utilisateurs en situation de handicap en matière de web : c’est le guide Défauts d’accessibilité : impacts sur les utilisateurs, publié par l’État.

Il explique bien les caractéristiques de chaque grande catégorie de déficience, les technologies d’assistance utilisés par chaque groupe d’utilisateurs, ainsi que les conséquences provoquées par les défauts d’accessibilité des interfaces sur les utilisateurs.

On réduit souvent l’accessibilité aux personnes aveugles, mais en réalité, l’accessibilité concernent tous les handicaps qui affectent l’accès au web.

Même si, beaucoup de personnes aveugles et très malvoyantes vont bénéficier de l'accessibilité numérique, grâce notamment aux alternatives accessibles leur permettant de comprendre les contenus non textuels, d’autres personnes en profitent :

Et n’oublions pas que nous-mêmes, nous pouvons nous retrouver en situation de handicap au cours de notre vie, temporairement ou définitivement. Comme le rappelle Olivier Nourry, avec un peu de chance, nous vivrons assez longtemps pour voir dégénérer nos facultés à voir, entendre, et bouger.

1.2. Démonstration d’un lecteur d’écran

Comment fonctionne un lecteur d’écran ?

Sylvie Duchateau : Un lecteur d’écran est un logiciel qui restitue l’information affichée à l’écran en mode texte. Il analyse le contenu de l’écran et le reformate si besoin pour le rendre plus compréhensible à l’utilisateur.

Ainsi, sur le bureau, j’ai un certain nombre d’icônes organisées en différentes colonnes. Le lecteur d’écran prononcera le nom de l’icône sur laquelle je me trouve en ajoutant, par exemple, « Corbeille, 3 sur 33 ».

Cette information restituée en mode texte est ensuite prononcée par une synthèse vocale et/ou affichée par la plage braille. Avec le braille et la synthèse vocale, on a une double lecture : audio et tactile. Cela signifie que la personne qui se sert d’un lecteur d’écran n’a pas une vue globale de l’écran mais qu’elle ne perçoit que le contenu affiché ou prononcé, soit, dans mon cas, 40 caractères à la fois. Pour lire la suite en braille, il faut appuyer sur un bouton qui affichera la ligne de 40 caractères suivante.

Lorsqu’on se sert d’un lecteur d’écran, on utilise rarement la souris mais une multitude de raccourcis clavier :

On peut lire une page de A à Z ou demander à son outil d’aller au prochain élément, par exemple le prochain champ de formulaire. Ceci est pratique lorsqu’on connaît bien le site.

Les lecteurs d’écran sont aujourd’hui très performants, on peut les personnaliser : changer la prononciation d’un mot, par exemple ou changer un raccourci clavier.

On en trouve aujourd’hui sur tous les systèmes d’exploitation, aussi bien sur un ordinateur que sur un appareil mobile. Par exemple, sous Mac et iOS, c’est VoiceOver.

Il n’y a pas que les personnes aveugles qui utilisent un lecteur d’écran, mais les personnes très malvoyantes, dont la vision est trop faible ou fatigue, ou les personnes ayant des difficultés de lecture, comme les personnes dyslexiques.

Place aux tests !

Voici maintenant une démonstration des difficultés d’accès que l’on peut rencontrer quand on navigue sur le web avec un lecteur d’écran.

  1. Exemple de champ mal relié : lorsque je tabule sur ces deux boutons radio, j’entends juste « oui » ou « non » mais je ne sais pas à quelle question je réponds. Je suis donc obligée de désactiver mon mode de remplissage de formulaire pour lire la question.
  2. Voici maintenant le même formulaire accessible. Ici, le lecteur d’écran indique bien à quoi correspond chaque bouton radio.
  3. Maintenant, voici un formulaire avec des champs pas clairs. J’entends plusieurs fois le mot prénom, mais je ne sais pas à quoi cela fait référence.
  4. Voici maintenant le même formulaire corrigé. Là vous entendez bien de quel passager il s’agit.
  5. Alors, ici, on a un formulaire avec des erreurs. Ce cas est très frustrant, car on a beau tenter de remplir toujours les mêmes choses, on ne sait pas pourquoi le formulaire ne se valide pas.
  6. Voici enfin le même formulaire accessible. Ici, on entend bien la différence et ce qui ne colle pas. Il est important, en accessibilité, d’indiquer quel est le format attendu et d’expliquer quelle erreur l’utilisateur a faite. Sinon, il va vite se décourager et abandonner le formulaire. La solution est donc d’indiquer dans l’étiquette du champ l’information attendue et de donner un exemple de saisie réelle pour aider l’utilisateur à comprendre son erreur.

Notons que ces améliorations ne sont pas seulement utiles à des personnes qui sont aveugles, mais pour les gens qui ont des difficultés de saisie, de lecture, de compréhension.

Ceci n’est qu’une petite démonstration. Si vous voulez en savoir plus sur les lecteurs d’écran, il y a un guide dédié qui vous explique comment ils fonctionnent, comment les configurer, comment tester : a42.fr/lecteurs-ecran

1.3. Responsabilité des designers

Marie Guillaumet : On pourrait presque dire qu’il y a autant de façons de naviguer sur le web que de situations individuelles de handicap. Face à ça, il peut être tentant de trouver une solution unique qui fonctionnerait pour tout le monde, pour ne plus avoir à gérer les besoins des aveugles d’un côté, ceux des sourds de l’autre, et ainsi de suite.

Actuellement, de nombreux articles vantent les mérites du design universel. Selon eux, il ne serait plus nécessaire de parler des personnes handicapées si les produits que nous concevons devenaient soudain, comme par magie, utilisables par toutes et tous, indépendamment de leur âge, de leur genre ou de leurs handicaps. On voudrait invisibiliser les personnes handicapées et leurs besoins qu’on ne s’y prendrait pas mieux.

Je vais vous raconter une petite anecdote très révélatrice à propos du design universel. Il y a un exemple qu’on donne souvent pour illustrer ce concept, c’est la rampe escalier.

Rampe escalier
Rampe escalier. Crédit photo : Vladimir Zlokazov.

L’idée est a priori simple : c’est un concept architectural qui mêle des escaliers et des rampes au même endroit. La rampe traverse les escaliers de bas en haut, en forme de Z.

Pour les architectes qui ont conçu ça, c’était une idée brillante, car ça évitait d’avoir d’un côté des escaliers pour les personnes valides, et des rampes à part pour les personnes à mobilité réduite. Cette innovation était censée répondre à tous les besoins imaginables. En plus elle possède un attrait visuel certain.

Sauf que ces rampes escaliers posent des tas de problèmes d’accessibilité et de sécurité. Par exemple la couleur du nez des marches n’est pas suffisante, et pose problème aux personnes malvoyantes, qui peuvent trébucher faute de les avoir vues. De plus, l’inclinaison de la rampe est trop forte, et rend leur utilisation difficile pour les personnes en fauteuil roulant. Etc. Je vous renvoie à l’article si vous voulez en savoir plus : a42.fr/rampes-escaliers

La conclusion de ça, c’est que nous devons craindre les conséquences de notre travail sur les utilisateurs plus que nous aimons l’intelligence de nos idées, pour paraphraser Mike Monteiro.

Le design est une discipline où il faut faire preuve de créativité tout en tenant compte d’un certain nombre de normes et d’exigences. En ça, l’accessibilité est un vrai défi créatif.

Mais avoir un site « à peu près accessible » ou « qui a l’air accessible » ne suffit pas. Pour être sûrs de concevoir des sites ou des applis accessibles, il faut respecter les standards.

2. Quels standards ?

Sylvie Duchateau : Les standards sont un élément important à respecter pour rendre un site accessible.

Pour intégrer l’accessibilité dans une démarche UX, il faut se baser sur ces standards et les prendre en compte dès le début du projet, pas une fois que tout est terminé.

Il n’est pas question non plus de faire un site web dédié à chaque handicap : il faut inclure les personnes handicapées dans son process de design.

2.1. Socle normatif

La norme en matière d’accessibilité est internationale : il s’agit des WCAG, les Web Content accessibility Guidelines, éditées par le W3C. Cette norme existe depuis décembre 2008 et elle est devenue une norme iso en 2012. Ce qui lui permet d’être appliquée dans de nombreux pays.

En France, la méthode d’implémentation des WCAG est le Référentiel Général d’accessibilité pour les administrations (RGAA). Il se base sur les WCAG est permet de tester la conformité d’un site à la norme selon un certain nombre de tests classés par thématiques : les images, les liens, les formulaires, le multimédia, les contrastes, la présentation visuelle, etc.

Comme il y a 13 thématiques, la vérification de la conformité peut sembler longue, mais en réalité on ne teste pas tout. Par exemple, si vous n’avez pas de multimédia sur votre site, vous ne testerez pas cette thématique. Vous avez juste besoin de vous conformer aux critères applicables à votre projet en cours.

Comment prioriser les différents critères d’accessibilité ? Il y a 3 niveaux de priorité qui peuvent aider à prendre les décisions en matière d’accessibilité : le niveau A (niveau minimum), double A (AA, le niveau légal requis par la loi) et le niveau triple A (AAA).

Ce classement par priorité dépend de l’importance pour les personnes handicapées, par exemple le premier niveau contient des critères nécessaires pour comprendre et accéder à l’information. Si ces critères ne sont pas respectés, les personnes handicapées ne pourront tout simplement pas accéder au site du tout.

Ces niveaux de priorité prennent aussi en compte la faisabilité du critère lors de son implémentation. Les critères de niveau triple A sont plus complexes à mettre en œuvre.

Exemple de critères

Voici un exemple de critère issu du RGAA.

Critère 11.4 [A] Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ? Ce critère est primordial pour les personnes qui ont une déficience visuelle. Accoler les champs leur permettra d'être sûres qu'elles ne font pas d'erreur en les remplissant et se positionnant sur le mauvais champ.

Le respect du RGAA est indispensable pour s’assurer que le site (ou l’appli) peut être utilisé par les personnes en situation de handicap, qu’elles aient accès à l’information et puissent interagir avec l’information.

2.2. Obligation légale

En France, l'obligation d'accessibilité date de la loi de 2005 sur le handicap. Son article 47 imposait aux sites publics de l'État de respecter les recommandations internationales.

Aujourd'hui, avec la loi pour une république numérique l'obligation d'accessibilité a été étendue aux entreprises délégataires d'une mission de service public (Compagnie des eaux par exemple) et aux entreprises dont le chiffre d'affaires dépasse un certain seuil. Cela s'étend également aux applications mobiles et au mobilier urbain par exemple.

On attend toujours la publication d'un décret qui doit déterminer les conditions exactes d'application de la loi. La France doit être également conforme à une directive européenne sur l’accessibilité avant septembre 2018.

3. Quels outils ?

Marie Guillaumet : L’UX peut permettre l’amélioration de l’expérience utilisateur des personnes en situation de handicap, sur la base du respect des WCAG. L’accessibilité permet de garantir l’accès à l’information, mais on a besoin de l’UX pour garantir l’utilisabilité d’un site ou d’une appli, pour être sûrs que les utilisateurs arrivent bien à atteindre l’objectif fixé.

Par où commencer votre réflexion, si le sujet est nouveau pour vous ?

3.1. Méthodologie UX

Intégrer l’accessibilité dans votre processus

Pour commencer, intégrez l’accessibilité dans vos process.

En tant que composante de l’UX, l’accessibilité doit être mise en œuvre dès le début d’un projet pour fonctionner.

En effet, l’accessibilité ne concerne pas uniquement le socle technique d’un site ou d’une application : il y a de nombreux critères d’accessibilité qui impactent la phase de conception fonctionnelle et graphique.

Les équipes techniques qui vont développer les interfaces que vous avez conçues ne sont pas magiciennes : elles ne pourront pas rendre accessible un site ou une appli si vous n’avez pas inclus l’accessibilité dans votre démarche de conception. On ne modifie plus un gâteau une fois qu’il est cuit.

Une bonne accessibilité dépend des choix que vous faites au début de chaque projet. Concevez toujours en gardant l’accessibilité à l’esprit.

Personas

Pour penser aux utilisateurs handicapés tout au long de votre processus de conception, il peut être utile d’ajouter des déficiences à certains de vos personas.

Il existe plusieurs pistes pour en concevoir. Vous pouvez soit vous inspirer de personas existants, tous en anglais :

Soit lire des témoignages d’utilisateurs handicapés, pour mieux comprendre comment ils naviguent sur le web :

Cependant, gardez à l’esprit que les personas d’utilisateurs handicapés ne suffisent pas à rendre un site accessible. Le problème est que les situations individuelles de handicap sont trop variées et nombreuses pour être résumées en quelques personas.

Par exemple, entre deux personnes aveugles, la première pourra, comme Sylvie, connaître son lecteur d’écran sur le bout des doigts, tandis qu’une autre pourra être totalement néophyte en la matière. Elles ont donc le même handicap mais ne naviguent pas du tout de la même manière sur le web.

Tests d’utilisabilité

Les tests d’utilisabilité avec des utilisateurs en situation de handicap n’ont d’intérêt que si vous faites tester des interfaces accessibles.

Dans le cas contraire, les tests vont forcément échouer à un moment ou à un autre, ils n’ont donc aucune utilité sur des interfaces qui ne sont pas accessibles.

Le service web du gouvernement britannique a réalisé des tests d’utilisabilité avec des personnes ayant différents handicaps, les résultats sont intéressants :

Ces articles donnent également quelques conseils pour organiser des tests avec des personnes handicapées dans de bonnes conditions, par exemple en leur demandant de tester avec leur matériel habituel, et en prévoyant plus de temps pour ces tests-là que d’habitude.

Dans tous les cas, notez bien que les personas handicapés et les tests d’utilisabilité avec des personnes en situation de handicap ne garantissent pas pour autant que votre site soit conforme WCAG ou RGAA. Ce sont des outils qui doivent être utilisés en parallèle des référentiels.

3.2. Auto-formation

Apprendre les fondamentaux

Concrètement, si vous voulez vous mettre à l’accessibilité dès lundi, plongez-vous dans le guide impacts utilisateurs, pour commencer, pour mieux comprendre les utilisateurs pour qui vous allez travailler.

Ensuite, l’État a publié un guide accessibilité spécialement pour les concepteurs, que je vous conseille de lire. Il y a notamment un gros chapitre sur la conception fonctionnelle, avec plein d’exemples.

Si cela vous semble trop à absorber d’un coup, choisissez une thématique du RGAA (par exemple : les formulaires), et lisez tout ce que vous pouvez à ce sujet, par exemple la fiche Navigation du guide concepteurs. De là, les critères RGAA concernés sont listés : prenez-en connaissance, et allez lire l’équivalence chez WCAG si besoin pour mieux comprendre chaque critère.

Quelques lectures

Niveau livres, il n’existe hélas rien qui soit à jour en français. Mais il y a un petit bouquin en anglais qui vient de sortir, écrit par Laura Kalbag, qui s’intitule Accessibility for Everyone, et qui est pas mal. On peut espérer qu’il soit traduit bientôt en français.

Sur Twitter, vous pouvez utiliser le hashtag #a11y pour poser vos questions, partager vos découvertes ou faire votre veille relatives à l’accessibilité. « a11y » est un numéronyme pour le mot « accessibility ». Comme il y a 11 lettres entre le « a » et le « y » final, on l’écrit « a11y » pour que ce soit plus court.

Il y a aussi quelques blogs dédiés à l’accessibilité que nous vous recommandons :

Conclusion

Sylvie Duchateau : En conclusion, je me dis que vous vous sentez peut-être submergés d’information et vous vous demandez comment vous allez faire ? Vous êtes un peu perdus ? Rassurez-vous ! Rome, ou plutôt Rennes, ne s’est pas bâtie en un jour. L’accessibilité ça s’apprend, ça devient un automatisme au bout d’un certain temps on l’intègre et on n’y pense plus.

Il faut acquérir cette nouvelle dimension dans votre process étape par étape. On ne vous demande pas de tout rendre accessible d’un coup.

Mais si la conscience que faire accessible est nécessaire est présente, cela vous aidera beaucoup de découper par étapes.

Commencez par vous concentrer sur les problématiques qui concerne l'accès à l'information, par exemple les alternatives et les formulaires, et ensuite essayer d’implémenter les autres critères de niveau A du RGAA, puis les critères AA.

Si vous voulez aller encore plus vite, formez-vous ! Cela vous aidera à acquérir des automatismes.

N’hésitez pas à nous contacter si besoin par email à l’adresse bonjour@access42.net ou via Twitter @access42net.

Merci pour votre attention !

PS : en complément, ne manquez pas la transcription de la petite conférence UX et accessibilité : BFF ! que Marie a donnée à BlendWebMix le 26 octobre 2017.

Remerciements

Merci au collectif UX Rennes pour son invitation et son accueil chaleureux.