fbpx
ActualitéAppsAstucesHigh TechMultimédiaUtilitairesWeb

L’accessibilité visuelle sera une priorité en 2020 – voici comment adapter votre site

Les entreprises ne pourront plus se permettre d'ignorer ce problème

Peu de gens pensent beaucoup à l’accessibilité du Web. Encore moins de gens le comprennent, et sans le comprendre, il n’y aura ni empathie ni changement. Cependant, une série de recours collectifs très médiatisés en 2019, comme celui contre la société de gestion de Beyonce, a mis le problème en lumière – et je m’attends à ce que nous voyions beaucoup plus d’entreprises prioriser l’accessibilité du Web en 2020.

Dans le même temps, les États-Unis et de nombreux pays européens appliquent plus rigoureusement leurs statuts s’appliquant à l’accessibilité du contenu gratuit. Les entreprises ne pourront plus se permettre d’ignorer ce problème.

Il n’est pas surprenant que les malvoyants demandent un meilleur accès. Rempli d’histoires Instagram et de boutiques en ligne qui affichent des images et des vidéos de produits haute définition à 360 degrés, le Web est devenu un espace public visuel. Cela met beaucoup de gens dans un désavantage inutile.

Ce ne sont pas seulement les poursuites qui entraînent la demande d’un meilleur accès visuel, mais le problème croissant de la mauvaise vision. Selon l’Organisation mondiale de la santé (OMS), environ 1,3 milliard de personnes souffrent de déficiences visuelles telles que la basse vision, le daltonisme et la cécité (partielle). Cela représente près de 20% de la population mondiale – y compris les visiteurs de votre site Web – qui ont des problèmes d’accessibilité.

Ajustez votre état d’esprit

Je serai le premier à accepter que les États-Unis sont plus satisfaits des poursuites que la plupart. Vous vivez peut-être dans un autre pays, avec une culture juridique différente et ne pensez pas que vous devez vous soucier de l’accessibilité. C’est la mauvaise mentalité.

En tant que développeur frontend, je me soucie de l’accessibilité du Web; c’est ma responsabilité. Je ne veux pas que les visiteurs aient simplement un « accès ». Je veux qu’ils aient la meilleure expérience possible. Examinons maintenant de plus près certains des différents types de déficiences visuelles et comment les résoudre sur un site.

Sensibilité à la lumière

La sensibilité à la lumière est un problème très courant, en particulier pour les personnes assises devant des écrans d’ordinateur toute la journée. Les personnes sensibles à la lumière peuvent trouver difficile, douloureux, voire impossible à lire et à se concentrer sous des lumières vives, sur des écrans lumineux ou sur des pages Web où des couleurs vives sont combinées.

C’est pourquoi la plupart des développeurs comme moi passent à des thèmes sombres dans leurs outils de développement, IDE ou leur système d’exploitation (s’il en a un). C’est également la raison pour laquelle des applications populaires comme Twitter, Google, Facebook Messenger et récemment iOS proposent le «Mode sombre».

Une difficulté est qu’il n’existe pas de norme unique pour la sensibilité à la lumière. Cela varie selon la personne et le paramètre, il est donc impossible de concevoir un ensemble de configuration qui fonctionne pour toutes les personnes sensibles à la lumière.

Solution: thèmes de sensibilité à la lumière

Offrez un « Mode sombre » ou un « Thème clair » à vos utilisateurs et permettez-leur de régler la luminosité, les laissant essentiellement décider par eux-mêmes.

Il existe plusieurs approches pour y parvenir, en fonction de votre pile technologique et de la prise en charge de votre navigateur. Une manière simple consiste à combiner une variable CSS et la méthode d’inversion CSS: filter: invert().

En définissant invert(1), le navigateur inverse toutes les couleurs disponibles dans vos applications aux couleurs correspondantes exactement opposées.

/ * Définir la variable css pour le mode sombre / clair * /

:racine {

–nightMode: 0;

}

/ * Appliquer le changement de mode à l’ensemble de l’application sur <body> * /

corps {

filtre: inverser (var (- nightMode));

}

Cet effet de filtre s’applique également à toutes les images de l’application. Vous voudrez peut-être ajouter du code pour vous assurer que les couleurs sont réservées même en mode inversé (sombre ou clair).

Avertissement: le filtre n’est toujours pas pris en charge dans IE. Si la prise en charge d’IE est critique pour votre application, envisagez d’utiliser une autre approche telle que CSS-in-JS (composants de style pour Vue ou pour React).

Sensibilité au contraste

La sensibilité au contraste se produit lorsque les gens ont du mal à lire du texte placé sur des images et des vidéos. Cela se produit lorsque du texte blanc est placé sur un fond clair, du texte noir sur un fond sombre ou du texte sur un fond visuellement « occupé ».

Solution: outils et ressources

Contrairement à la sensibilité à la lumière, les problèmes de sensibilité au contraste sont faciles à identifier. Les navigateurs populaires, y compris Chrome et Firefox, incluent désormais une «vérification du score de contraste» dans leurs outils de développement, qui signale toutes les sections de page qui ne sont pas suffisamment visibles. Cependant, vous ne devez pas vous fier uniquement à ces outils, car les scores automatiques ne sont pas toujours précis à 100%.

Pour traiter pleinement la sensibilité au contraste, reportez-vous aux directives d’accessibilité du contenu Web (WCAG). Il stipule que le texte ou les images de texte doivent avoir un rapport de contraste d’au moins 4,5:1. Les exceptions sont le texte volumineux (où il est 3:1), le texte invisible et décoratif et les logotypes, où le texte fait partie d’un nom de marque.

Pour résumer certains des principaux points:

  • La sensibilité au contraste ne doit pas être confondue avec la modification des schémas de couleurs. Il s’agit de s’assurer que les gens peuvent lire le texte de la page Web en fournissant le contraste optimal entre le texte et son arrière-plan.
  • Un texte plus grand a un critère de contraste plus faible. En effet, un texte plus volumineux est, par nature, plus facile à lire. Un texte de 18 points ou un texte en gras de 14 points est considéré comme un «texte large».
  • Le contraste s’applique également aux images de texte, pas seulement strictement appliquées aux polices – par exemple, une image JPG d’un logo de marque.

Pour vous assurer que votre site Web réussit le test de contraste, consultez cet outil gratuit Contrast Checker de WebAIM.

Daltonisme

Le daltonisme (ou déficit de vision des couleurs) rend difficile (ou impossible) pour les personnes affectées d’identifier ou de distinguer des couleurs spécifiques.

Imaginez qu’une personne daltonienne visite une boutique en ligne pour acheter un t-shirt rouge et ne voit que des verts. Comment ce visiteur saurait-il lesquels acheter?

Solution: Créez vos couleurs

Dans certains cas, il sera impossible d’adapter une image pour qu’elle s’affiche correctement pour une personne ayant une déficience visuelle. Pour ceux-ci, les options sont de fournir un support de chat/live ou des invites de texte (ou, idéalement, les deux).

Pour fournir des invites de texte, nous ajoutons le nom de la couleur sous forme de texte aux images à l’aide de l’attribut alt. Donc, au lieu de dire qu’une image est un «t-shirt», nous dirions explicitement qu’il s’agit d’un t-shirt rouge. Plus c’est précis, mieux c’est. Le jaune est quelque peu utile, mais le «jaune moutarde» est beaucoup plus descriptif.

Cela impliquera un codage léger, ou vous pouvez utiliser l’un des outils de gestion d’image sur le marché qui aident à automatiser ce processus.
Solution: modélisez vos couleurs

Une autre option consiste à fournir un motif unique pour représenter chaque couleur différente sur votre page Web. Les approches standard ne sont pas simples – soit les concepteurs doivent coder manuellement quelque chose ou utiliser un logiciel de retouche d’image comme Photoshop ou Gimp pour créer une ressource supplémentaire pour chaque cas daltonien.

La version gratuite du logiciel de mon entreprise comprend une transformation «e_assist_colorblind effect» pour faciliter ce processus. Par exemple, vous pouvez ajouter des rayures pour mettre en évidence la différence entre les couleurs chaudes (rouges) et froides (vertes).

J’espère que cela vous a donné quelques idées sur la façon de résoudre les problèmes les plus courants liés à l’accessibilité visuelle. En vous concentrant sur cet important problème, vous éviterez non seulement les litiges, mais vous attirerez davantage de visiteurs du site, augmenterez l’engagement et augmenterez également les revenus.

Afficher plus

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page