Ce que vous devez savoir sur l’accessibilité + le référencement, première partie : une introduction

[Estimated read time: 4 minutes]

Connaissez-vous quelqu’un qui est malvoyant? Peut-être qu’ils ont une basse vision ou un daltonisme, ou qu’ils sont complètement aveugles. Pensez à la façon dont ils utilisent Internet. Fermez les yeux, ou au moins louchez vraiment dur, et essayez de trouver les nouvelles du jour ou d’interagir avec vos amis sur Facebook. C’est un défi auquel beaucoup d’entre nous ne pensent pas tous les jours, mais une partie de ce que nous faisons dans le domaine du référencement peut affecter l’expérience que les personnes ayant une déficience visuelle ont lorsqu’elles visitent une page.

Accessibilité et Internet

Les internautes malvoyants peuvent naviguer et utiliser le Web à l’aide de lecteurs d’écran tels que VoiceOver ou Jaws. Les lecteurs d’écran, tout comme les robots d’exploration des moteurs de recherche, s’appuient sur les signaux du code pour déterminer la structure et le contexte de ce qu’ils explorent. Le chevauchement entre ce que les robots de recherche recherchent et interprètent et ce que les lecteurs d’écran recherchent et interprètent est faible, mais l’idée est la même : où se trouvent les éléments de cette page et comment puis-je les comprendre ?

Le chevauchement SEO

Bien qu’il soit important de comprendre où le référencement et l’accessibilité (a11y) se chevauchent afin d’optimiser correctement pour les deux, il est également important de noter que l’optimisation pour l’un n’est pas nécessairement similaire à l’optimisation pour l’autre. En d’autres termes, si vous avez optimisé une page pour les moteurs de recherche, cela ne signifie pas nécessairement que vous l’avez rendue accessible, et vice versa.

Récemment, l’expert en accessibilité Web Karl Groves a écrit un article intitulé The Accessibility & SEO Myth. M. Groves connaît parfaitement le monde de l’accessibilité et sait que l’optimisation pour l’accessibilité, qui va bien au-delà de l’optimisation pour les malvoyants, est globalement très différente et beaucoup plus complexe (strictement d’un point de vue technique) que l’optimisation pour la recherche. moteurs. Il a raison – que malgré les façons dont SEO et a11y se chevauchent, a11y est un tout autre jeu de balle. Mais si tu comprendre le chevauchement, vous pouvez optimiser avec succès pour les deux.

Voici quelques exemples où le référencement et l’accessibilité peuvent se chevaucher :

• Transcription vidéo
• Légende des images
• Attributs alternatifs de l’image
• Balises de titre
• Balises d’en-tête (H1, H2, etc.)
• Texte d’ancrage du lien
• Plans de site, table des matières et/ou fil d’Ariane sur site
• Commande de contenu
• Contraste de la taille et des couleurs du texte
• HTML sémantique

Si vous développez la page vous-même, je vous mets au défi d’en savoir plus sur les nombreuses choses que vous pouvez faire pour l’accessibilité au-delà des points où cela chevauche le référencement, comme apprendre à connaître les attributs ARIA. Jetez un coup d’œil aux directives d’accessibilité du contenu Web du W3C et vous verrez qu’il existe des considérations d’accessibilité beaucoup plus complexes que ce que nous considérons généralement pour le référencement technique. Si vous pensez que le référencement technique est amusant, attendez d’en avoir une bonne dose.

Optimiser pour l’accessibilité ou le référencement ?

Il y a de fortes chances que si vous optimisez l’accessibilité, vous couvrez probablement vos bases pour les optimisations techniques où l’accessibilité et le référencement se chevauchent. MAIS, cela ne fonctionne pas toujours dans l’autre sens, selon les tactiques de référencement que vous adoptez.

Heureusement, le site Converse a mis en place un joli attribut alt descriptif !

Considérez un lecteur d’écran atteignant l’image d’une paire de chaussures Chuck Taylor All-Star noires pour femmes et lisant son attribut alternatif comme “Chuck Taylor All-Stars noires pour femmes acheter des Chucks en ligne Chuck Taylor All-Stars pour femmes à vendre”. Ennuyeux, n’est-ce pas ? Ou comparez ces titres de page avec le SEO et l’accessibilité à l’esprit : « Calculez votre déclaration de revenus » par rapport à « Calculateur de taxes en ligne | Estimateur de déclaration de revenus | Remboursement/remise d’impôt ». Imaginez que vous venez de rencontrer cette page sans pouvoir voir le contenu. Lequel décrit le plus précisément et clairement ce que vous pouvez attendre de cette page ?

Bien qu’il soit bon de savoir qu’une bonne optimisation technique des moteurs de recherche affectera la façon dont quelqu’un utilisant un lecteur d’écran peut contextualiser votre site, il est également important de comprendre (1) que ces deux industries d’optimisation sont, à un niveau plus large, assez différentes, et (2 ) que ce que vous faites pour le référencement où le référencement et a11y se chevauchent affectera la façon dont certains visiteurs peuvent (ou ne peuvent pas) comprendre votre site.

Pour la Journée mondiale de sensibilisation à l’accessibilité le 19 mai, je collaborerai avec des experts en a11y sur un article qui entrera plus en détail sur les aspects de SEO + a11y à prendre en compte et comment optimiser pour les deux. Je serai sûr de trouver autant d’exemples que possible – si vous en avez de bons, n’hésitez pas à les partager dans les commentaires (et merci d’avance).

Articles de blog dans cette série :

1. Optimisation pour l’accessibilité + SEO : Chevauchements de la structure du site et de la page
2. Optimisation pour l’accessibilité + SEO : mise en forme et chevauchements de liens
3. Optimisation pour l’accessibilité + SEO : images, vidéo et éléments non textuels

Ressources et outils pédagogiques

En attendant, pour en savoir plus sur l’accessibilité, consultez quelques ressources intéressantes :

• Techniques W3C pour WCAG 2.0
• Attributs ARIA
• Liste des outils d’évaluation de l’accessibilité Web
• Outils d’accessibilité Web et événements du groupe Paciello, une agence d’accessibilité bien connue
• Consultez également le blog du groupe Paciello. Ce sont des morceaux digestibles de bonnes informations
• Le blog « jouets css pour les développeurs Web professionnels » de Ted Drake, riche en développement accessible et en infographies accessibles !