Les 10-11-12 avril dernier, j’ai assisté au Web à Québec, Le plus grand événement numérique francophone en Amérique du Nord.

J’ai eu la chance d’assister à la conférence de Hugues Tennier, développeur front-end chez Shopify, qui nous a parlé d’accessibilité Web. Je vais donc m’adresser dans les prochains paragraphes aux développeurs et aux concepteurs Web afin qu’on crève l’abcès. Oui, l’accessibilité, c’est lourd à mettre en œuvre. Mais j’aimerais vous partager aujourd’hui 4 petits trucs proposés par Hugues afin de relever d’un cran l’accessibilité de vos produits Web.

1 – Utilisez un bon contraste de couleur

Avoir un environnement accueillant pour les personnes qui vivent avec un handicap visuel n’est pas seulement s’assurer que les non-voyants puissent utiliser un logiciel Text to speech. C’est aussi s’assurer que le contraste entre la couleur du texte et la couleur d’arrière-plan soit maximisé, au détriment de ces jolies couleurs pastel que votre designer graphique aime tant.

Un contraste respectable est de 4.5 :1. Mais maintenant, nul besoin d’outils de calcul obscurs; le navigateur Chrome offre désormais un outil de mesure du contraste dans le navigateur, qui vous propose même des palettes de couleurs respectant cette règle d’accessibilité.

2 – Affichez l’état Focus sur vos formulaires

Je vous mets au défi dès maintenant d’aller compléter votre formulaire de contact sur votre site sans utiliser la souris… Puis? Était-ce un succès? Maintenant si je vous disais que cette recommandation est la plus facile à appliquer? Voici une simple règle CSS qui peut faire des miracles :

3 – Utilisez une zone cliquable assez grande

L’accessibilité, c’est aussi s’assurer que votre contenu est accessible sur toutes les plateformes. Pour mon prochain défi, je vous invite à naviguer sur votre site sur votre téléphone mobile en utilisant uniquement votre pouce. Je vous assure que le petit lien texte « cliquez ici », en plein milieu du paragraphe, n’est pas toujours facile à atteindre. Comment y remédier? Utilisez des boutons cliquables! Que ce soit un bouton texte ou une icône, assurez-vous que la zone cliquable soit assez grande, quitte garder une marge cliquable de plusieurs pixels autour du libellé.

4 – Utilisez les ressources à votre disposition

Finalement, plus vous intègrerez l’accessibilité dans vos habitudes de travail, plus ce sera facile et intuitif pour vous. Donc n’hésitez pas à utiliser les ressources à votre disposition en amont plutôt que d’attendre à la fin d’un projet avant de débuter vos tests d’accessibilité.

Premièrement, Hugues recommande de toujours utiliser le validateur Google Lighthouse pour effectuer vos tests d’accessibilité : https://developers.google.com/web/tools/lighthouse/

Deuxièmement, il nous recommande un blogue sur l’accessibilité, tout indiqué pour les développeurs, incluant des tutoriels faciles et des blocs de codes libres de droits qu’on peut réutiliser : https://inclusive-components.design/

 

Avez-vous d’autres trucs d’accessibilité à nous partager? Je vous invite à poursuivre la discussion sur les médias sociaux! Je répondrai à toutes vos questions en live Tweet tout l’après-midi du 26 avril 2018. Joignez-vous à la discussion sur Twitter : https://twitter.com/ATYPIC