Share
Avec 4,5% de la population mondiale souffrant de daltonisme, 4% de malvoyants et 0,6% de personnes aveugles, les difficultés visuelles d’utilisation du Web sont plus fréquentes que vous ne le pensez probablement. Ce guide examinera comment la conception pour les personnes ayant une déficience visuelle peut améliorer le Web pour tous.
Le Web d'aujourd'hui doit être accessible à tous, peu importe les capacités ou les déficiences d'une personne..
«L’accessibilité garantit que les personnes handicapées peuvent accéder aux mêmes informations d’un système que tout le monde et qu’elles obtiennent les mêmes avantages»
Comme indiqué dans un article précédent, il existe un large éventail de déficiences, provenant de cinq domaines remarquables:
Ce guide se concentrera sur la conception des déficiences visuelles, qui peuvent être assez courantes, allant des handicaps légers aux handicaps extrêmes. En fait, Cathy O'Conner (designer et auteur pour Smashing Magazine) a estimé que pour 200 millions de clients en ligne, environ 200 000 bénéficieraient de conceptions plus faciles à voir..
C'est une estimation juste, surtout si l'on considère comment quiconque peut développer une déficience visuelle faible en vieillissant. Les déficiences visuelles courantes peuvent inclure:
Le daltonisme implique une difficulté à percevoir ou à distinguer les couleurs, ainsi qu'une sensibilité à la luminosité des couleurs. Il affecte environ 4,5% de la population mondiale.
La basse vision peut inclure une vision partielle dans un œil ou les deux yeux, une faible acuité visuelle (vision floue), une vision en tunnel, une perte de champ central et une vision trouble. Elle touche 246 millions de personnes, soit environ 4% de la population mondiale..
La cécité est la perte de vision substantielle dans les yeux d'une personne. Il affecte environ 39 millions de personnes, soit 0,6% des personnes..
La nature diverse de ces déficiences peut créer une grande variation dans la perception des pages Web par des personnes aux capacités visuelles différentes. Comme indiqué ci-dessus, un grand nombre de personnes souffrent de déficience visuelle, nous devons donc nous assurer qu'elles peuvent accéder à toutes les fonctionnalités et les interpréter de la même manière..
A titre d'exemple, considérons la page d'accueil de Tumblr, où l'arrière-plan de la page est défini sur une grande image (créée par leurs utilisateurs):
La page d'accueil de TumblrSelon le type et le niveau de déficience visuelle qu'une personne peut avoir, le site peut être perçu de différentes manières (simulé ici avec l'extension NoCoffee Chrome):
1. Vision bouchée périphérique (glaucome, par exemple)
2. Grandes taches de vision bloquée (rétinopathie diabétique)
3. Perte d'acuité visuelle (vision floue)
4. Problèmes liés aux images fantômes
5. Cécité des couleurs à la tritanopieLes exemples ci-dessus montrent différents types de déficience visuelle, ainsi que quelques exemples de daltonisme. Pour résumer:
En raison de ces variations de perception, les éléments clés d'un site Web donné peuvent devenir moins accessibles (et donc moins utilisables) en fonction de l'étendue de la déficience visuelle de l'utilisateur..
Par exemple, une perte d'acuité visuelle (vision floue) peut faire en sorte que la barre de recherche sur le site Web de Tumblr disparaisse presque à l'arrière-plan. La même chose peut être dite pour le bouton de connexion:
Comparez la barre de recherche sur l'image de gauche avec celle de droite. La barre de recherche s'est fondue dans l'arrière-plan et est à peine visible..
En s'éloignant de l'exemple de Tumblr, considérons une personne atteinte de daltonisme rouge / vert (protanopie). Sur une page de résultats de recherche Google, la couleur utilisée pour représenter le page actuelle des résultats semble moins significatif pour un utilisateur daltonien, ce qui le rend légèrement moins significatif:
Exemple Google ProtonopiaLe contraste entre le rouge et le jaune est moins évident pour un utilisateur daltonien et ressemble davantage à une couleur verdâtre clair par rapport à un vert foncé.
Les deux exemples ci-dessus montrent comment les variations de perception peuvent affecter l'utilisabilité des fonctionnalités principales. Heureusement cependant, les personnes ayant une déficience visuelle peuvent modifier la présentation du contenu afin que les éléments deviennent plus accessibles et utilisables pour elles. Cela peut être fait par:
Ces ajustements peuvent être effectués à l'aide des paramètres par défaut d'un navigateur Web. De plus, des modifications plus avancées ont été mises à disposition via des extensions d'accessibilité du navigateur. Par exemple, Google a créé divers plug-ins d'accessibilité pour les utilisateurs malvoyants:
Contraste élevé, par exemple, permet aux utilisateurs de faire varier le contraste d’un site Web, ce qui rend le texte plus lisible. Ici, il est en action sur la page d'accueil Spotify:
Exemple de plug-in de navigateur d'accessibilité utilisé pour modifier le contraste d'une page WebComme vu ci-dessus, l'extension du navigateur peut:
Avec toutes les différentes déficiences visuelles, et le large éventail d'outils pouvant être utilisés pour modifier l'apparence du contenu, il est clair que nous ne pouvons pas toujours déterminer le mode d'affichage des pages Web. ou perçu par les gens.
Puisque le contenu peut apparaître de différentes manières, nous devons donc être prudents quant à la structure de notre contenu., même au niveau du codage. En effet, il devient important de maintenir une hiérarchie claire des informations, car les utilisateurs peuvent utiliser différents moyens pour présenter ces informations. Jetons maintenant un coup d'œil aux meilleures pratiques pour nous assurer que notre contenu est toujours accessible, quel que soit son affichage:
Voici une liste de six meilleures pratiques pour améliorer vos conceptions pour les malvoyants..
Il est important de nous assurer que le contenu Web est indépendant de la structure sous-jacente. Lorsque les modifications apportées à la présentation peuvent inclure la taille des éléments (texte et images, par exemple), l'espacement entre les éléments ou le fait de voir les éléments (les utilisateurs aveugles peuvent ne pas voir les images), il est clair que le développeur ne peut pas déterminer. comment le contenu sera visionné à un moment donné.
Comme indiqué par le W3C, pour permettre à différentes méthodes de navigation de fonctionner (par exemple, à l'aide de lecteurs d'écran ou de navigation au clavier), les développeurs doivent s'assurer que leur code fournit une structure indépendante de la présentation:
“Les développeurs doivent s'assurer que la présentation du contenu Web est indépendante de la structure sous-jacente” - W3C
Une structure solide fournira également des balises sémantiques pertinentes, telles que des en-têtes, des paragraphes et des balises d’éléments de liste, afin de garantir, par exemple, qu’un lecteur d'écran puisse interpréter les informations et les présenter sous une autre forme:
Exemple de mise en page de site Web utilisant des balises sémantiques correctesComme expliqué précédemment, certains éléments structurels, en particulier les images, ne peuvent pas être perçus par certains utilisateurs. Par exemple, les aveugles utilisant des technologies d'assistance (telles que des lecteurs d'écran) pour interpréter des sites Web entendent le Texte alternatif attribué à l'image lue, plutôt que réellement voyant l'image. Si ce texte n’est pas présent ou n’est pas suffisamment descriptif, ils ne pourront pas percevoir les informations comme prévu..
Voici un exemple de l'Université de Leicester, montrant un texte alternatif précis, qui fournit plus de contexte à l'utilisateur:
Exemple d'utilisation précise de texte alternatif sur une imageAbility.net fournit cinq règles d'or pour utiliser alt balises (alternatives de texte) correctement afin de rendre un site plus accessible:
Accentsconagua
![]()
alt = "" attributLa couleur n'est pas le meilleur moyen de transmettre des informations, comme le montre l'exemple suivant. En dessous, une bordure rouge est utilisée pour mettre en évidence les champs de formulaire qui n'ont pas été remplis correctement. Par conséquent, si un utilisateur est daltonien, il ne pourra pas voir cette indication. Il est donc difficile de comprendre quels champs contiennent des erreurs:
L'utilisation d'icônes et d'étiquettes pour indiquer les champs non valides permet de mieux communiquer les informations à un utilisateur daltonien:
Exemple de Bootstrap v4Cet exemple montre que la couleur ne doit pas être utilisée seule pour transmettre des informations, mais uniquement en plus des informations existantes..
Les utilisateurs daltoniens peuvent également avoir du mal à faire la différence entre certaines couleurs. Par exemple, le vert, le rouge et le brun peuvent être très similaires:
Comment les utilisateurs daltoniens perçoivent-ils le brun vert et le rouge? Par conséquent, lorsque des couleurs sont utilisées sur des graphiques et des graphiques, il peut être utile d'appliquer des superpositions à motifs à des couleurs unies afin de donner aux utilisateurs un moyen plus clair de distinguer les éléments. Cela aide non seulement les daltoniens, mais facilite également la tâche de tous. Prenons les étiquettes de Trello pour un exemple d'application de textures:
À droite, étiquettes Trello respectueuses des couleurs.Les schémas de couleurs monochromes utilisent uniquement les couleurs d'une seule teinte. Voici un exemple, créé avec paletton.com:
Palette monochromatique créée avec paletton.comEn n'utilisant que les nuances d'une seule teinte, toute signification supplémentaire qui aurait pu être introduite par différentes nuances de couleur est supprimée.
Les variations de contraste et de ton peuvent être utilisées pour donner un sens ou une importance aux éléments et attirer l'attention de l'utilisateur sur différents domaines. La signification ici peut également être plus facilement transmise aux utilisateurs daltoniens, comme le montre l'exemple suivant d'un site monochromatique..
BIGSOUND Buzz est un site Web qui utilise beaucoup les couleurs monochromes:
Monochrome sur BIGSOUND Buzz
Des textures partoutUn utilisateur daltonien verra les mêmes tons et contrastes, mais dans une teinte différente:
BIGSOUND Buzz pour les daltoniensLe contraste est la différence entre la couleur la plus claire (l’arrière-plan, par exemple) et la couleur la plus sombre (le texte, par exemple). Par exemple, considérons ce tableau de sensibilité au contraste:
En haut à gauche (lettre A), le contraste est le plus élevé. A mesure que vous vous déplacez à droite, le contraste diminue à mesure que la différence de luminance entre l'arrière-plan et le premier plan diminue. En fin de compte, en fonction de la sensibilité au contraste d'une personne, celle-ci ne pourra pas distinguer le texte de l'arrière-plan..
Par conséquent, pour que le texte soit lisible par les personnes malvoyantes, le WCAG a fourni une ligne directrice relative au rapport de contraste. Ils suggèrent l'existence d'un rapport de contraste d'au moins 4,5: 1 entre un texte et son arrière-plan. Ce rapport tombe à 3: 1 pour un texte plus volumineux (gras 24px ou 29px).
Un exemple de ce rapport est présenté dans les exemples ci-dessous, à partir de accessebility.psu.edu:
Dans l’ensemble, en concevant d’abord les inclusions les plus extrêmes, il améliore presque toujours le produit final pour tous les autres.
Par exemple, concevoir pour les personnes avec pas de vision peut jeter une grande base pour ceux qui pouvez voir. En effet, cela nous permet de nous assurer que la structure du site Web est indépendante de sa présentation et qu'elle peut être interprétée par les technologies d'assistance. ainsi que en tant que personnes. Par conséquent, si des changements de présentation devaient se produire pour une autre raison, la structure du site Web sera toujours accessible..
De plus, veiller à ce que la couleur ne soit utilisée que pour mettre en valeur ce qui est déjà visible est un autre grand pas en avant vers la création d'un site Web hautement accessible, et donc utilisable. Un processus de conception utile peut donc consister à concevoir les premières itérations d’un produit en niveaux de gris, puis à appliquer des couleurs à la toute fin..
Il n'est pas nécessaire de réinventer la roue pour créer des conceptions accessibles. il existe de nombreux systèmes de conception et directives qui peuvent vous aider.
