L’ensemble des spécifications liées à l’accessibilité est disponible ici : Web Content Accessibility Guidelines.


Dans ce billet, nous nous concentrerons sur l’accessibilité du texte, les enjeux et quelques outils pour nous faciliter la tâche.

Aspect du texte

Taille

Il est recommandé de ne pas descendre sous la limite des 12pt pour la taille des textes principaux. Dans tous les cas, on ne doit pas descendre sous la barre des 9pt, même pour les notes de bas de page.

De plus, on doit pouvoir zoomer à 200% sans perte de fonctionnalité et de contenu.

Cas particulier : la font-size des input doivent être d’au moins 16px si on veut garder un niveau de zoom sous contrôle. En dessous, Safari mobile va forcer un zoom au focus.

Couleur

Le daltonisme et l’âge sont deux facteurs qui dégradent la perception des couleurs.

Si avoir recours aux couleurs pour des questions purement esthétiques ne pose pas de soucis, on doit veiller à ne pas se reposer sur les couleurs pour transmettre de l’information. Voici quelques exemples qui pourraient poser problème à une partie des utilisateur·rice·s :

  • Pastille d’état de couleur sans icône et/ou texte pour doubler l’information
  • Toggle switch sans indicateur de l’état actuel en dehors de la couleur
Exemple de toggle switch non accessible et solution proposée
Exemple de toggle switch non accessible et solution proposée
  • Liens hypertextes : le bleu est la couleur dont la perception se dégrade le plus pour les personnes âgées. Et pourtant, les liens sont le plus souvent distinguables du reste du texte uniquement par leur couleur bleue. On peut combiner un autre aspect différenciant pour une meilleure accessibilité, avec un souligné par exemple. On veille alors à garder cette convention de manière globale.
  • Graphiques : pour que les graphiques soient plus accessibles, on veille à utiliser des textures en plus de la couleur pour différencier les différentes courbes ou bâtons.
Exemple de graphique non accessible et solution proposée
Exemple de graphique non accessible et solution proposée

Le texte et le temps

Après ce petit tour d’horizon de la partie visuelle du texte, il est important de rappeler qu’une partie des utilisateur·rice·s emploient des lecteurs d’écran. On ne peut pas prévoir comment cet outil est utilisé par chaque personne, et donc quelle partie de l’écran est traitée en premier, et dans quel ordre. Ainsi, on ne doit pas avoir recours à des apparitions et disparitions automatiques de texte avec un timeout.

Notamment, dans l’idéal, un message d’information (bandeau d’erreur en bas de page par exemple) ne doit pas disparaître automatiquement. Plusieurs alternatives sont possibles :

  • Proposer un bouton pour masquer ce message au moment où l’utilisateur·rice le décide. Le message ne disparaît plus automatiquement pour personne.
  • Proposer un mode “pause” pour le site/application dans son ensemble, qui pourra être activé par les utilisateur·rice·s ayant besoin de garder les informations affichées sans limite de temps.

Outils utiles

  • Pour voir un site du point de vue d’une personne daltonienne, Firefox et Google Chrome (canary) proposent dans l’onglet “Accessibilité” des outils de développements des simulateurs pour les différents types de daltonisme.
Différentes variations des Tournesols de Vincent van Gogh, simulées avec l'onglet accessibilité de Firefox
Différentes variations des Tournesols de Vincent van Gogh, simulées avec l'onglet accessibilité de Firefox

Quelques chiffres sur pourquoi il n’est pas possible de faire l’impasse sur ce sujet

  • Daltonisme : en France, 8% des hommes et 0,5% des femmes en sont atteints (source)
  • Myopie, presbytie, astigmatisme : 3 adultes sur 4 présentent des troubles visuels. Cela monte à 96% pour les plus de 50 ans (source)
  • Âge : 10,5 millions des internautes français ont plus de 50 ans (source PDF)

En bref

Avec tous ces chiffres, on ne peut plus contourner la question de l’accessibilité. Ces problématiques doivent être prises en compte dès la phase de conception, au risque de devoir trouver des solutions bancales si abordé plus tard dans le développement. Et si vous n’avez pas la main sur la phase de conception, montrer les statistiques devrait réveiller les plus endormis sur le sujet.


Merci de nous avoir lu ! Vous pouvez nous contacter sur le Twitter ou sur le LinkedIn de l’entreprise. Bonne journée ! :)

Merci de votre lecture ! <3
Merci de votre lecture ! <3

Mis à jour :