Pratiques d’accessibilité des sites Web pour le référencement

Pratiques d'accessibilité des sites Web pour le référencement

L’accessibilité du site Web est la pratique éthique consistant à s’assurer que votre site Web peut être compris et consulté facilement par les utilisateurs handicapés. Il y a quatre raisons pour lesquelles vous devriez ajouter l’accessibilité du site Web à votre liste de référencement :

  1. Un aspect important du référencement est l’optimisation pour les personnes, ce qui signifie que nous devrions optimiser pour toutes les personnes, y compris les utilisateurs handicapés. Les sites Web qui ne sont pas optimisés peuvent entraîner moins de recherches et moins de visibilité, car les gens resteront généralement loin d’eux.
  2. Selon le World Wide Web Consortium (W3C), « des études de cas montrent que les sites Web accessibles ont de meilleurs résultats de recherche, des coûts de maintenance réduits et une audience accrue, entre autres avantages ». Cela montre que l’accessibilité du site Web fait partie intégrante du référencement.
  3. Google valorise l’accessibilité des sites Web. Selon leur page Accessibilité, « Tout le monde devrait pouvoir accéder au Web et en profiter. Nous nous engageons à en faire une réalité.
  4. C’est ce qu’il faut faire. Renoncer à l’accessibilité signifie interdire volontairement à des groupes entiers d’accéder à la communication et à l’information et les empêcher de participer pleinement à la société.

Dans cet article de blog, je discuterai de cinq des pratiques de référencement habituelles que nous effectuons et de leur contribution à l’accessibilité du site Web, et j’ajouterai cinq autres pratiques que vous pouvez adopter pour rendre votre site Web accessible à tous.

Noter: J’ai utilisé la technologie d’assistance pour assurer l’exactitude de cet article.

1. Optimiser les balises de titre

La balise de titre est le titre de votre page Web. Il décrit votre page Web aux utilisateurs et aux moteurs de recherche. Cela facilite l’accessibilité du site Web, car pour les utilisateurs malvoyants, la balise de titre est lue par le lecteur d’écran au fur et à mesure du chargement de la page, ce qui en fait leur introduction à votre site Web.

Optimiser les balises de titre pour l'accessibilité du site Web

Par exemple, la photo ci-dessus montre la balise de titre SEO Hacker. En plus de la balise de titre contenant un mot-clé pour lequel nous voulons nous classer, elle signale également aux personnes malvoyantes qu’elles se trouvent sur le site Web d’une agence de référencement philippine.

2. Modifier le slug d’URL pour qu’il soit descriptif et précis

Un slug d’URL non optimisé ou déroutant sera difficile à comprendre non seulement pour les moteurs de recherche, mais aussi pour les gens. Premièrement, il sera très difficile de s’en souvenir. Deuxièmement, ils pourraient être du charabia et, par conséquent, frustrant à écouter. Consultez l’URL de cet article de Forbes :

Modification du slug d'URL Forbes pour l'accessibilité du site Web
Maintenant, imaginez que vous utilisez un lecteur d’écran. Il vous lira l’intégralité de l’URL, donc avant et après avoir écouté la partie importante du slug d’URL, vous devrez également écouter les parties inutiles.

D’un autre côté, il existe des URL descriptives qui sont toujours inutiles car inexactes. En règle générale, assurez-vous que votre URL slug est descriptif et précis pour aider votre utilisateur à savoir qu’il se trouve sur la bonne page de votre site Web. Découvrez cet exemple du billet de blog Leadership Stack :

Optimisé Leadership Stack URL slug pour l'accessibilité du site Web

Sur la base de l’URL ci-dessus, vous savez exactement à quelle page Web vous accéderez. Cela facilite l’accessibilité du site Web car il donne des informations rapides et précises aux utilisateurs, et ils peuvent passer rapidement à d’autres zones de la page.

3. Ajout de texte alternatif aux images

Le texte alternatif est ce que les utilisateurs rencontrent lorsque l’image ne se charge pas correctement. Le texte alternatif est également lu par les lecteurs d’écran, ce qui aide les malvoyants à savoir qu’il y a une image et de quoi il s’agit. Ne pas mettre de texte alternatif sur l’image supprime vos chances d’avoir votre image classée dans la recherche d’images, et cela devient un obstacle pour les utilisateurs malvoyants pour mieux comprendre votre contenu.

Par exemple, sur la photo ci-dessous, l’image a un texte alternatif qui dit « Connaître les signes de l’épuisement professionnel des employés ».

Texte alternatif de l'image de la pile de direction pour l'accessibilité du site Web
Cela signifie que les textes alternatifs doivent être descriptifs non seulement pour le référencement, mais aussi pour l’accessibilité du site Web, car ils aident les malvoyants à comprendre l’image elle-même.

4. Ajouter des titres appropriés au contenu

Les en-têtes du contenu de la structure de votre page pour le moteur de recherche et les utilisateurs. Cette pratique n’est pas seulement bonne pour les classements, mais elle contribue à l’accessibilité du site Web. Mettre des en-têtes appropriés sur votre page garantit l’accessibilité du site Web pour les malvoyants, car les lecteurs d’écran seront en mesure d’interpréter la page avec plus de précision. Par conséquent, cela les aidera non seulement à comprendre l’organisation de votre contenu, mais également à y naviguer plus facilement.

Par exemple, sur la photo ci-dessous, vous verrez deux en-têtes en surbrillance. L’en-tête indiquant « Avant de commencer » est en H2, tandis que l’en-tête « Créez d’abord votre document de conclusions » est en H3. Un utilisateur malvoyant utilisant un lecteur d’écran et un clavier entendra ces textes lus comme « H2, avant de commencer » et « H3, créez d’abord votre document de conclusions. »

Ajout de titres appropriés au contenu pour l'accessibilité du site Web

Règle de base : votre en-tête principal doit être en H1, puis les sous-en-têtes doivent être en H2, H3, etc.

5. Limiter les interstitiels intrusifs

Les interstitiels sont la tactique de marketing d’interruption ennuyeuse où les annonces apparaissent sur la page. Certains interstitiels intrusifs peuvent affecter négativement votre référencement, faisant baisser votre classement. Mais ce n’est pas la seule raison pour laquelle vous devriez limiter ces pop-ups. Outre les inconvénients évidents, ils restreignent également l’accessibilité du site Web.

Les fenêtres contextuelles qui couvrent une page, les vidéos YouTube lues automatiquement dans la barre latérale peuvent faire de votre page un cauchemar pour les utilisateurs ayant des troubles du développement et même de l’anxiété. Si vous êtes stressé lorsque vous avez tous ces éléments « bruyants » sur et autour d’une page Web, que dire de plus aux utilisateurs qui doivent naviguer sur une page à travers le son, ont des problèmes avec les sons soudains ou ceux qui doivent prendre des mesures supplémentaires pour fermer la fenêtre contextuelle ? UPS?

L’un des membres de mon équipe, par exemple, se sent physiquement malade chaque fois qu’il accède à un site Web comportant plusieurs interstitiels, car ils déclenchent une surcharge sensorielle. En conséquence, ils évitent autant que possible ces sites pour éviter de déclencher leur anxiété.

Limiter les interstitiels peut aider à l’accessibilité du site Web, car tous les types d’utilisateurs auront plus de facilité à accéder à votre site Web et à y rester.

6. Rendre votre site Web convivial pour les lecteurs d’écran

Il existe des cas dans lesquels la mise en page du contenu de notre page Web change soudainement en raison d’annonces et d’autres éléments de notre page. C’est ce qu’on appelle un décalage de mise en page cumulatif ou CLS.

Ces changements de disposition peuvent être frustrants pour les utilisateurs malvoyants. Comme ils dépendent des lecteurs d’écran, ces changements de mise en page peuvent leur faire manquer du contenu ou être confus en raison du fait que le lecteur d’écran change soudainement ce qu’ils lisent.

Les lecteurs d’écran tels que NVDA ne se contentent pas de lire le contenu de la page, ils lisent également spécifiquement ce sur quoi le curseur de l’utilisateur pointe. Ainsi, si le contenu de la zone vers laquelle pointe le curseur se déplace soudainement, l’utilisateur devra prendre des mesures supplémentaires pour déterminer où il se trouvait à l’origine dans votre page.

Pour l’accessibilité du site Web, assurez-vous que votre page Web dispose d’une zone réservée au contenu dynamique, de dimensions spécifiques pour les images et les vidéos et de polices optimisées. Vous pouvez en savoir plus en consultant notre tutoriel CLS ici.

7. Rendre le texte lisible

Il y a deux aspects de l’esthétique du texte sur lesquels nous devons nous concentrer afin de pouvoir les rendre plus lisibles.

1. Police et taille de police

Avez-vous déjà atterri sur un site Web où vous pouviez à peine lire le texte, soit parce qu’il était trop petit ou trop stylisé ? C’est une mauvaise pratique en général de rendre le texte de votre site Web difficile à lire car cela fait que les prospects potentiels quittent votre page avec frustration. Lorsque nous créons nos sites Web, nous voulons qu’ils soient aussi faciles à naviguer et à comprendre que possible. Les polices trop stylisées et les petites tailles de police vont à l’encontre de ce principe.

D’un autre côté, certaines personnes malvoyantes qui n’utilisent pas de lecteurs d’écran peuvent toujours avoir des problèmes avec votre site même si la taille de la police est suffisamment grande pour les autres utilisateurs. Dans ce cas, nous voulons nous assurer que notre site Web ne se brise pas lorsque les utilisateurs zooment.

Les blogs SEO Hacker en sont un bon exemple. Je vais vous montrer mon article récemment publié sur la réalisation d’un audit SEO on-page.

Police et taille de police du blog SEO Hacker pour l'accessibilité du site Web

Voici à quoi ressemble généralement un article de blog lorsque nous cliquons dessus. Mais si vous appuyez simultanément sur « CTRL » et « + » pour zoomer :

Zoom sur le blog SEO Hacker

Voici à quoi ressemble le billet de blog avec un grossissement de 150%. Il n’est pas nécessaire de naviguer à gauche et à droite à l’aide d’une barre de défilement car tout ce dont vous avez besoin se trouve juste devant vous.

Pour rendre la conception responsive, vous pouvez ajouter les éléments suivants à vos pages Web :

Vous pouvez le voir dans notre article de blog. Faites un clic droit puis choisissez “Inspecter” et recherchez “fenêtre”.

2. Jeu de couleurs

Certaines personnes essaient de faire preuve de créativité avec leur palette de couleurs, mais se retrouvent avec un site Web qui utilise un faible contraste entre le texte et l’arrière-plan. Cela rend la lecture difficile à la fois pour les personnes voyantes et malvoyantes. Les concepteurs doivent également se concentrer sur les CTA et les liens et s’assurer qu’un contraste de couleurs approprié est utilisé pour les rendre faciles à repérer.

Les couleurs recommandées seraient toujours du texte noir sur fond blanc, mais avec les CTA, nous devons être plus créatifs. La règle de base est d’éviter les combinaisons de rouge et de vert pour les rendre lisibles pour les personnes daltoniennes.

Par exemple, consultez ce CTA du podcast Leadership Stack.

Schéma de couleurs de la pile de leadership pour l'accessibilité du site Web

En plus d’être clair en termes de message, le contraste du texte noir sur fond jaune fait ressortir l’appel, le rendant plus facile à voir et à lire.

8. Faciliter la navigation au clavier

Votre site Web est peut-être esthétique, mais est-il facile à naviguer pour les personnes handicapées moteur ? Un test simple que vous pouvez faire est de naviguer sur votre site Web à l’aide de votre clavier seul. Les touches les plus couramment utilisées sont la tabulation et les touches fléchées. Lorsque vous testez votre site Web, posez-vous les questions suivantes :

  1. La navigation sur votre page Web prend-elle trop de temps ?
  2. Y a-t-il des éléments interactifs auxquels vous ne pouvez pas accéder ?
  3. Est-il difficile de dire où vous êtes sur la page ?

Si votre réponse est oui à l’un d’entre eux, vous devez optimiser votre navigation pour l’accessibilité du site Web.

La première consiste à ajouter un bouton « passer la navigation » ou « passer au contenu principal » en haut de la page pour aider les utilisateurs utilisant uniquement le clavier à ignorer les divers liens de navigation lorsqu’ils n’en ont pas besoin. Ensuite, assurez-vous que toutes les listes déroulantes sont navigables à l’aide des touches fléchées et que les différents boutons et liens sont accessibles par le bouton de tabulation. Enfin, ajoutez « le focus clavier » pour aider les utilisateurs à voir où ils se trouvent sur la page. Cela pourrait être un point culminant comme dans la barre de navigation de SEO Hacker :

SEO Hacker Clavier de navigation

Ou cela pourrait être une ligne pointillée évidente autour du lien.

9. Ajouter des sous-titres aux vidéos ou joindre une transcription

Les vidéos peuvent rendre votre contenu dynamique, mais certains aménagements doivent être pris en compte pour l’accessibilité du site Web. Certains utilisateurs de notre site sont soit malentendants, soit ont des problèmes sensoriels. Dans ce cas, vous pouvez faire deux choses : la première consiste à ajouter des sous-titres à vos vidéos et la deuxième consiste à créer une transcription.

Ajouter des sous-titres à la vidéo Leadership Stack

Il existe une variété d’options que vous pouvez choisir pour créer une transcription. Mon choix pour faire des transcriptions pour des vidéos qui sont déjà publiées et qui manquent de sous-titres est d’utiliser la fonction de dictée dans Microsoft Word. Lorsque la vidéo est à moi, mon autre option est de créer un script avant de réaliser la vidéo et de la joindre à la page en tant que transcription.

Un bon exemple de ceci est dans les cours en ligne tels que Google Analytics Academy où les transcriptions sont sous la forme de liens ou de pièces jointes PDF.

10. Éviter les vidéos avec des lumières clignotantes

Enfin, nous devons nous assurer que nos vidéos sont agréables à regarder. Certains utilisateurs ont une photosensibilité et des lumières clignotantes peuvent déclencher une crise d’épilepsie ou une crise. Les avertissements de déclenchement peuvent être une bonne idée, mais cela signifie toujours que certains utilisateurs ne pourront pas accéder au contenu de votre vidéo. Donc, pour revenir au principe de l’accessibilité des sites Web et aussi par sécurité, évitez simplement de mettre des lumières clignotantes sur vos vidéos.

Clé à emporter

L’accessibilité des sites Web est une pratique éthique que les développeurs Web doivent adopter pour s’adapter à toutes sortes de personnes. Certaines de nos pratiques de référencement contribuent déjà à l’accessibilité des sites Web pour tous, mais il existe d’autres pratiques que nous pouvons ajouter à notre arsenal pour garantir que nos sites Web sont conviviaux pour les utilisateurs handicapés.

Ce guide vous a-t-il aidé avec l’accessibilité du site Web ? Faites-moi part de vos réflexions en commentant ci-dessous.