Ravi de te voir Explorons de nouveaux savoirs

Mission accessible, une introduction


22 Novembre 2022 | 15 mins Maria Eugenia Trapani et Florian Verneuil

Le Web et les outils numériques sont présents dans toutes les sphères du quotidien, de l’achat de produits de première nécessité à la recherche d’emploi et aux démarches administratives. Ils nous concernent toutes et tous et doivent donc être accessibles qu’importe la situation et nos capacités sensorielles, motrices ou cognitives.

Cet article est une introduction au sujet de l’accessibilité, son approche en tant que diversité des situations d’usage et son application dans la conception de produits numériques.

Qu’est-ce que l’accessibilité ?

L’accessibilité c’est la promesse de rendre compréhensible, utilisable et agréable le web pour toutes et tous, qu’importe les capacités de la personne qui l’utilise, son âge, son lieu de résidence ou son contexte d’usage.

La notion d’usages est au cœur de l’idée d’accessibilité. Opposé à l’idée d’un design par défaut qui conviendrait supposément à tous, un design accessible prend en compte les différents contextes d’usage possibles. En effet, notre expérience numérique peut être amenée à changer dans une même journée ou plus largement dans notre vie. Ainsi, une application peut devenir difficile d’utilisation en situation de handicap permanent, temporaire, mais aussi situationnel : lorsqu’on doit garder un bébé dans les bras, lorsque l’écran est exposé à une forte lumière ou lorsque l’on se retrouve dans un lieu faiblement connecté à internet. Il est donc important de penser aux différents contextes d’usage d’un site ou d’une application.

Concevoir un outil accessible c’est donc penser un outil pour les utilisatrices et utilisateurs tels qu’ils sont réellement, dans leur diversité (voir les travaux d’accessibilité de Google et de Microsoft pour en savoir plus).

Exemple de situation d’handicap permanent, temporaire et situationnel
Source Accessibility Guidelines de Avinash Kaur

Pourquoi faire de l’accessibilité ?

Intégrer une démarche d’accessibilité à votre produit est bénéfique pour vos utilisateurs et pour votre business.

Tout d’abord, concevoir une expérience utilisateur accessible est bénéfique pour l’ensemble de vos utilisateurs. Par exemple, alors que le sous-titrage de messages peut servir pour les individus avec une déficience auditive, cela permet aussi de faire passer un message dans une situation bruyante (voir illustration ci-dessous). Ainsi, la démarche d’accessibilité permet d’inclure les individus atteints d’un handicap permanent, qui représentent près d’1 adulte français sur 7, mais aussi d’offrir une expérience plus adaptée à l’ensemble de vos utilisateurs.

Exemple de situation d’handicap permanent, temporaire et situationnel
Source Accessibility Guidelines de Avinash Kaur

Enfin, concevoir votre produit dans une démarche d’accessibilité est aussi bénéfique pour votre business. Parmi d’autres bénéfices pour votre entreprise, un produit “accessible” est un produit qui :

  • Atteint une audience plus grande ;
  • Est plus utilisable ;
  • Est moins coûteux à maintenir ;
  • Apparaît davantage dans les moteurs de recherche.

Bénéfique pour vos utilisateurs et votre business, il n’y a plus qu’à se lancer ! Mais par où commencer…

Les principes POUR selon WCAG

Le célèbre W3C a conçu les Web Content Accessibility Guidelines (WCAG pour référence) afin d’établir des moyens pour que le contenu web soit accessible aux personnes ayant différents handicaps. Ces directives ont été largement acceptées dans le monde entier. C’est un point très important qui peut même avoir des conséquences juridiques dans des pays dans lesquels l’accessibilité web est requise par la loi.

Les critères WCAG ont été déterminés dans quatre grands domaines : Perceivable, Operable, Understandable et Robust sous l’acronyme POUR. Mais qu’est-ce que cela signifie ? Heureusement, la réponse est assez simple.

  • Tous les critères qui correspondent à la catégorie Perceivable (perceptible) sont liés à l’accès à l’information. Cela signifie que chaque information sur l’application doit être perceptible par l’utilisateur en utilisant “un ou plusieurs de ses sens” (MDN documentation).
  • Le principe Operable (opérable) décrit les directives de navigation dans l’application et dans les composants d’interface. Par exemple, cela inclut la navigation par clavier, voix, écran tactile ou même les appareils par mouvement, entre autres.
  • Aussi clair que cela puisse paraître, le principe Understandable (compréhensible) se concentre sur le fait que l’interface est, disons, compréhensible par les utilisateurs.
  • Enfin et surtout, le principe Robust (robuste) fournit une ligne directrice sur la construction de contenu qui peut être interprété par autant d’agents utilisateurs que possible, même les agents de technologie d’assistance tels que les lecteurs d’écran.

Ces quatre principes ont été classés en trois niveaux de conformité : A, AA et AAA, le dernier étant le plus performant en matière d’accessibilité. Un site web ne peut accomplir l’un de ces niveaux que s’il a atteint tous les critères : cela signifie que les niveaux ne peuvent pas être partiellement atteints.

Comment est faite l’évaluation A, AA et AAA ?

L’accessibilité Web peut être délicate pour les concepteurs, les développeurs et même les gestionnaires. Ainsi, la W3C a organisé trois niveaux d’accompagnement en matière d’accessibilité pour organiser et classer les applications Web. D’autre part, chaque niveau ajoute une nouvelle couche de complexité qui doit être soigneusement élaborée.

Cela dit, les critères pour atteindre le niveau A s’additionnent à ceux du niveau AA, et il en va de même pour atteindre une conformité AAA. Même si dans cet article on n’inclut pas une explication exhaustive de chaque critère de chaque niveau, n’hésitez pas à lire la documentation existante soit sur la page WCAG ou même MDN. Voyons quelques exemples suivant les principes POUR.

- Niveau A, que l’accessibilité commence

Le premier niveau est le plus simple où les choix de conception, tels que le contraste des couleurs, ne sont pas fortement impliqués. Il comporte 30 critères et son objectif est que la plupart des utilisateurs soient capables d’utiliser un site avec succès.

Pour être Perceivable (perceptible), tout contenu non textuel, comme les images ou le son entre autres, doit avoir un équivalent textuel. Il s’agit d’un exemple très simple qui est très facile à mettre en place. Dans le cas d’images, cela peut être facilement réalisé en utilisant l’attribut HTML alt :

<img src="cat.png" alt="Chat : un petit mammifère à quatre pattes très populaire comme animal de compagnie" />

On peut aussi utiliser l’attribut HTML aria-labelledby, qui permet de faire correspondre un ou plusieurs éléments avec une description par un identifiant.

<img src="cat.png" aria-labelledby="catto-label" />
 
<p id="catto-label">Chat : un petit mammifère à quatre pattes très populaire comme animal de compagnie"</p>

Il est important de comprendre que ces descriptions doivent être objectives et concises, une vraie description de l’image utilisée. Si l’image est purement décorative, il est préférable de laisser ces informations vides afin que les lecteurs d’écran puissent simplement les ignorer. Dans le cas de vidéos, par exemple, il est indispensable de fournir des sous-titres ou une transcription. Ce n’est qu’un début. Vous pouvez en savoir plus sur les textes alternatifs dans ce lien.

De plus, une hiérarchie claire dans la structure du site est nécessaire jusqu’au niveau de conformité A. C’est l’un des nombreux cas où le code et l’UX se chevauchent nécessairement. Voici un exemple de mise en page de site Web prototype :

HTML structuré de manière sémantique et prévisible en utilisant les éléments tels que Menu, en-tête, titre, sous-titre, article, image, etc.
Image de How to structure your HTML properly for Web Accessibility

Afin de respecter les critères d’accessibilité, la mise en page doit suivre un balisage sémantique. Oui, <h1> sera le premier et le plus pertinent en tête, et honnêtement, nous ne voyons aucune raison d’en avoir plus d’un dans la même page. Les données tabulaires doivent être affichées à l’aide de la balise <table> et chaque élément <input> doit être lié à une étiquette. C’est le moment de se débarrasser de la maladie <div> et d’accueillir <fieldset> et <legend> dans votre code.

C’est une excellente occasion de mentionner que les couleurs qui fournissent des informations à l’utilisateur ne doivent jamais être la seule source d’information. Oui ! Les icônes lors d’une erreur et aussi les éléments qui indiquent l’état d’un élément sont essentiels. Cela peut sembler un point assez simple, mais la vérité est qu’en tant que développeur front-end, j’ai vu ce code appliqué à plusieurs reprises. La pseudo-classe CSS “:focus” indique qu’un élément a reçu le focus en cliquant ou en sélectionnant à l’aide de la touche de tab. Il vaut mieux ne pas oublier l’état “focus” d’un élément, afin d’éviter que les développeurs écrivent cette ligne de code :

:focus {
   outline: none;
}

Si nous ne fournissons qu’un changement dans l’interface lors du focus sur un élément (ex : un bouton, un input), il est probable qu’un utilisateur malvoyant n’aura pas accès à cette information. C’est pourquoi l’outline ne doit jamais être enlevé, à moins qu’un autre élément ne fournisse cette information. Il peut être vrai que le focus par défaut sur les navigateurs n’est généralement pas très attrayant, mais consultez cette page pour voir comment le personnaliser. À vous de jouer !

See the Pen outline-style by Mojtaba Seyedi (@seyedi) on CodePen.

- Niveau AA, le challenge

La catégorie AA ajoute 20 critères à ceux déjà inclus dans le niveau A. Honnêtement, peu de sites respectent un niveau AA… mais cela ne veut pas dire qu’il faut renoncer aux questions d’accessibilité !

Suivant le principe d’opérabilité (Operable), ce niveau propose d’avoir plusieurs façons de naviguer sur un site web. Par exemple, ajouter un champ de recherche et des liens entre les pages offre une navigation moins rigide. Outre ce point, la relation sémantique entre les en-têtes et les étiquettes est également pertinente pour une conformité AA. Compte tenu des recherches sur la façon dont les utilisateurs lisent sur le web, des messages clairs et concis sont une clé de l’accessibilité. Imaginez un formulaire où l’étiquette ne dit que “nom et nom de famille” mais il y a deux entrées disponibles… laquelle est le nom et laquelle est le nom de famille si elle n’est pas clairement indiquée à chaque côté de chaque entrée ?

Pour le principe de compréhensibilité (Understandable), ce niveau se concentre également sur la disponibilité de la langue de l’utilisateur et les éventuelles variations qui pourraient apparaître. Par exemple, si un mot étranger se trouve dans le contenu de la page, les informations traduites doivent être fournies sur la page. Même un sélecteur de langue est pertinent pour cette catégorie.

- Niveau AAA, le véritable engagement

Le niveau AAA, avec 28 critères de plus que le niveau précédent, est très restrictif et n’est atteint que sur des sites hautement spécialisés. Du point de vue de la perception (Perceivable), il permet une très petite gamme de nuances de couleurs avec un contraste très élevé, les options de conception sont donc assez limitées.

Une dynamique parfaitement compréhensible et flexible est nécessaire pour se conformer à ce niveau. Le point unique en opérabilité (Operable) indique que l’application peut être entièrement naviguée au clavier sans exception, mais il existe de nombreuses spécifications autour de la section Compréhensible (Understandable) pour gérer, par exemple, la soumission de données dans un formulaire : il doit être modifiable , appliquer une vérification lors de l’achèvement de la saisie afin de fournir la possibilité de corriger les erreurs et également d’afficher une confirmation avant la soumission.

Vers quel niveau viser ?

Tout d’abord, le fait que tous les critères doivent être réunis pour atteindre un niveau ne doit décourager aucun produit web. Les efforts doivent être mesurés en fonction du public cible et du type de site Web. Parfois, il y aura des lois qui peuvent pénaliser l’institution ou l’entreprise si elles ne sont pas respectées. Parfois, les frontières sont moins définies et la rigueur est plus lâche.

D’autre part, de nombreux critères d’accessibilité ne font que suivre les bonnes pratiques. Cela rend notre code plus propre et plus performant. Cela rend notre conception plus claire et améliore notre UX. Ensuite, et probablement le plus important de tout, un Web plus accessible rend l’Internet plus démocratique et plus juste. Alors pourquoi minimiser l’effort ?

Comment évaluer son produit ?

Une fois les principes appliqués se pose la question de l’évaluation. Est-ce que votre produit est effectivement davantage accessible pour les contextes d’usages que vous envisagiez ?

Illustration of a guidelines book

Outils d’audit

Il existe de nombreux outils qui peuvent être utiles pour évaluer le niveau d’accessibilité de votre produit. Parmi eux, nous pouvons citer les outils suivants qui permettent d’évaluer :

Cette liste ne représente qu’une petite partie de l’ensemble des outils d’audit d’accessibilité existants, vous pouvez retrouver une liste plus détaillée d’outils recommandés par le W3C via ce lien.

Tests manuels

Il est intéressant d’essayer d’utiliser votre propre produit à l’aide d’outils d’assistance technologique, un lecteur d’écran ou des options d’agrandissement d’écran par exemple. Ces tests ne remplacent pas les tests utilisateurs mais vous permettent de faire une première estimation de votre travail d’accessibilité et d’affiner votre travail en vue des tests utilisateurs.

Tests utilisateurs

Enfin, il est intéressant d’adopter une démarche d’accessibilité pour vos tests utilisateurs.

Cette démarche passe par le recrutement de personnes atteintes de handicap en cohérence avec la population et les contextes cibles de votre produit ou encore la prise en compte des différents contextes d’usages réels dans vos protocoles de test, par exemple tester le produit avec une connexion internet instable ou avec une lumière extérieure éclairant le téléphone.

Ces tests utilisateurs vous permettront de :

  • évaluer l’utilisation de votre produit en condition plus écologique ;
  • évaluer le niveau d’accessibilité de votre produit pour les populations et contextes visés ;
  • montrer les problématiques d’accessibilité réelles de votre produit à l’ensemble de votre équipe afin de les sensibiliser et les engager sur le sujet.

Pour plus d’informations, Pernice et Nielsen ont rédigé un rapport détaillé sur les tests utilisateur d’accessibilité qui regroupe un ensemble très riche de conseils et de méthodes pour la mise en place de ces tests.

L’accessibilité en deux mots

Pour récapituler, nous avons vu que :

  • l’accessibilité est la promesse d’un outil utilisable par toutes et tous ;
  • non seulement bénéfique pour vos utilisateurs, la démarche est aussi bénéfique pour votre entreprise ;
  • il existe un ensemble de principes pour travailler l’accessibilité de vos produits ;
  • il existe un ensemble d’outils et méthodes pour évaluer le niveau d’accessibilité de votre produit et engager votre équipe sur le sujet.

Le chemin déblayé, il ne reste plus qu’à se demander : on commence quand ?

Woman in a wheelchair using a computer

Ressources

Auteur(s)

Maria Eugenia Trapani

Dev Front-End & SEO enthousiast

Florian Verneuil

UX Designer : Grande passion pour la recherche utilisateur !

Utilisation hors-ligne disponible