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.
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).
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.
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 :
Bénéfique pour vos utilisateurs et votre business, il n’y a plus qu’à se lancer ! Mais par où commencer…
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.
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.
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.
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 :
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 !
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.
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.
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 ?
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 ?
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.
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.
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 :
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.
Pour récapituler, nous avons vu que :
Le chemin déblayé, il ne reste plus qu’à se demander : on commence quand ?
Auteur(s)
Maria Eugenia Trapani
Dev Front-End & SEO enthousiast
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
Avec une reprise progressive des conférences dev depuis la crise COVID, le React Day Berlin a eu lieu cette année le 2 et 5 décembre en modalité mixte. J’y suis allée pour la première fois, et je vous propose dans cet article mon expérience complète !
Rédiger un texte n’est pas une activité neutre, vos textes ont un impact sur l’expérience utilisateur (UX) de votre produit. L’UX Writing est une spécialité de l'UX Design qui a pour objet la conception de la communication entre les utilisateurs et votre produit et, donc, la création de vos contenus rédactionnels. Au cours de cet article, nous reviendrons sur la définition et l'intérêt de l’UX Writing, mais aussi sur sa méthodologie. Pour finir, nous verrons différents conseils pratiques pour la conception de vos contenus rédactionnels. Prêt•e•s ? Alors, allons-y !