12 Problèmes courants d'accessibilité web pour les déficiences visuelles
Collection :
Il est désormais 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 sur d'autres objectifs commerciaux tels que le SEO, l'ergonomie, la conception adaptée 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, le handicap visuel figure parmi les 10 principaux handicaps chez les adultes de plus de 18 ans et constitue l'un des handicaps les plus courants chez les enfants. Les handicaps visuels englobent un large éventail 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 comme le glaucome, la cataracte et la dégénérescence maculaire, ainsi que des 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, si bien que 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 d'agrandissement d'écran ou les afficheurs braille actualisables 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. Comme 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 désormais équipés de lecteurs d'écran. Il existe également 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 la mise en forme du texte dans un document. Pour accomplir toutes ces tâches cependant, le site web doit être programmé pour l'accessibilité.
Un afficheur braille actualisable 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 actualisables sont utilisés conjointement avec un logiciel de lecture d'écran qui recueille 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 programmé pour être à la fois navigable au clavier et compatible avec les technologies d'assistance. Avoir un code bien structuré est extrêmement important pour que le logiciel de lecture 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 comme 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 handicaps visuels lorsqu'elles utilisent un web qui n'est pas rendu accessible ou programmé pour s'adapter aux 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 stylisé. 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 doit être structuré de la même manière qu'un document imprimé le serait, afin qu'il ait du sens lorsqu'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. Un 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 faible ratio de contraste.
En février 2021, WebAIM a mené une évaluation de l'accessibilité d'un million de pages d'accueil de sites web et a constaté 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.
Un faible contraste est facile à corriger en adaptant la conception et les thèmes de votre site web à 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 à la recherche des 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/elle recherche sur la page. C'est pourquoi vous ne devriez jamais utiliser les titres de manière décorative et devriez les placer de manière logique et descendante sur la page (H1, H2, H3, etc.).
4. Accessibilité au clavier
Utiliser une souris pour naviguer sur un site web peut être difficile, voire 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 programmé pour permettre l'accès clavier à tout le contenu et toutes les fonctionnalités comme les liens hypertexte, liens, formulaires et contrôles médias.
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 une surbrillance autour de l'élément focalisé, aidant ceux qui ont une vision faible à déterminer où ils se trouvent sur la page web. Il est important que le site web soit programmé pour la navigation au 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 ne peuvent pas détecter la navigation si elle n'est pas bien programmée. Et quand elle est trouvée sur une page, un lecteur d'écran ne saura pas qu'il faut l'ignorer. Cela signifie que les utilisateurs malvoyants devront écouter la navigation à chaque fois qu'ils chargent une nouvelle page. Une solution à cela est d'attribuer avec précision des rôles ARIA aux menus de navigation pour indiquer leur objectif et les rendre navigables. Assurez-vous également qu'un lien « Aller au contenu principal » est 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 également 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, doivent é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 autrefois 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 également 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 attribuent les balises alt aux images. Le texte alternatif doit 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 également savoir que les lecteurs d'écran liront le texte alt en premier avant de lire la légende de l'image (si elle en a une). Si la légende et le texte alt sont identiques, alors l'utilisateur entendra la même information deux fois ! Même si cela est techniquement conforme, ce n'est toujours pas une excellente expérience utilisateur.
Pour les images décoratives, incluez un texte alt vide (alt=" ") ou nul (alt="") dans le code HTML. Cela dira au lecteur d'écran d'ignorer l'image.
Notez que le texte alt manquant impacte négativement votre site web d'autres manières aussi, comme la diminution de votre SEO. Si votre image manque d'un texte alt ou d'un attribut vide/nul, le lecteur d'écran annoncera quand même l'image sans aucune description, ce qui peut être très déroutant 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 lorsqu'il n'y a pas de texte utilisé pour décrire ou présenter le lien. Cela peut arriver lorsque 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 arrive, le texte alt de l'image devrait transmettre l'objectif de l'image et l'action qui sera prise, plutôt qu'une simple description de l'image. Par exemple, pour une image d'un logo qui est censée mener à la page d'accueil, le texte alt devrait être « page d'accueil de *nom du site*.com » au lieu de simplement « logo *nom du site* ».
10. Texte de lien ambigu
Un texte de lien vague comme « Cliquez ici » ou « Plus », ou simplement 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. Quel que soit le texte qui précède ces liens vagues, cela ne transmet toujours pas suffisamment d'informations à l'utilisateur. Comme les utilisateurs de lecteurs d'écran ont la capacité de naviguer de lien en lien, en ignorant 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 personnes malvoyantes. Un des plus gros problèmes avec les formulaires est qu'ils n'ont souvent pas les bonnes étiquettes et instructions 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 également besoin d'un 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 se passe quand le formulaire est mal rempli. Communément, les sites web retourneront le formulaire avec les champs incorrects en rouge. Cela présente évidemment un problème d'accessibilité pour ceux qui ne peuvent pas voir le champ rouge. Au lieu de cela, il devrait y avoir un texte à lire qui explique quelle partie du formulaire a retourné l'erreur.
12. Expirations et délais de formulaires
De nombreux formulaires ont des fonctions de sécurité qui font expirer la page ou le formulaire après un certain 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 dessus. Soit supprimez les délais sur les formulaires, donnez suffisamment d'informations que le formulaire a une limite de temps, ou fournissez la fonctionnalité pour les utilisateurs de technologie d'assistance d'étendre la limite de temps pour terminer 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 by Acquia, peut aider à la fois à trouver les problèmes s'ils arrivent à passer entre les mailles du filet, et vous aide à les traiter avant que vos utilisateurs ne les rencontrent.
Vous recherchez une solution complète pour l'accessibilité web ? Acquia peut vous aider. Voyez comment nous pouvons vous aider à atteindre un site accessible avec un audit gratuit d'accessibilité web.
