Directives relatives à l’accessibilité du contenu web pour rendre votre site web conforme à l’ADA

juillet 16, 2022
Directives relatives à l’accessibilité du contenu web pour rendre votre site web conforme à l’ADA

Michelle Meyer

La loi ADA oblige toutes les entreprises à créer un site web accessible. Respectez les normes ADA en suivant ces règles d’accessibilité des sites web.

C’est fou d’imaginer qu’il fut un temps où les entreprises n’étaient pas tenues de proposer un accès à leurs locaux aux personnes en fauteuil roulant. Mais si votre site web n’est pas conforme aux directives relatives à l’accessibilité du contenu web, vous êtes comme un magasin avec un escalier et une rampe d’accès manquante. Vous enfreignez la loi, vous négligez vos clients handicapés et vous faites fuir les clients potentiels.

L’Americans with Disabilities Act stipule que tout site web, et pas seulement les sites des grandes entreprises, doit être accessible à tous les utilisateurs. Et de lourdes sanctions sont prévues pour ceux qui ne se conforment pas à la loi. En outre, il est économiquement intéressant de rendre votre site accessible à tous les utilisateurs, car un site frustrant décourage les clients potentiels.

La création d’un site web conforme à l’ADA n’est pas une tâche unique. Aucun site web n’est accessible à 100 % – il s’agit d’un effort constant pour être toujours plus accessible. Mais l’effort en vaut la peine – pour votre entreprise et vos clients. Voici mes meilleurs conseils pour rendre votre site plus accessible.

Principaux aspects de l’accessibilité d’un site web

Commençons par jeter un coup d’œil aux éléments les plus importants – ceux qui ont un impact sur chaque page de votre site. En abordant ces points en premier, vous pouvez être sûr d’en avoir pour ainsi dire le plus grand bénéfice.

La navigation sur ordinateur et sur mobile fonctionne également sans souris

De nombreux utilisateurs se fient exclusivement à la navigation au clavier, et c’est l’un des éléments les plus importants de l’accessibilité des sites web. Les personnes souffrant de handicaps moteurs ou de tremblements peuvent ne pas être en mesure d’utiliser une souris, c’est pourquoi votre site doit être entièrement navigable au clavier.

Tous les éléments de mise au point ont des contours clairs

Les éléments d’un site web sont “focalisés” lorsque l’utilisateur peut interagir avec eux d’une manière ou d’une autre, par exemple en cliquant sur un lien ou en modifiant une option. Les utilisateurs handicapés utilisent des lecteurs d’écran ou d’autres aides pour modifier la mise au point, ce qui leur permet de se déplacer sur le site et de cliquer à l’endroit souhaité. Tous les éléments de mise au point doivent interagir avec les raccourcis clavier et avoir un contour clair (au moins 2 px) afin d’être visibles pour tous les utilisateurs.

Assurez-vous que le contraste de vos couleurs correspond à vos besoins

Des contrastes de couleurs nets aident les utilisateurs souffrant d’un handicap visuel à reconnaître le design de votre site et à lire plus facilement votre texte. Vous trouverez des normes pour le contraste des couleurs dans les directives de W3.org ici.

Utiliser des liens de saut

L’inclusion d’un lien de saut comme premier élément focalisable sur chaque page permet aux utilisateurs du clavier et des technologies d’aide de sauter les parties de la page qui se répètent sur chaque page, comme la navigation supérieure. De cette manière, les utilisateurs peuvent trouver rapidement le contenu principal.

souligner uniquement les textes des liens

Ne soulignez plus le texte pour le mettre en valeur. Seul le texte lié doit être souligné. Dans le cas contraire, cela peut être déroutant et frustrant pour les utilisateurs qui s’attendent à ce que le texte souligné contienne un lien.

Utilisez une explication de la langue pour chaque page

L’indication de la langue principale d’une page web dans votre code permet aux lecteurs d’écran de lire correctement le contenu. C’est pourquoi il est également important d’indiquer dans le code tous les endroits où la langue peut changer sur la page.

Souligner les liens dans le texte

Ne vous fiez pas uniquement à la couleur pour indiquer qu’une phrase ou un mot est lié dans le texte. Au lieu de cela, soulignez toujours le texte lié. C’est la norme pour tous les contenus en ligne, alors suivez-la. La plupart des thèmes WordPress vous permettent de l’activer ou de le désactiver pour l’ensemble du site.

Autres facteurs importants pour l’accessibilité

Beaucoup de ces autres points ne concernent que certaines parties ou certains éléments de votre site. Ils sont tous importants, mais vous devrez peut-être vous retrousser les manches pour les découvrir tous.

Éliminer les boutons ou les liens vides

L’élimination des boutons et des liens défectueux ou vides fait partie des bonnes pratiques SEO et améliore votre classement de recherche. Mais ce n’est pas tout. Les boutons et les liens vides et défectueux sont déroutants et frustrants pour les utilisateurs handicapés. Testez donc régulièrement vos liens et vos boutons pour vous assurer qu’ils fonctionnent tous.

Assurez-vous que les formulaires sont accessibles

Si vos formulaires ne sont pas accessibles, vous risquez de rejeter des utilisateurs et de perdre des leads. Pour rendre vos formulaires accessibles, vous devez vérifier les points suivants :

  • Les champs sont étiquetés et les champs obligatoires sont clairement indiqués par “obligatoire” et pas seulement par un astérisque.
  • tous les CAPTCHA sont accessibles
  • Les erreurs de saisie peuvent être lues par les lecteurs d’écran
  • Les saisies réussies peuvent être lues par des lecteurs d’écran.

Sous-titres pour vos vidéos

Si vos vidéos ne contiennent pas de sous-titres précis, les utilisateurs malentendants ne sauront pas ce qu’ils disent. Votre vidéo coûteuse ne sert donc à rien lorsqu’il s’agit d’obtenir une conversion, et vous risquez de rebuter un client potentiel si vous n’insérez pas de sous-titres vidéo.

Utilisez des ancres de lien significatives

Une ancre de lien doit décrire ce qui se passe lorsqu’on clique dessus. Au lieu de “Cliquez ici”, votre texte d’ancrage pourrait donc être “Cliquez ici pour réserver vos billets”.

Respectez l’ordre des titres

Lorsque vous créez des titres et des sous-titres dans votre contenu, utilisez h1 pour le titre principal, h2 pour le titre important suivant, etc. Ne sautez pas dans l’ordre. Par exemple, si vous titrez votre page avec h1, n’utilisez pas h3 pour le premier sous-titre. Utilisez h2. Pour en savoir plus sur les structures de titres, cliquez ici.

Insérer des boutons pour mettre en pause le contenu lu automatiquement

Tous les fichiers vidéo ou audio qui sont lus automatiquement lorsqu’un utilisateur visite votre site doivent contenir un bouton d’arrêt explicite. Les fichiers vidéo et audio peuvent être déroutants pour tout le monde lorsqu’ils arrivent sur un site web, et pas seulement pour les utilisateurs handicapés. Une possibilité de mettre en pause le contenu vidéo ou audio est appréciée par tous.

Le texte Alt doit être précis

Alt-Text, également appelé Alt-Tag ou Alt-Description, est le texte qui accompagne une image. Si l’image ne peut pas être chargée, le texte Alt s’affiche à sa place. En vous assurant que le texte Alt est correct, il est non seulement plus facile pour les utilisateurs de comprendre le contexte de l’image à afficher, mais cela améliore également votre positionnement dans les moteurs de recherche et constitue une bonne pratique de référencement.

Avertir avant d’ouvrir un lien dans un nouvel onglet

L’ouverture d’un nouvel onglet ou d’une nouvelle fenêtre sans avertissement préalable peut être déroutante pour les personnes souffrant de troubles visuels ou cognitifs. S’ils ne peuvent pas voir ce qui se passe dans leur navigateur, ils perdent la possibilité de cliquer sur le bouton “Précédent” et de revenir à la page sur laquelle ils se trouvaient auparavant. Assurez-vous donc que l’option permettant d’avertir les utilisateurs avant l’ouverture d’un nouvel onglet ou d’une nouvelle fenêtre est activée à chaque création de lien.

Ne jamais utiliser de majuscules

Les mots en majuscules peuvent être difficiles à lire pour tout le monde, en particulier pour les personnes ayant des difficultés de lecture. De plus, les lecteurs d’écran lisent souvent le texte en majuscules lettre par lettre et non comme un mot entier, ce qui peut être très déroutant pour les personnes qui dépendent des lecteurs d’écran.

Ne pas utiliser la parallaxe, les animations d’entrée et les vidéos d’arrière-plan

Les mouvements sur l’écran peuvent être déroutants ou difficiles à naviguer pour certains utilisateurs, et pour d’autres, ils peuvent provoquer le mal des transports. Si vous devez utiliser des animations, des parallaxes ou des vidéos sur votre site, vous devez donner aux utilisateurs la possibilité de désactiver l’affichage de ces fonctions sur votre site.

Utiliser une pagination numérique au lieu d’un défilement infini

Les sites qui chargent de plus en plus de contenu au fur et à mesure qu’ils défilent vers le bas sont appelés “défilement infini”, et les concepteurs les adorent parce qu’ils éliminent le besoin de pages. Cependant, le défilement infini est difficile à utiliser sans souris ou pour les utilisateurs qui dépendent d’un lecteur d’écran. Utilisez plutôt une pagination pour que la navigation sur votre site soit facile pour tous.

Fournir des titres précis pour les tableaux

Pour les personnes qui utilisent des lecteurs d’écran et d’autres aides à l’accessibilité, il est indispensable d’organiser correctement vos tableaux. Les outils utilisent des balises dans le code HTML pour délimiter les cellules d’en-tête des cellules de données et indiquer à l’utilisateur leur relation. W3 propose ici quelques directives pour différents types de tableaux.

Les liens de saut et d’ancrage déplacent le focus du clavier

Pour les utilisateurs qui se fient au clavier plutôt qu’à la souris pour faire défiler et cliquer sur les liens, il est important que le focus puisse être déplacé en même temps que les liens de saut ou d’ancrage sur lesquels on a cliqué. Vous pouvez en voir un exemple ici.

Rendre les pop-ups accessibles

Vérifiez d’abord si vous avez besoin d’un popup, car il peut être déroutant pour certains utilisateurs. Si vous optez pour un popup, créez un popup qui soit accessible :

déplacer le focus sur la popup lorsqu’elle s’ouvre et permettre aux lecteurs d’écran d’indiquer qu’une popup s’est ouverte.
Verrouiller le focus de la touche de tabulation sur le popup afin que les utilisateurs ne puissent pas quitter le popup sans le fermer.
S’assurer que le bouton “Fermer” est clairement étiqueté et fonctionne avec un clavier ou la touche “Échap” pour fermer la popup.

Le focus doit être conçu de telle sorte qu’il revienne à sa position précédente sur la page après la fermeture de la fenêtre pop-up, afin que l’utilisateur ne perde pas ce qu’il a fait en ouvrant la fenêtre pop-up.
Faites appel à un concepteur de sites Web professionnel pour vous aider à rendre votre site Web accessible.
Je sais que répondre aux exigences d’accessibilité d’un site Web peut être accablant. Mais elle est essentielle d’un point de vue juridique, éthique et commercial, vous ne pouvez donc pas l’ignorer.

Si vous avez besoin d’aide pour rendre votre site web accessible, remplissez notre bref formulaire de demande de projet et nous pourrons convenir d’un rendez-vous pour discuter de votre projet en détail. Ce n’est qu’un entretien exploratoire – entièrement gratuit et sans engagement. Mais c’est une conversation qui pourrait éviter à votre entreprise d’être poursuivie pour non-conformité, et cela pourrait vous aider à atteindre plus de clients et à convertir plus de prospects.