Astuces d'intégrateur pour webdesigners

Billet rédigé à partir de la conférence de Véronique Lapierre

Pourquoi s’occuper d’accessibilité ? Elle ne concerne pas que les personnes handicapées pour qui elle est indispensable mais elle peut concerner tous les utilisateurs à qui elle sera utile. À titre d’exemple, 6 à 8% souffrent de troubles cognitifs. De plus, en France et dans tout l’Occident, on a une population vieillissante. Il ne s’agit surtout pas de corriger en rajoutant des couches d’accessibilité mais il faut bien davantage concevoir tout de suite les choses de manière accessible.

Couleurs

Le contraste —> How the web became unreadable par Kevin Marks Le ratio préférable est 3:1 dès 24px et 4.5:1 pour en-dessous. Des outils peuvent s’en charger comme color contrast checker sur WebAIM et pour les images on peut se référer à text on background image sur a11y.

Il faut se rappeler que vert et rouge ne suffisent pas pour indiquer une chose correcte ou incorrecte. En particulier lorsqu’on parle d’erreurs, il faut ajouter du texte pour spécifier le problème – cela fera double effet tout en étant plus précis car on remarquera mieux un texte en rouge qu’une bête ligne rouge.

Textes

Il faut une taille de texte suffisante : 16-18px sont à la mode et c’est tant mieux. Certains utilisateurs augmentent jusqu’à 200% leur page, il faut donc tester sur navigateur (pas sur Photoshop…) les polices tip-top-chouettes téléchargées mais qui bavent en 32px.

Il faut également soigner les libellés, surtout s’ils sont répétés sur une même page ou sur tout le site. Quarante « En savoir + » sur une page ne sont le signe de rien de particulier, ils sont bien trop nombreux pour être significatifs.

C’est un gros morceau mais un bon début est de commencer par afficher le focus clavier (les petits rectangles voire les éléments surlignés permettant de repérer où l’on est).

Les zones réactives

Les zones réactives sont les boutons, zones à cocher, etc. Sur mobile c’est une évidence car c’est une nécessité mais il faut également penser à ceux qui ont du mal à être précis avec une souris. Pour ce faire on agrandit les éléments tout en préservant les espaces - 26pt/2.2em d’espacement en règle général.

Les carrousels et trucs qui bougent

Prévoir des boutons play/pause pour les slideshows à défilement automatique. Les carroussels qui sont hors de contrôle c’est comme ceux de la vraie vie : à la fin l’estomac rend l’âme.

Bibliowebographie

Notices AcceDe Web (société Atalan) notamment notice d’accessibilité pour la conception fonctionnelle et graphique et l’écosystème Opquast qui propose des check-lists et en version papier “Qualité Web”.