L’accessibilité numérique

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 ?

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

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

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.

Ergonomie et utilisabilité

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

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)

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)

Design de contenus

Médias

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

Structure

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

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.

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

Ressources

Pres