L’impact de l’accessibilité sur le référencement

Aujourd’hui l’accessibilité n’est plus seulement une faveur, mais un droit. Au niveau mondial, environ 15 % de la population souffre d’une forme ou d’une autre de handicap. Au total (comme, par exemple, les personnes âgées), environ un quart de la population mondiale bénéficie d’un site web accessible. Ne pas prendre cela au sérieux, c’est se tirer une balle dans le pied.

Forte de mon expérience de travail avec des organisations pour rendre leurs sites Web plus accessibles, je souhaite vous expliquer comment j’optimise ces sites pour mes clients. De la compréhension des différents besoins et défis des utilisateurs à l’application de techniques et d’outils pratiques qui rendent n’importe quel site plus accessible.(1)

Comment l’accessibilité affecte-t-elle le référencement ?

L’accessibilité d’un site web est un aspect important qui a un impact certain sur le référencement (plus que vous ne le pensez) :

1. Expérience de l’utilisateur : les sites web accessibles offrent une meilleure expérience à l’utilisateur, ce qui peut se traduire par un taux de rebond plus faible et une durée de visite plus longue. Google et les autres moteurs de recherche l’apprécient, et cela peut contribuer à un meilleur classement.
2. Réactivité mobile: les sites web qui fonctionnent bien sur les appareils mobiles sont souvent mieux classés par les moteurs de recherche. L’accessibilité mobile étant un élément important de l’accessibilité globale, elle joue un rôle dans le référencement.
3. Vitesse du site: un site accessible est souvent optimisé pour la vitesse. Des temps de chargement plus rapides contribuent à améliorer l’expérience de l’utilisateur, ce qui peut avoir un impact positif sur le classement.
4. Textes alt pour les images: l’utilisation de textes alt permet de décrire les images pour les personnes utilisant un lecteur d’écran. Cela n’est pas seulement bon pour l’accessibilité, mais aide également les moteurs de recherche à comprendre le contenu de l’image.
5. HTML sémantique: un HTML bien structuré rend non seulement un site web plus accessible, mais aide également les moteurs de recherche à mieux comprendre le contenu. L’utilisation correcte des titres (H1, H2, etc.) et d’autres éléments sémantiques peut contribuer au référencement.
6. Accessibilité des liens: des textes de liens clairs et descriptifs facilitent la navigation des utilisateurs et fournissent également un contexte aux moteurs de recherche.
7. Conformité et amendes: dans certaines juridictions, les sites web qui ne respectent pas les normes d’accessibilité peuvent faire l’objet d’amendes et de sanctions.
8. Duplication du contenu: les sites web accessibles évitent souvent de dupliquer inutilement le contenu, par exemple en proposant des versions mobiles distinctes des pages. Cela permet d’éviter les problèmes de contenu dupliqué, ce qui est bénéfique pour le référencement.

En général, l’amélioration de l’accessibilité d’un site web peut conduire à une meilleure expérience utilisateur, ce qui se traduit par des signaux positifs pour les moteurs de recherche (ce n’est pas pour rien que Chrome comporte un test d’accessibilité). Un site accessible peut attirer plus de trafic, retenir les utilisateurs plus longtemps et, en fin de compte, contribuer à un meilleur classement dans les résultats de recherche.(2)(3)

Comment Lighthouse teste-t-il l’accessibilité ?

Chrome DevTools propose un audit d’accessibilité via l’outil Lighthouse, qui permet d’évaluer une page sur différents aspects de l’accessibilité. Voici quelques-uns des aspects sur lesquels Chrome DevTools peut effectuer des tests :

1. Description des images: vérifiez que toutes les images sont accompagnées d’un texte alt décrivant le contenu de l’image.
2. Rapport de contraste: il s’agit d’évaluer si le texte est suffisamment contrasté par rapport à l’arrière-plan, ce qui est important pour la lisibilité.
3. Éléments du formulaire : vérifier que les champs du formulaire sont correctement libellés et décrits afin que les utilisateurs comprennent quelles informations sont requises.
4. Navigation au clavier: il s’agit de vérifier si le site web est navigable à l’aide d’un clavier, sans avoir recours à une souris.
5. Structure du document: analyse de la structure HTML sémantique, y compris l’utilisation correcte des titres, des rôles et d’autres éléments HTML importants.
6. Fonctionnalités Aria: permet de vérifier si les fonctionnalités ARIA (Accessible Rich Internet Applications) ont été correctement mises en œuvre afin d’améliorer l’accessibilité pour les lecteurs d’écran.
7. Zoom et extensibilité: vérifiez si les utilisateurs peuvent zoomer et extensifier le texte jusqu’à 200 % sans perte de fonctionnalité ou de contenu.
8. Attributs de langue: vérifier que la langue correcte est définie dans le code HTML, ce qui aide les lecteurs d’écran à lire correctement le contenu.
9. Mise en forme des tableaux : évaluer si les tableaux sont correctement mis en forme avec des titres et des cellules de données appropriés afin que les informations soient présentées de manière logique.
10. Audio et vidéo: tests de présence de sous-titres, de transcriptions ou d’autres alternatives au contenu multimédia.
11. Gestion de la focalisation: évaluer si les éléments focalisables ont une séquence logique et s’il existe des indicateurs de focalisation visibles.
12. Cécité aux couleurs: certains outils peuvent simuler l’aspect d’une page pour des utilisateurs souffrant de différents types de daltonisme, bien que cela ne soit pas directement possible dans Chrome DevTools.
13. Temps et animations: vérifiez si le site propose des limites de temps et si les mouvements et les animations peuvent être interrompus ou arrêtés.
14. HTML obsolète ou incorrect: vérifiez la présence d’éléments HTML obsolètes ou mal utilisés susceptibles d’affecter l’accessibilité.

Lighthouse, dans Chrome DevTools, offre un moyen standardisé et complet d’identifier ces problèmes d’accessibilité et d’autres, et propose souvent des suggestions et de la documentation sur la manière de résoudre les problèmes. Il s’agit d’un outil précieux pour les développeurs qui cherchent à améliorer l’accessibilité de leurs sites web.(4)

Solutions d’accessibilité et ressources nécessaires

Vous trouverez ci-dessous un tableau présentant certains points clés de l’accessibilité, leur priorité, les solutions possibles et les ressources nécessaires. Les priorités peuvent varier en fonction des besoins spécifiques d’un site web et de ses utilisateurs, mais ce tableau donne un aperçu général.(5)

Objet	Priorité	Solution	Ressources
Description des images	Haut	Ajoutez à toutes les images un texte alt décrivant le contenu.	Connaissances en HTML/CSS, outils de lecture d’écran pour les tests.
Rapport de contraste	Haut	Ajustez les couleurs pour respecter le rapport de contraste minimum.	Outils de contrôle du contraste des couleurs, tels que le Contrast Checker de WebAIM.
Éléments du formulaire	Haut	Étiqueter clairement les champs du formulaire et utiliser les éléments HTML appropriés.	Connaissances en HTML/CSS, outils de test d’accessibilité tels que AXE.
Navigation au clavier	Haut	Veillez à ce que tous les éléments interactifs soient accessibles au clavier.	Tests avec le clavier et les outils de développement du navigateur.
Structure du document	Moyen	Utiliser le langage HTML sémantique comme des titres et des listes corrects.	Connaissances en HTML/CSS, outils de test sémantique.
Caractéristiques d’Aria	Moyen	Utiliser les rôles et attributs ARIA lorsque cela est nécessaire et approprié.	Spécification ARIA, outils de test de lecteurs d’écran.
Zoom et évolutivité	Moyen	Veillez à ce que le texte et le contenu puissent être agrandis sans perte de fonctionnalité.	Test de navigateur, émulateur mobile.
Attributs linguistiques	Faible	Définissez la langue principale de la page à l’aide de l’attribut lang.	Connaissance du langage HTML.
Format du tableau	Faible	Utilisez les éléments de tableau appropriés tels que <thead>, <th>, etc.	Connaissances en HTML/CSS.
Audio et vidéo	Moyen	Fournir des sous-titres, des transcriptions ou d’autres alternatives pour les contenus multimédias.	Logiciel d’édition vidéo, outils de transcription.
Gestion des priorités	Moyen	Fournir une séquence logique de mise au point et des indicateurs de mise au point visibles.	Tests du clavier, outils de développement du navigateur.
Le daltonisme	Faible	Tester et concevoir pour différents types de daltonisme.	Outils de simulation du daltonisme.
Timing et animations	Faible	Proposez des options permettant de mettre en pause ou d’arrêter les mouvements et les animations, et donnez suffisamment de temps pour les actions limitées dans le temps.	Connaissance de JavaScript/CSS, tests de contrôle d’animation.
HTML obsolète/incorrect	Faible	Remplacer ou mettre à jour les éléments HTML obsolètes ou mal utilisés.	Connaissances en HTML/CSS, outils de validation tels que W3C Validator.

Il est important de noter que l’accessibilité n’est pas un projet ponctuel, mais un processus continu. Des tests et des mises à jour réguliers, ainsi que la participation d’utilisateurs ayant des besoins différents, peuvent contribuer à rendre un site web aussi accessible que possible.

Ce que je constate souvent chez mes clients, c’est que les mêmes erreurs se répètent. En particulier, les questions relatives aux composants qui sont souvent modifiés sur un site web :

• La structure de l’HTML ;
• les questions relatives aux images ;
• des ajustements en matière d’utilisabilité mobile ;
• la lisibilité des textes ;
• le contraste (couleurs).

Ces éléments sont souvent négligés dans une organisation. En particulier lors de modifications « rapides » du site web, cela peut mal se passer.

Commencer à rendre votre site web accessible

Travailler sur l’accessibilité d’un site web peut être un processus complexe, mais il peut être structuré à l’aide d’un cadre. Voici un cadre général qui peut être utilisé pour améliorer l’accessibilité d’un site web :(6)

1. Compréhension et sensibilisation

Objectif: s’assurer que toute l’équipe comprend ce que signifie l’accessibilité et pourquoi elle est importante.

• Formation et éducation: former les développeurs, les concepteurs et les créateurs de contenu aux normes et techniques d’accessibilité.
• Recherche: étudier les besoins et les exigences spécifiques de vos utilisateurs, y compris les obligations légales.

2. Planification

Objectif: définir des objectifs clairs et élaborer un plan pour les atteindre.

• Politique: élaborer une politique d’accessibilité, y compris des normes telles que les WCAG.
• Priorités et objectifs: identifier les domaines prioritaires et fixer des objectifs mesurables.
• Outils et ressources: choisir les outils, les technologies et les ressources qui seront utilisés.

3. Conception et développement

Objectif: intégrer l’accessibilité à chaque étape de la conception et du développement.

• Conception accessible: utiliser des modèles de conception et des schémas de couleurs accessibles.
• Code sémantique: écrire du HTML et du CSS propres et sémantiques.
• Adaptation au clavier et aux lecteurs d’écran : garantir une accessibilité totale au clavier et tester les lecteurs d’écran.
• Réactivité: garantir de bonnes performances sur différents appareils et tailles d’écran.

4. Essais

Objectif: vérifier que le site répond aux normes d’accessibilité fixées.

• Tests automatisés: utiliser des outils tels que Lighthouse pour tester les problèmes courants.
• Tests manuels: effectuer des tests manuels, tels que des tests de navigation au clavier et des tests avec lecteur d’écran.
• Tests auprès des utilisateurs: faire participer au processus de test des utilisateurs réels ayant des besoins différents.

5. Mise en œuvre et maintenance

Objectif: lancer le site web accessible et continuer à le maintenir.

• Mise en œuvre: mise en service du site web accessible testé et validé.
• Contrôle et mise à jour continus: contrôle et mise à jour réguliers du site web en fonction des normes et technologies les plus récentes.
• Boucle de retour d’information: mettre en place un système de retour d’information de la part des utilisateurs pour permettre une amélioration continue.

6. Documentation et formation

Objectif: documenter tous les processus et former l’équipe pour que l’accessibilité devienne une partie intégrante de la culture organisationnelle.

• Documenter les processus et les lignes directrices: créer des manuels et de la documentation pour une utilisation future.
• Formation et sensibilisation: continuer à former et à sensibiliser les membres de l’équipe à l’importance de l’accessibilité.

Fermeture

Ce cadre est un guide pour travailler sur l’accessibilité et peut être adapté aux besoins et défis uniques de chaque projet. En faisant de l’accessibilité une partie intégrante de l’ensemble du processus, les organisations peuvent garantir une expérience utilisateur inclusive pour tous.

Conclusion

Comme indiqué dans cet article : L’accessibilité d’un site web joue un rôle important dans son référencement et sa conversion. Ne pas l’optimiser, c’est aussi ne plus « séduire » un quart de vos visiteurs (voire plus pour certains sites).

Utilisez les outils standard de Lighthouse pour dresser une carte complète. L’optimisation ponctuelle ne permet souvent pas d’obtenir le résultat escompté. Je considère qu’il s’agit d’un processus pour chaque projet de référencement (parce que sinon, on en reviendra au même niveau six mois plus tard). Bonne chance !