12 Problèmes d'Accessibilité Web Courants pour les Déficiences Visuelles
Collection :
Il est maintenant de notoriété publique que l'accessibilité web constitue un droit humain fondamental. Au-delà d'ouvrir votre site web à un public plus large de plus d'un milliard de personnes en situation de handicap, les bonnes pratiques d'accessibilité s'alignent avec d'autres objectifs commerciaux tels que le référencement, l'ergonomie, les designs adaptés aux mobiles, et bien plus encore. La norme pour l'accessibilité web est régie par les Règles pour l'accessibilité des contenus Web (WCAG).
Selon les Centers for Disease Control, la déficience visuelle fait partie des 10 handicaps les plus fréquents chez les adultes de plus de 18 ans et constitue l'un des handicaps les plus courants chez les enfants. Les déficiences visuelles englobent une vaste gamme de troubles et de maladies, comme la cécité complète, le daltonisme, les erreurs de réfraction (myopie, hypermétropie et astigmatisme), les troubles liés à l'âge tels que le glaucome, la cataracte et la dégénérescence maculaire, ainsi que les déficiences comme l'amblyopie (« œil paresseux ») ou le strabisme (yeux tournés vers l'extérieur ou l'intérieur).
Comment les personnes malvoyantes accèdent à internet
Le web est un média très visuel, c'est pourquoi les déficiences visuelles peuvent causer des problèmes d'accessibilité importants. Les personnes malvoyantes utilisent des technologies d'assistance comme les lecteurs d'écran, les outils de grossissement d'écran ou les afficheurs braille rafraîchissables pour accéder à internet.
Un lecteur d'écran est un type de logiciel qui fonctionne avec le système d'exploitation pour fournir des informations sur les icônes, menus, fichiers, dossiers et boîtes de dialogue. Puisque les lecteurs d'écran ne dépendent pas d'une souris, ils fonctionnent généralement en répondant à diverses commandes clavier. Par exemple, une commande peut permettre à un lecteur de naviguer sur une page web, de lire une partie d'un document ou de faire une sélection. Tous les systèmes d'exploitation sont maintenant équipés de lecteurs d'écran. Il existe aussi des lecteurs d'écran commerciaux, comme le populaire logiciel JAWS (Job Access With Speech). Les lecteurs d'écran peuvent lire tout ou partie du texte visible sur une page, lire certains textes qui ne sont pas visibles pour les utilisateurs voyants (comme le texte alternatif) et détecter le formatage du texte dans un document. Pour accomplir toutes ces tâches cependant, le site web doit être codé pour l'accessibilité.
Un afficheur braille rafraîchissable permet aux utilisateurs malvoyants de lire la sortie de texte d'un écran grâce au soulèvement et à l'abaissement de picots à travers des trous sur une surface plane selon les combinaisons braille. Les afficheurs braille rafraîchissables sont utilisés avec un logiciel de lecteur d'écran qui collecte les informations de contenu d'une page web et les convertit en caractères braille à afficher.
Les problèmes d'accessibilité web pour les personnes malvoyantes surviennent lorsqu'elles rencontrent un site web qui n'est pas codé pour être navigable au clavier et pour prendre en charge les technologies d'assistance. Avoir un code bien structuré est extrêmement important pour que le logiciel de lecteur d'écran fonctionne correctement car la présence de certains éléments de code déclenchera une commande. Par exemple, si un lecteur d'écran détecte le code d'un tableau d'informations sur une page, il déclenchera des commandes telles que celles qui permettent de naviguer dans le tableau horizontalement ou verticalement.
12 problèmes d'accessibilité courants pour les utilisateurs malvoyants
Voici les problèmes numériques les plus courants que rencontrent les personnes avec des déficiences visuelles lorsqu'elles utilisent un web qui n'est pas rendu accessible ou codé pour accommoder les technologies d'assistance.
1. Structure HTML
Certains lecteurs d'écran sont capables de détecter et de lire le CSS d'une page. Cependant, d'autres s'appuient sur le HTML non stylé. Cela peut créer des problèmes lorsque le lecteur d'écran détermine ce qui doit être lu en premier sur la page. Pour éviter ce problème, tout le HTML devrait être structuré de la même façon qu'un document imprimé le serait, de manière à avoir du sens quand il est lu de gauche à droite, de haut en bas.
2. Contraste du texte
L'une des préoccupations d'accessibilité les plus courantes est le faible contraste de couleur entre le texte et les arrière-plans. Le contraste des couleurs est un élément essentiel de l'accessibilité web car il aide les utilisateurs à percevoir le contenu d'une page. Selon WCAG 2, le contraste est la différence de luminosité entre deux couleurs. Le faible contraste sur le texte est un problème d'accessibilité courant, car les personnes avec une faible sensibilité au contraste, comme les personnes âgées, ou les personnes daltoniennes peuvent ne pas être capables de distinguer entre le texte et l'arrière-plan de certaines couleurs avec un ratio de contraste faible.
En février 2021, WebAIM a mené une évaluation de l'accessibilité d'un million de pages d'accueil de sites web et a trouvé que 86,4 % des pages d'accueil avaient un texte à faible contraste. Selon WCAG 2.1 niveau AA, le ratio de contraste de couleur idéal est de 7:1 pour le texte normal et de 4,5:1 pour le texte large.
Le faible contraste est facile à corriger en adaptant la conception de votre site web et les thèmes vers des combinaisons de couleurs accessibles. Il existe de nombreux outils d'accessibilité gratuits comme le Vérificateur de contraste des couleurs d'Acquia Web Governance que vous pouvez utiliser pour vérifier qu'il y a suffisamment de contraste entre votre texte et l'arrière-plan.
3. Structure des titres
Les utilisateurs de sites web malvoyants lisent rarement une page web entière. Au lieu de cela, ils parcourent la page en cherchant les parties qui les intéressent le plus. Ils sont également capables de parcourir les pages web pour trouver des informations pertinentes en utilisant leur lecteur d'écran pour lister les titres. Si les titres ne sont pas utilisés correctement (ou pas du tout), alors l'utilisateur ne pourra pas trouver ce qu'il cherche sur la page. C'est pourquoi vous ne devriez jamais utiliser les titres de façon décorative et devriez les placer de manière logique et décroissante sur la page (H1, H2, H3, etc.).
4. Accessibilité clavier
Utiliser une souris pour naviguer sur un site web peut être soit difficile soit même impossible pour les personnes malvoyantes, alors à la place, elles utilisent le clavier pour naviguer. Les personnes malvoyantes peuvent se déplacer sur un site web en utilisant des commandes et raccourcis clavier. Cependant, un site web devra avoir un contenu bien structuré avec des structures de titres appropriées et être codé pour permettre l'accès clavier à tout le contenu et toutes les fonctionnalités telles que les hyperliens, les liens, les formulaires et les contrôles média.
Les utilisateurs de clavier utilisent la touche Tab pour naviguer sur la page et ce faisant, il doit y avoir un indicateur de focus clavier visible qui leur montre sur quel élément ils se trouvent dans la page. Ces indicateurs apparaissent comme une bordure ou comme un surlignage autour de l'élément ciblé, aidant ceux qui ont une vision réduite à déterminer où ils se trouvent sur la page web. Il est important que le site web soit codé pour la navigation clavier car l'indicateur de focus doit suivre un ordre de lecture logique.
5. Liens de navigation
Les liens de navigation constituent également un problème d'accessibilité. Les lecteurs d'écran sont incapables de détecter la navigation si elle n'est pas bien codée. Et quand elle est trouvée sur une page, un lecteur d'écran ne saura pas la passer. Cela signifie que les utilisateurs malvoyants devront écouter la navigation à chaque fois qu'ils chargent une nouvelle page. Une solution à cela est d'assigner correctement les rôles ARIA aux menus de navigation pour indiquer leur but et les rendre navigables. Aussi, assurez-vous qu'un lien « Aller au contenu principal » soit disponible pour que la navigation puisse être ignorée par les utilisateurs de lecteurs d'écran.
6. Contenu non-HTML
Les problèmes d'accessibilité s'étendent aussi au contenu comme les documents hébergés sur un site web. Le contenu non-HTML tel que les PDF, les présentations Microsoft PowerPoint ou les documents Word, devraient également être rendus aussi accessibles que possible. Il existe des moyens de rendre certains de ces documents accessibles : les PDF par exemple peuvent être balisés pour la navigation par un lecteur d'écran, tandis que PowerPoint et Word offrent une fonction Vérificateur d'accessibilité dans le logiciel pour créer des documents accessibles.
7. Rendu JavaScript
JavaScript était auparavant complètement inaccessible aux lecteurs d'écran mais maintenant, la plupart des lecteurs d'écran peuvent y accéder. Cependant, il est important de noter que certaines personnes peuvent avoir JavaScript désactivé ou être dans un environnement (comme un lieu de travail d'entreprise) où il est désactivé. Les utilisateurs peuvent aussi utiliser des versions plus anciennes de lecteurs d'écran qui ne peuvent pas gérer JavaScript. Pour cette raison, il est important de s'assurer que votre site web fonctionne encore sans JavaScript.
8. Texte alternatif manquant (ou inexact)
Créer un site web accessible ne signifie pas que vous devez renoncer aux images. Cela signifie simplement que vos éditeurs de site web doivent faire attention à la façon dont ils assignent les balises alt aux images. Le texte alternatif devrait clairement décrire quelle information l'image transmet. Gardez les descriptions courtes et concises car les utilisateurs de lecteurs d'écran ont tendance à naviguer rapidement dans le contenu. Vos éditeurs doivent aussi savoir que les lecteurs d'écran liront le texte alternatif avant de lire la légende de l'image (si elle en a une). Si la légende et le texte alternatif sont identiques, alors l'utilisateur entendra la même information deux fois ! Même si c'est techniquement conforme, ce n'est toujours pas une excellente expérience utilisateur.
Pour les images décoratives, incluez un texte alternatif vide (alt=" ") ou nul (alt="") dans le code HTML. Cela dira au lecteur d'écran d'ignorer l'image.
Notez que l'absence de texte alternatif impacte négativement votre site web d'autres façons aussi, comme la diminution de votre référencement. Si votre image manque d'un texte alternatif ou d'un attribut vide/nul, le lecteur d'écran annoncera quand même l'image sans aucune description, ce qui peut rendre la situation très confuse pour l'utilisateur.
9. Texte de lien manquant
Les liens sont cruciaux pour naviguer sur le web, mais ils apportent leur propre ensemble de problèmes d'accessibilité. Le texte de lien manquant est un obstacle courant pour les personnes malvoyantes. Cela se produit quand il n'y a pas de texte utilisé pour décrire ou présenter le lien. Cela peut arriver quand des images fonctionnelles comme des boutons, logos, icônes ou autres images sont utilisées comme liens. Un lecteur d'écran, cependant, ne peut pas lire que ces images fonctionnent comme des liens.
Pour éviter que cela se produise, le texte alternatif de l'image devrait transmettre le but de l'image et l'action qui sera prise, plutôt que juste une description de l'image. Par exemple, pour une image de logo qui est censée mener à la page d'accueil, le texte alternatif devrait être « page d'accueil de *nom du site web*.com » au lieu de juste « logo *nom du site web* ».
10. Texte de lien ambigu
Un texte de lien vague comme « Cliquez ici » ou « Plus », ou juste afficher le lien entier lui-même, peut avoir du sens pour les utilisateurs voyants d'un site web où le contenu visuel peut fournir du contexte, mais pour les utilisateurs de lecteurs d'écran, ces textes de liens sont des exemples de terrible expérience utilisateur. Indépendamment du texte qui précède ces liens vagues, cela ne transmet toujours pas assez d'informations à l'utilisateur. Comme les utilisateurs de lecteurs d'écran ont la capacité de naviguer de lien en lien, en sautant le texte entre eux, ils ne fournissent pas de contexte sur ce qu'est le lien et où il vous mènera. Ceci est facilement corrigé en utilisant un texte informatif qui fournit quelques détails sur ce dont traite le lien.
11. Formulaires mal structurés
La plupart des sites web ont des champs de formulaire à remplir par les utilisateurs (une boîte de recherche étant un exemple de formulaire) et ces champs de formulaire présentent souvent des problèmes d'accessibilité pour les individus malvoyants. L'un des plus gros problèmes avec les formulaires est qu'ils n'ont souvent pas les étiquettes et instructions correctes dont les lecteurs d'écran ont besoin pour transmettre des informations sur le formulaire. Chaque champ a besoin d'une étiquette accessible pour que le lecteur d'écran la lise afin que l'utilisateur sache quoi remplir. Les boutons ont aussi besoin de texte clair pour que l'utilisateur sache quoi sélectionner après avoir complété le formulaire. Si vous utilisez des CAPTCHA, alors il doit y avoir une alternative audio ou autre accessible pour les utilisateurs malvoyants.
Aussi, pensez à ce qui arrive quand le formulaire est mal rempli. Communément, les sites web renverront le formulaire avec les champs incorrects en rouge. Cela présente évidemment un problème d'accessibilité pour ceux qui sont incapables de voir le champ rouge. À la place, il devrait y avoir du texte à lire qui explique quelle partie du formulaire a retourné l'erreur.
12. Expirations et délais d'attente des formulaires
Beaucoup de formulaires ont des fonctions de sécurité qui font que la page ou le formulaire expire après un certain laps de temps. Cependant, pour ceux qui utilisent une technologie d'assistance pour remplir des formulaires, le processus pourrait prendre plus de temps et ils peuvent ne pas savoir qu'il y a une limite de temps sur celui-ci. Soit supprimez les délais d'attente sur les formulaires, donnez suffisamment d'informations que le formulaire est limité dans le temps, ou fournissez la fonctionnalité pour les utilisateurs de technologie d'assistance d'étendre la limite de temps pour finir le processus.
Ces problèmes d'accessibilité, bien que courants, sont relativement faciles à corriger et à éviter une fois que vous en êtes conscient. Vous éduquer sur les bases de l'accessibilité web et utiliser les divers logiciels d'audit d'accessibilité web disponibles, comme Acquia Web Governance par Acquia, peut aider à la fois à trouver les problèmes s'ils arrivent à passer à travers les mailles du filet, et vous aide à les traiter avant que vos utilisateurs ne les rencontrent.
À la recherche d'une solution complète pour l'accessibilité web ? Acquia peut vous aider. Découvrez comment nous pouvons vous aider à obtenir un site accessible avec un audit gratuit d'accessibilité web.
