Aller au contenu

Quelques directives simples pour améliorer l’accessibilité de votre site Web

5 icônes représentant l'accessibilité du Web

L’accessibilité du Web est de plus en plus mise de l’avant. De nos jours, beaucoup d’utilisateurs et d’utilisatrices ayant des besoins d’accessibilité utilisent Internet pour différentes raisons (acheter des produits, consulter des sites d’informations, aller sur les réseaux sociaux, etc.). Bien qu’engager un spécialiste en accessibilité est essentiel afin d’assurer la mise en œuvre de bonnes pratiques d’accessibilité, il y a quelques petites étapes simples qui pourraient régler une partie des problèmes courants.

Voici donc 5 directives simples et pratiques qui permettront d’améliorer l’accessibilité de n’importe quel site Web. La mise en œuvre de ces lignes directrices améliorera l’accessibilité globale pour tous les utilisateurs et toutes les utilisatrices.

Textes alternatifs

Chaque image qui transmet des informations doit avoir un texte alternatif approprié et spécifique afin qu’un lecteur d’écran puisse dire ce qui se trouve sur l’image. L’attribut alternatif (attribut « alt ») permet de fournir un texte alternatif à un support visuel quand celui-ci ne peut être vu. Cet attribut est essentiel pour les utilisateurs et les utilisatrices de lecteurs d’écrans, puisque le texte alternatif permet de donner une description concrète de l’image. Ce texte peut même s’afficher lorsque l’image n’arrive pas à charger.

Le texte alternatif est essentiel à la compréhension de l’information. Son contexte est tout autant primordial. Il doit également être court, clair et concis. Il doit aussi présenter le contenu et donner la fonction de l’image. Par ailleurs, les équivalents textuels renforcent également la visibilité du site Web dans les moteurs de recherche.

Cependant, il faut faire attention, puisque ce ne sont pas toutes les images qui doivent contenir du texte alternatif. En effet, l’image doit avoir une réelle valeur informative. Si des images n’ont qu’une valeur décorative, il n’est pas nécessaire d’y inclure du texte alternatif, car elles n’aident pas à comprendre le texte et n’ont donc aucune importance.

Illustration représentant une image sur un ordinateur avec une balise pour indiquer le texte alternatif
Source: Design102

Couleurs

L’une des premières choses à considérer sur un site Web, ce sont ses couleurs. Au Canada, environ 2,6 millions de personnes sont daltoniennes. En ce moment, le daltonisme toucherait environ 8 % des hommes et 1 % des femmes. Il existe plusieurs types de daltonismes, tels que l’achromatopsie, la deutéranopie, la protanopie, la tritanopie, etc. Ainsi, lors du codage et de la conception de votre site, vous devez garder ce facteur à l’esprit.

Un moyen simple de vérifier si des couleurs combinées sont problématiques, ce serait de tester votre site en utilisant des utilitaires qui peuvent être trouvés en ligne. Contrast Checker permet de mettre deux couleurs ensemble (premier-plan et arrière-plan), puis de vérifier si elles sont accessibles. Si le site est déjà en ligne, le faire vérifier par Color Contrast Accessibility Validator permettra d’afficher les problèmes de contraste de couleur d’une page Web (selon les directives WCAG 2.1).

Le maintien d’un contraste de couleurs élevé est l’idéal. Cette directive n’est pas seulement destinée aux personnes daltoniennes, mais elle est également très bénéfique pour les utilisateurs réguliers et les utilisatrices régulières. Les directives d’accessibilité Web suggèrent de conserver 4:5:1 comme rapport de contraste minimum. Pour un texte de taille standard, le rapport idéal serait de 7:1.

Couleurs vues selon différents types de daltonisme
Source: Ergophile

Liens

Avoir des liens utilisables est une considération essentielle pour beaucoup de sites Web. Ceux-ci permettent de naviguer vers d’autres pages du même site Web ou de consulter des documents connexes et des sites externes. Avoir des liens utilisables permet à ce que les utilisateurs puissent faire davantage de recherche d’informations ou peuvent même acheter des produits et des services.

Les liens contextuels de votre site Web doivent être descriptifs. Pour rappel, plusieurs personnes ayant des besoins d’accessibilité utilisent des lecteurs d’écran. La plupart des lecteurs d’écran offrent la possibilité de naviguer sur une page Web en sautant à travers les liens. Pour tous les liens qui sont du texte, l’utilisateur et l’utilisatrice n’entendra que le mot ou la phrase auquel il est associé, quel que soit le contenu auquel il mène.

Ainsi, les instructions génériques, telles que « plus », « en savoir plus », « cliquez ici » et « en savoir plus », ne fournissent aucune information sur le contenu qu’ils trouveront lorsqu’ils cliqueront sur ce lien. Les utilisateurs et les utilisatrices identifient et comprennent aisément les liens. Il n’est donc pas nécessaire de spécifiquement leur dire de cliquer dessus. Un site Web sera plus accessible pour les personnes ayant des besoins d’accessibilité si celui-ci contient des liens descriptifs, tels que « Cliquez ici pour en savoir plus sur cet article » ou « En savoir plus sur l’article ».

Plusieurs autres règles devraient être appliquées aux liens, soit le fait de ne pas ressembler à des boutons s’ils ne sont pas cliquables, des fenêtres qui s’ouvrent dans la même fenêtre s’ils renvoient vers d’autres pages Web, etc.

Trois liens vers des boutons intitulés Next
Source: Freepik

Navigation

Il est toujours conseillé de créer une page Web structurée de manière logique et intuitive à parcourir. L’introduction d’indices hiérarchiques supplémentaires, qui indiquent le degré variable d’importance du contenu grâce à l’utilisation d’un style adéquat, est également importante. Cela aide l’utilisateur et l’utilisatrice à différencier le contenu principal d’une page Web, les titres principaux et les sous-titres. Cela est très facile à utiliser grâce à une utilisation appropriée du balisage HTML et du style CSS. En effet, le simple ajout d’éléments HTML (ex. : <h1>, <div>, <li>, etc.) permet une bonne navigation du site Web quand ils sont bien utilisés.

L’utilisation d’attributs peut être bien utile pour un site Web. Par exemple, l’attribut « id » définit un identifiant qui doit être unique pour l’ensemble du document. Son but est de pouvoir identifier un élément lorsqu’on crée un lien et qu’on souhaite le manipuler avec un script ou qu’on le met en forme avec CSS. Dans le cas des formulaires présents sur une page Web, l’utilisation de l’attribut « tabindex » est importante, puisqu’il permet de faciliter le flux de remplissage. Cela peut être particulièrement utile pour les utilisateurs et les utilisatrices ayant des besoins particuliers en matière de motricité fine, car ils nécessitent des mouvements précis sur les boutons radio et les cases à cocher.

Icônes représentant la navigation sur un site Web avec une loupe
Source: Exposure

Tester

Tester l’accessibilité de votre site Web est primordial pour voir si celui-ci est bel et bien accessible. Il est important de faire des tests à chaque phase de la conception du projet. En effet, plus le site est souvent testé, plus le risque de concevoir un mauvais produit diminue. Il est très important de tester tous les produits avant sa mise en marché pour à la fois contribuer à son succès, mais aussi pour s’assurer qu’il correspond bien à ce dont les utilisateurs et les utilisatrices ont besoin.

Différents outils automatisés peuvent aider à effectuer une vérification globale du site Web ou de certaines pages en fonction des critères de réussite des directives sur l’accessibilité. Certains outils permettent de préciser les directives à respecter et offrent des recommandations sur la façon de régler les problèmes. Parmi les outils qui peuvent aider à identifier les problèmes d’accessibilité en analysant le code du site Web, on y retrouve notamment axe DevTools et WAVE.

Toutefois, il est aussi important de faire des tests manuels réalisés par des testeurs expérimentés qui utilisent le produit de la même façon que les utilisateurs finaux. Il est donc important de tester manuellement l’expérience d’un utilisateur sur le site Web avec des lecteurs d’écran. Il existe de nombreux lecteurs d’écran qui lisent le contenu et les composants de l’interface utilisateur, dont NVDA et JAWS. Un autre test manuel important à réaliser est le test de navigation par touche de tabulation (TAB), qui est une technique simple utilisée pour évaluer l’opérabilité d’une page Web au moyen d’un clavier. À l’aide du curseur, le testeur doit sélectionner le début d’une page Web et appuyer plusieurs fois sur la touche de tabulation afin de se déplacer dans les interactions.

Machine avec un scientifique servant à vérifier les réussites et les échecs
Source: Real Python

Sources :

Laisser un commentaire

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