Tous les articles14 Février

L’accessibilité numérique

Comment pouvons-nous concevoir des produits numériques accessibles à toutes et à tous ?

Introduction

L'accessibilité est le droit que chacun a d'accéder à quelque chose. Ne pas penser accessibilité et mettre de côté les handicaps c'est assumer que l'on exclut 20% de la population, soit une personne sur cinq. Il est donc important de prendre en compte cet aspect dès le début d'un projet de façon à exclure le moins de personnes possibles. Mais comment pouvons-nous concevoir une interface accessible à toutes et à tous ?

personnages-accessibilité

Un droit d'accès

Définition

L'accessibilité du numérique est la problématique de l'accès aux contenus et services web par les personnes handicapées (déficients visuels, sourds, malentendants, etc.) et plus généralement par tous les utilisateurs, quels que soient leurs dispositifs d’accès (mobile, tablette, etc.) ou leurs conditions d’environnement (niveau sonore, éclairement, etc.).

Différents types de handicaps permanents ou temporaires

RGAA

Le RGAA (Référentiel Général d'amélioration de l'accessibilité, France) ou W3C (World Wild Web Consortium) définit des normes techniques d'accessibilité numérique.
En France, un audit basé sur les 106 critères RGAA permet de définir le niveau d'accessibilité d'un site.Aujourd'hui, les services publics et certains services privés ont l'obligation d'être accessible à toutes et tous.

Audits d'accessibilité

Des audits spécialisés fait par des experts permettent de valider si le site respecte bien les normes et quels sont les éléments à optimiser. Il sera de plus en plus obligatoire de respecter ces normes, c'est pourquoi il est important de se former sur le sujet et permettre ainsi au plus grand nombre d'accéder et vivre pleinement l'expérience du site.

Accessibillité et méthodologie UX

méthodologie design d'expérience utilisateurs

La recherche

Il est important de se sensibiliser sur le sujet de l'accessibilité et de le mettre en pratique le plus tôt possible. Plus cet aspect sera pris en compte en amont du projet, plus celui-ci respectera les normes d'accessibilité.

Quelques bonnes pratiques

  • S'informer sur les règles d'accessibilité et les outils utilisés
  • Sensibiliser les équipes sur le sujet : l'accessibilité est un travail d'équipe qui implique une complémentarité entre les designers et développeurs
  • Rester curieux et ouvert d'esprit, développer son empathie : être prêt à se remettre en question et tester ses hypothèses
  • Intégrer cet aspect le plus tôt possible dans la réflexion : plus tôt il sera pensé, mieux il sera intégré
  • Réaliser un audit de l'accessibilité avec les 106 critères RGAA
  • Tester auprès des utilisateurs avec un panel et des technologies variés
  • Essayer par soi-même les technologies : la navigation par clavier, les liseuses d'écrans, les sous-titres...
  • Impliquer les parties prenantes dans la recherche afin qu'elles puissent se confronter à la réalité et comprendre certaines contraintes
  • Utiliser des outils et checklists lors de la conception pour vérifier que l'on respecte aux mieux les critères
  • Rédiger ou partager un guide de recommandations pour les différentes personnes impliquées dans le projet

Les personas spectrum

Microsoft propose à travers les personas spectrum, une nouvelle façon de concevoir en ayant en tête des profils et conditions variés. Ils prennent en compte des handicaps permanents, temporaires ou situationnels mais aussi les différents contextes d'utilisation. Cet outil permet de voir à travers un plus large spectre.

handicap visuel temporaire ou permanent
personas spectrum
Personas spectrum de Microsoft revisités

Ergonomie et utilisabilité

navigation au clavier

La navigation

Soyez vigilant lors de la création de formulaire. C'est un effort cognitif important.

La navigation doit être intuitive et logique pour tous. Elle guide notre expérience à travers l'interface. Près d'un quart des français ne sont pas à l'aise avec le numérique (on appelle cela l'illectronisme).

Quelques astuces :

  • Utiliser un fil d'ariane avec les liens du plan de site.
  • Indiquer graphiquement l'état actif dans le menu et le fil d'ariane
  • Souligner les liens pour qu'ils soient reconnaissables
  • Supporter la navigation au clavier

Les formulaires

Restez vigilant lors de la création de formulaire. C'est un effort cognitif nécessaire pour l'utilisateur et une phase qui peut être stressante.

  • Demander uniquement les informations nécessaires
  • Préférer les captcha logiques comme une addition simple 2+4 = ? (les Captcha forts peuvent bloquer les lecteurs d’écran)
  • Utiliser des labels ou instructions avec des champs de données. Pour chacun, enrichir avec une légende ou des informations complémentaires pour assistance (tooltip).
  • Préciser s’il est de nature obligatoire ou optionnel.
  • Veiller à indiquer la limite de temps restant lorsque l’accomplissement d’un tâche en dépend (ex : votre billet de train est valide pour 10 minutes).

Design visuel

faible contraste

La perception

Nous avons tous une perception des images et des couleurs différente. De faibles contrastes ou un manque de lisibilité peuvent nuire à la compréhension des personnes ayant une déficience visuelle.

Textes et typographie

  • Les lettres doivent être clairement distinguables
  • Préférer les polices avec un contraste important notamment pour les petits caractères
  • Préférer les typos aérées et ouvertes
  • Préférer les typos conçues pour une lecture sur écran. Ou bien adaptées à la dyslexie par exemple. (Verdana ou Georgia plutôt que Arial et Times
  • ou des fontes conçues exprès : https://opendyslexic.org/)
  • Ne pas justifier le texte, ferrer à gauche plutôt que centré
  • Garder une longueur de ligne entre 45 à 80 caractères (espaces compris)
polices de caractères - à faire / à ne pas faire

Couleurs et contrastes

  • Utiliser des contrastes forts et les tester à l'aide d'outils : plugin Able pour Figma, chrome contrast analyser, colorable, material design contrast tool, mac os contrast app
  • Ne pas utiliser la couleur seule pour faire comprendre des informations cruciales (pensez au daltonisme)
faible contraste (à faire / ne pas faire)

Design de contenus

Médias

Images

On peut écrire un texte alternatif avec la balise alt ou bien la décrire à l'aide d'une légende afin que les lecteurs soient en capacité de la "lire".

<img src=”inouit-ideation.png” alt=4 personnes écrivent sur des post-it autour d’une table“>

4 personnes écrivent sur des post-it autour d’une table
Une légende qui décrit l’image sans indiquer “image de” ou “photo de”


Vidéos

  • Laisser la possibilité d'activer ou désactiver les son
  • Utiliser des sous-titres, transcripts et descriptions audio
  • Les iframes doivent avoir un titre

Charte éditoriale

Il va sans dire qu'une interface sans mots n'a plus de sens quelque soit la personne en face. Soigner son écriture c'est aussi prêter attention à être compréhensible auprès des usagers et contribuer à améliorer leurs expériences.

Quelques exemples :

  • Faire des phrases courtes et utiliser un vocabulaire simple (niveau 4ème)
  • Éviter les expressions ou le jargon, ou bien l'expliquer (à l'aide d'une tooltip par exemple)
  • Donner un titre aux tableaux et y ajouter un résumé pour les plus complexes.
  • Ne mettez pas un contenu important de manière invisible (seulement visible au scroll ou dans un collapse)
  • Mettre des titres explicites : préférez "étape 2" plutôt que "prochaine étape"

Développement

Niveaux de titres en html

Structure

Il est important de bien structurer les éléments et d'écrire le code HTML dans le bon ordre. Cela va aider les personnes aveugles à "écouter" une page et y naviguer.

Il ne faut pas utiliser les balises HTML pour leur style par défaut mais pour leur signification. Par exemple, un <h1> correspond à un titre et ne doit pas être utilisé pour écrire un élément de paragraphe en grand.

Les lecteurs d’écrans se basent que sur la structure du HTML et n'interprète pas le CSS.

organisation des styles CSS

Liens d'évitement

Certains liens sont seulement visibles avec la navigation par clavier. Ils apparaissent en appuyant sur la touche “tab”.

Ils permettent de faciliter la navigation par clavier en proposant des entrées plus directes au site.
On peut en faire un menu caché en ajoutant différents liens qui seront prioritaires à la lecture sur le reste du contenu. Par exemple : “Passer directement au contenu principal” ou “Aide sur l’accessibilité

Navigation

Il est important de soigner la navigation clavier en prêtant attention à l’ordre des tabulations, notamment en soignant la structure comme vu précédemment.

Les attributs ARIA complètent le HTML en terme d’accessibilité notamment les éléments n’ayant pas une sémantique forte (ex : <div>) et permettent ainsi aux lecteurs d’interpréter plus d’éléments.

Test

Il est important de tester la solution à l’aide d’outils ou encore mieux, auprès des usagers concernés. Vous pouvez également tester votre site en utilisant uniquement le clavier.
Outils : AXE / DevTools

Un travail d'équipe

un travail d'équipe, valides et non valides

Encore une fois, la collaboration et le partage de connaissance font partie intégrante des métiers du numérique. C'est en échangeant chaque jour des apprentissages et en mettant les différentes compétences en lien que l'accessibilité pourra devenir de plus en plus naturelle et évidente dans nos méthodes. Plus nous avons consciences des critères à respecter, plus nous arriverons à les intégrer par automatisme dans nos conceptions.

Sketchnoting : L'État centré usager - Des services pour toutes et tous accessibles et inclusifs, Design des services numériques

🗒 Le récap'…

  1. Un droit d'accès
    Des audits spécialisés pour évaluer le taux d'accessibilité des sites existent basé sur les 106 critères RGAA. De plus en plus de services ont pour obligation de respecter ces critères.
  2. Méthodologie UX
    Inclure le plus grand nombre le plus tôt possible dans la recherche et la réflexion.
  3. Ergonomie
    Soigner les parcours de façon à les rendre simples et cohérents.
  4. Design visuel
    Prêter attention aux contrastes et à la lisibilité.
  5. Design de contenus
    Utiliser les bons mots pour décrire les contenus y compris non visibles par défaut comme pour les médias.
  6. Développement
    Veiller à la bonne structure du code et tester le rendu.
  7. Un travail d'équipe
    Partager et échanger sur le sujet pour l'intégrer par réflexe dans nos procédés.

Pourquoi ?
Nous avons tous le droit d'accéder de la meilleure manière qu'il soit au numérique. Nous concevons nos interfaces pour des personnes afin de faciliter et rendre leur expérience agréable, essayons donc de penser au plus grand nombre. Le numérique peut être un outil qui facilite la vie des personnes en situations de handicaps. Ne rendons pas la tâche plus difficile.

Il s'agit là d'une introduction à l'accessibilité mais pour en apprendre plus, je vous invite vivement à consulter les ressources.

Ressources

Pres

Auteur: Jeanne Duplessis, UX/UI Designer

Écrit et illustré par

Jeanne Duplessis, UX/UI Designer