L'accessibilité, ça profite à tout le monde!

Publié le
Auteurs et autrices

Comment rendre le web accessible à toutes et tous? Dans cet article, je partage avec vous ce que j'ai retenu de la lecture de du livre "Accessibility for everyone", écrit par Laura Kalbag.

Laura Kalbag est la co-fondatrice de la "Small Technology Foundation", un organisme sans but lucratif qui a pour mission de développer et promouvoir des outils de tous les jours pour tout le monde, conçus pour améliorer le bien-être des personnes, et non les profits des entreprises.

Nous verrons ici ce qu'est l'accessibilité, pourquoi elle est importante et comment avancer pas à pas vers un web plus inclusif.

Table des matières

Accessibilité universelle

L'accessibilité universelle est un principe selon lequel rendre un service accessible aux personnes porteuses d'un handicap spécifique est bénéfique pour tous les utilisateurs et utilisatrices de ce service.

Par exemple, utiliser une taille de police de 16 pixels minimum est nécessaire pour les personnes qui ont de la difficulté à voir, mais rendra aussi le contenu plus facilement lisible pour tout le monde.

Il en va de même pour les contrastes : que l'on soit affecté·e par une déficience visuelle ou non, un contraste supérieur à 4,4:1 rend la lecture plus facile.

Aussi, une interface adaptée pour une utilisation au clavier bénéficiera aux personnes affectées par une déficience motrice, mais aussi aux aficionados des raccourcis claviers comme certain·es développeurs·euses.

Puis, un vocabulaire clair et accessible sera plus facilement compréhensible par les personnes présentant des troubles de la lecture tout en permettant de mieux présenter des services commerciaux et d'en augmenter les ventes.

Diversité dans les besoins d'accessibilité

Les besoins d'une personne ne sont pas les mêmes que ceux d'une autre, même porteuse d'un handicap similaire.

Par exemple, deux personnes non ou mal voyantes pourraient utiliser des outils de lecture d'écran différents, apportant chacun leurs spécificités techniques.

Pour s'assurer que le produit est accessible par toutes et tous, il est important d'inclure plusieurs personnes porteuses de handicap dans votre pannel de test.

Comme pour les tests d'UX auxquels on est habitués, il faut absolument éviter de penser que l'on sait ce qui est le mieux pour les autres. On court alors on risque important de proposer une solution paternaliste et incorrecte.

Des situations de handicap variées

Quand on pense accessibilité du web, on pense souvent aux personnes mal ou non voyantes pour lesquelles on prend soin de remplir le paramètre alt des images.

En réalité, il existe une multitude de handicaps plus ou moins visibles qui peuvent rendre l'accès à l'information compliqué ou impossible pour ces personnes auxquelles on ne pense pas.

On estime qu'il y a cinq catégories de troubles affectant l'utilisation d'un ordinateur :

Troubles de la vue

Il s'agit des troubles les plus fréquents. Près d'un tiers de la population mondiale souffre de troubles de la vue. Parmi ces troubles se retrouvent le daltonisme (impossibilité de voir certaines couleurs) ou la diminution, voire perte totale de la vision.

Pour ces personnes, accéder à l'information écrite est souvent complexe. Si les contrastes d'un texte ne sont pas suffisants, il se pourrait qu'elles ne puissent pas le lire. Si les seuls indicateurs d'erreur ou de succès se basent sur la couleur du texte, les personnes atteintes de daltonisme pourraient ne pas les comprendre.

Troubles de l'audition

Près d'un cinquième de la population mondiale souffre de troubles de l'audition. Cela veut dire que si votre contenu est accessible uniquement sous forme audio, il leur sera impossible de le consulter.

Troubles moteurs

Il existe une multitude de troubles moteurs qui peuvent rendre impossible l'utilisation des périphériques d'entrée habituels comme le clavier et la souris. Certaines personnes utilisent des systèmes comme la reconnaissance vocale ou le suivi du regard. Une page web mal structurée pourrait rendre la navigation impossible pour une personne n'utilisant pas de souris.

Troubles cognitifs

Tout comme les troubles moteurs, il existe un grand nombre de troubles cognitifs qui rendent la navigation sur le web complexe : mémoire, attention, assimilation de l'information, résolution de problèmes, dyslexie.

Un système de captcha, par exemple, peut rendre l'inscription impossible pour une personne qui aurait du mal à assimiler les symboles visuels.

Une police d'écriture mal choisie, quant à elle, rendra l'accès à l'information compliqué pour une personne dyslexique.

Une personne souffrant de troubles de l'attention peut rapidement se retrouver perdue sur un site dont la structure n'est pas claire.

Troubles vestibulaires

19% des personnes dans la quarantaine souffrent de troubles vestibulaires. Le système vestibulaire est responsable de la stabilisation de la vue et de l'équilibre.

Sur le web, ces troubles se manifestent souvent par une sensibilité au mouvement. Les animations, parallaxe et effets de défilement non-conventionnels peuvent causer des maux de têtes, étourdissement et nausées qui durent parfois longtemps après la fin de l'exposition au facteur déclenchant.

Situations temporaires de handicap

Une situation de handicap n'est pas toujours permanente. Tout le monde risque de se retrouver un jour en situation de handicap temporaire.

Que ça soit avec une main dans le plâtre ou avec des troubles cognitifs suite à une commotion, utiliser un ordinateur peut tout-à-coup devenir une épreuve.

Niveau de langage

L'accès à l'information sera rendu plus complexe par un niveau de langage élevé. Simplifier votre langage permettra à plus de personnes de profiter de votre contenu. De nombreuses personnes n'ont pas eu la chance de recevoir une éducation leur permettant de comprendre aisément tous les textes. Surtout s'il ne s'agit pas de leur langue maternelle.

Un langage clair, structuré et accessible augmentera la portée de votre contenu.

Biais du survivant

Se baser sur les statistiques d'utilisation de votre application peut être trompeur. En effet, seules les personnes qui auront pu surmonter les différentes épreuves pour arriver jusqu'à votre contenu apparaîtront dans ces statistiques. Toutes celles qui auront été bloquées par le manque d'accessibilité ne seront pas représentées.

Par exemple, vous pourriez voir que votre site web est utilisé à 90% sur ordinateur et utiliser cette information pour prioriser les développements pour cette plateforme aux dépens du mobile, alors qu'en réalité, beaucoup plus de personnes essaient d'accéder à votre site depuis un cellulaire, mais que son affichage dans ce format rend le contenu illisible et fait que ces personnes ne reviennent pas.

Intégrer la réflexion sur l'accessibilité dès le début

L'accessibilité, ce n'est pas juste du code à ajouter ou modifier à la fin du projet.

Les responsables de la communication et du marketing ont pour mission de choisir un vocabulaire clair et accessible.

Comme je l'écrivais plus haut, l'analyse d'UX doit tenir compte des différentes situations de handicap dans la composition du panel de test.

Les gestionnaires de projets doivent également être impliqué·es, afin de tenir compte de ces impératifs dans la planification du projet.

Les gestionnaires de produits ont bien entendu un rôle à jouer, lors de la définition des besoins adressés à l'équipe de développement.

Et enfin, les développeurs et développeuses ont la responsabilité d'implémenter les aspects techniques de l'accessibilité.

Déplacer la responsabilité des utilisateurs et utilisatrices vers l'équipe de conception

Ce n'est pas à la personne qui utilise votre service qu'appartient la responsabilité de formater des données que vous souhaitez enregistrer en base de données.

Par exemple, les messages du type "Entrez votre numéro de téléphone sans tirets" devraient être remplacés par un retrait automatique de ces caractères dans le champ.

Il en va de même pour les espaces en fin et début de champ. Il est aisé d'automatiser leur suppression, au lieu de complexifier la tache de la personne qui doit entrer ses informations.

HTML Sémantique

De nos jours, grâce à la puissance du CSS, il est possible de développer un site web en utilisant presque uniquement des balises <div>. Certains outils de création de sites Web comme Webflow génèrent d'ailleurs des sites ou le texte des paragraphes se retrouve dans des balises <div> au lieu de <p>.

Visuellement, si on n'est pas sensibilisé aux notions d'accessibilité, on pourrait penser que cela suffit. Les paragraphes ont l'air de paragraphes et le menu est à sa place en haut de l'écran. Du moins, sur l'écran du développeur.

Cependant, si on accède à la page depuis un lecteur d'écran, on entend une série de mots sans lien apparent, lus les uns à la suite des autres. L'application en charge de restituer le contenu oralement n'a aucun moyen de faire la différence entre le menu et le contenu.

Pour éviter cela, le langage HTML met à disposition une série de balises spécifiques pour chaque usage comme par exemple <button> pour les boutons, <navigation> pour les menus et <article> pour indiquer qu'il s'agit du contenu principal.

Non seulement l'utilisation de ces balises rendra votre site web plus accessible, mais en plus, vous bénéficierez des fonctionnalités incluses dans le langage comme le fait d'afficher ou masquer les détails inclus dans la balise <details>

Par où commencer pour rendre mon site web accessible?

Ou "Fil d'Ariane" en français. Il s'agit d'une indication du chemin parcouru pour arriver là où vous vous trouvez.

Par exemple : "Activités > Hiver > Extérieur" pourrait être affiché sur la page qui contient les heures d'ouverture des pistes de ski d'un domaine ouvert toute l'année.

En plus de permettre aux personnes visitant votre site de retrouver plus facilement leur chemin, ceci est excellent pour le SEO.

Indicateurs visuels

Ne pas se baser uniquement sur la couleur ou des symboles pour indiquer un état, mais plutôt combiner les deux et, idéalement, afficher l'information en toutes lettres.

Par exemple : au lieu de changer simplement la couleur d'un élément vers le vert pour indiquer la réussite d'une opération, ajouter un symbole ✓ et écrire "Succès" rendra cette information accessible à la fois aux personnes atteintes de dyslexie et de difficultés à assimiler les symboles.

Choisir des textes de liens descriptifs

Éviter absolument les textes du type "cliquez ici" car la personne utilisant un lecteur d'écran n'aura pas l'information nécessaire pour savoir vers où le lien propose de la rediriger.

Par exemple, au lieu de "Pour en savoir plus sur nos activités, cliquer ici", préférer "En savoir plus sur nos activités".

Respecter des contrastes supérieurs à 4,4:1

De nombreux outils sur le web permettent de vérifier le contraste entre deux couleurs. Cette valeur est exprimée sous forme de ratio. Plus le ratio est élevé, plus le contraste est important et plus le texte est facilement lisible. Cela vaut pour les personnes déficientes visuellement mais aussi pour la lecture en plein soleil.

Par exemple, sur fond blanc, préférez écrire en violet (#CC21CC) pour un ratio de 4.5:1 plutôt qu'en rouge (#FF0000) qui aura un ratio de 4:1 est en dessous du minimum recommandé pour la lecture.

Utiliser l'unité rem pour la taille de votre police

L'unité rem est définie relativement à l'unité de base configurée dans le navigateur. Généralement, ceci correspond à 16px. En utilisant cette unité, vous respectez les préférences de la personne qui navigue sur votre page. En configurant son navigateur, toutes les pages sont adaptées à son niveau de confort.

Attention à ne jamais utiliser de taille inférieure à 1rem, ceci annulerait tout l'intérêt de cette unité.

Par exemple : définissez la taille du texte par défaut du site à 1rem puis utilisez des valeurs supérieures comme 2.5rem pour les titres de niveau <h1>

Se méfier des émojis

De prime abord, les émojis sont un moyen facile de faire passer des émotions dans un message ou d'égayer un texte. Cependant, ceux-ci comprennent deux risques.

Le premier étant de transformer le texte en rébus pour un lecteur d'écran. "Main joints, homme qui sourit, coeur, pouce vers le haut".

Ensuite, certains émojis sont régulièrement détournés de leur sens initial à cause de leur ressemblance visuelle avec une chose que l'on cherche à exprimer. Le lecteur d'écran lira celui-ci au premier degré.

Continuer à vous informer sur le sujet

Vous avez lu mon article jusqu'ici et avez peut-être appris certaines choses.

Néanmoins, je suis loin d'être un expert et je ne fais que gratter la surface d'un sujet aussi vaste qu'important.

En fin d'article, je place une série de ressources pour continuer votre apprentissage. Si vous en connaissez d'autres, n'hésitez pas à les partager avec moi en commentaire ou par courriel. Je mettrai la liste à jour avec vos recommandations.

En parler autour de vous

Abordez le sujet au travail, sur vos réseaux, avec les personnes responsables des sites que vous visitez.

Partagez cet article ou ses références autour de vous.

Plus le sujet est abordé régulièrement, plus il deviendra commun de se soucier de l'accessibilité.

Conclusion

La lecture de ce livre a changé ma façon de voir le web à plusieurs niveaux.

D'abord, c'est une profonde remise en question de la façon dont je code des sites et des applications pour le web qui m'a été imposée. Je lisais le livre pendant que je codais ce blog et plusieurs choix sont le résultat direct de ces apprentissages. Par exemple, la police Lexie Readable employée ici est une police développée spécifiquement pour faciliter la lecture aux personnes atteintes de dyslexie.

Ensuite, je suis devenu plus attentif aux détails partout sur le web. Je faisais déjà attention aux contrastes mais, maintenant, j'analyse des éléments comme la police, l'espace entre les lignes, la présence d'animations. Souvent, je ressens de la colère envers les personnes responsables de sites clairement pas accessibles. Surtout lorsqu'il s'agit d'entreprises.

Puis je me rappelle qu'il y a quelques mois, moi aussi, je commettais ces erreurs par ignorance. Et j'en commets encore beaucoup. C'est une raison pour lesquelles j'ai voulu écrire cet article. Parce que plus on en parle, plus ce sujet à de chances de devenir normal au lieu d'anecdotique. Je souhaite que le sujet de l'accessibilité sur le web obtienne la place qu'il mérite, car l'accessibilité, ça profite à tout le monde.

L'accessibilité, ce ne sont pas des étapes supplémentaires, ce sont les étapes que vous avez ratées

Références

Pour aller plus loin

  • Le blog de Stark : blog de l'entreprise Stark qui développe des outils aidant à la création de design accessibles. (en anglais)
  • TwitterA11y : Le compte Twitter de l'équipe en charge de l'accesibilité sur ce réseau. (en anglais)
  • HTML: une bonne base pour l'accessibilité : site de Mozilla sur l'HTML et l'accessibilité (en français)
  • We are Colorblind : site qui reprend toute une série de références et témoignages à propos du daltonisme (en anglais)

Outils utiles

  • Wave toolbar Extension Chrome et Firefox qui analyse l'accessibilité d'une page directement depuis le navigateur.
  • WCAG Color Checker : extension Chrome et Firefox permettant de vérifier les contrastes de tous les éléments de la page suivant les normes AA et AAA des WCAG (Web Content Accessibility Guidelines)