Comprendre et agir en faveur de l’accessibilité de votre site web (et de son SEO)

  • 02 septembre 2021
  • Raphael Arzberger

La mise en conformité d’un site pour le rendre accessible a des avantages multiples. Non seulement vous pouvez toucher un public plus large mais vous potentialisez également votre visibilité sur Google. Dans cet article, nous vous proposons de comprendre ce qu’est l’accessibilité web, les bonnes pratiques à mettre en œuvre, comment vérifier l’accessibilité de son site et découvrir les avantages SEO qui découlent de sa mise en place.

Qu’est-ce que l’accessibilité web ? 

Le principe de l’accessibilité web implique que les outils et les technologies soient développés de façon à ce que les personnes handicapées puissent les utiliser.

Définition de l’accessibilité 

Un site web accessible est un site dont le contenu est accessible à tous: valides, seniors et personnes en situation de handicap. Déficience auditive, visuelle, troubles cognitifs ou mobilité, autant de handicaps qui touchent aujourd’hui près de 18% de la population qui, sans prise en compte spécifique se voient privés d’un accès optimal au web.

Un site accessible se devra donc d’être:

  • perceptible : accentuer une différentiation des éléments entre eux (textes/images/boutons) et fournir une alternative textuelle aux images ;
  • utilisable : le contenu doit être accessible tant grâce à une souris ou assimilé (trackpad par exemple) mais également grâce au clavier via une navigation par tabulation ;
  • compréhensible : les textes doivent être lisibles en permanence ;
  • robuste : le contenu doit être accessible quel que soit le support sur lequel il est consulté.

 

Qui sont les personnes ciblées par l’accessibilité numérique ? 

Il faut garder à l’esprit que l’accessibilité n’est pas uniquement une histoire de handicap : l’accessibilité concerne toutes les déficiences qu’elles soient temporaires ou non, concerne également les handicaps cognitifs et neurologiques, mais également les valides dans certains usages (mobile, ordinateur portable sans souris, visibilité réduite etc…)

 

Les normes internationales pour l’accessibilité du web 

Le W3C a mis en place un groupe de réflexion (la Web Accessibility Initiative ou WAI) qui a posé les bases de l’accessibilité web et les premières recommandations:

WCAG: Web Content Accessibility Guidelines (https://www.w3.org/Translations/WCAG20-fr/Les directives d’accessibilité du contenu Web (WCAG) sont élaborées par le biais W3C en coopération avec des personnes et des organisations du monde entier. Le but est de fournir une norme unique et partagée pour l’accessibilité du contenu Web qui réponde aux besoins des personnes, des organisations et des gouvernements, ce au niveau international.

Les documents WCAG expliquent comment rendre le contenu Web plus accessible aux personnes handicapées. Le “contenu” du Web désigne généralement les informations d’une page ou une application Web, notamment les informations naturelles telles que le texte, les images et les sons mais également le code ou le balisage qui définit la structure, la présentation, etc.

WAI ARIA : Accessible Rich Internet Applications (https://www.w3.org/TR/wai-aria/). WAI-ARIA est une spécification technique qui fournit un cadre pour améliorer l’accessibilité et l’interopérabilité du contenu et des applications Web. Ce document s’adresse principalement aux développeurs qui créent des widgets personnalisés et d’autres composants d’applications Web.

Les objectifs de cette spécification sont les suivants :

      • Elargir les informations relatives à l’accessibilité qui peuvent être fournies par l’auteur ;
      • exiger une prise en charge complète du clavier qui peut être mise en œuvre de manière indépendante du dispositif, par exemple, par des téléphones, des dispositifs portables, des lecteurs de livres électroniques et des téléviseurs ;
      • améliorer l’accessibilité du contenu dynamique généré par des scripts ; et assurer l’interopérabilité avec les technologies d’assistance.

Critères d’accessibilité HTML5-ARIA : http://www.accessiweb.org/

 

Pourquoi rendre son site accessible ? 

“Rendre le web accessible est un avantage pour les internautes, les entreprises et la société. Les standards du web internationaux définissent ce qui est nécessaire pour l’accessibilité.”

 

Permettre un web inclusif 

En travaillant le sujet, on améliore l’accessibilité de plusieurs handicaps simultanément. Par exemple, permettre une navigation au clavier aide les non-voyants, les personnes avec un handicap moteur empêchant ou limitant l’utilisation d’une souris… Mais cela permet également de faciliter la navigation des utilisateurs d’ordinateurs portables. Le but est d’améliorer globalement l’expérience utilisateur (“Hello Core Web vitals”) : par exemple, le PDF semble être un format pratique, mais qui reste inaccessible aux softwares de synthèse vocale. Intégrer le contenu d’un PDF en html (tout en le conservant accessible en téléchargement) permet finalement de le rendre accessible à tous et sur tous les supports.

 

Les bonnes pratiques 

      • Fournir un texte alternatif pour tous les éléments visuels (images, vidéos etc…) et tous les contenus audio
      • Renseigner la balise alt sur toutes les balises img
      • Permettre une navigation au clavier
      • Utiliser une police sans serif, plus faciles à lire pour les dyslexiques par exemple
      • Permettre l’augmentation de la taille du texte
      • Utiliser un contraste fort avec le texte et privilégier texte sombre sur fond clair
      • Ne pas utiliser de texte justifié qui augmente les espaces et diminue la lisibilité
      • Paradoxalement, la mise en gras limite l’accessibilité en rapprochant les lettres entre elles
      • S’assurer que le rendu est optimal sur toutes les plateformes (mobile, pc, lecteur etc…)
      • Proposer un libellé sur les champs des formulaires
      • Respecter le balisage Hn
      • Respecter le balisage de structure HTML5 (header, footer, nav, article etc…)
      • Utiliser les balises pour ce qu’elles sont: le HTML sert pour la structure et le CSS pour la forme (et non l’inverse comme on voit très souvent

 

Comment évaluer l’accessibilité de son site ? 

Difficile d’être exhaustif sur le sujet, mais voici quelques outils qui permettront d’effectuer les premiers tests d’accessibilité de votre site.

 

Les outils de test d’accessibilité

Pour une vision d’ensemble:

Hyper rapide pour vous donner un aperçu de votre site et de son niveau de conformité

ace acessible

 

Vérifier la lisibilité en comparant les couleurs d’arrière et premier plan 

 

Vérifier la conformité aux réglementations WCAG

squizzlab

 

Un webdevelopper tools permettant de simuler des handicaps visuels

chrome lens

 

Une extension WordPress qui vous permet vous même de contrôler les éléments d’accessibilité

opquast

Accessibilité et SEO 

A priori perçue comme incompatible voire même un frein au SEO, il s’avère que mettre en place des actions visant l’accessibilité d’un site permettent de bonifier votre SEO

Les avantages pour votre SEO 

Fournir un code HTML propre, respecter la structure Hn, renseigner ses balises alt…. Est-on en pleine recommandation SEO ou en brief pour rendre son site accessible ? Les 2 mon capitaine ! Les 2 approches se recoupent étroitement…

Un lecteur d’écran pour mal voyant déroule le code HTML et l’interprète; au même titre qu’un robot d’indexation. Google est de plus en plus performant dans son interprétation des contenus mais malgré tout, il reste :

      • en partie aveugle
      • sourd (sauf sur sa plateforme vidéo)
      • ne perçoit pas les couleurs
      • a besoin d’aide pour comprendre les images
      • et galère avec le CSS et le JS

En bref, il cumule les handicaps qui justifient de lui faciliter la tâche. Rendre son site accessible revient finalement à optimiser son SEO ! Mais est-ce vraiment toujours le cas ?

 

Les différences entre accessibilité et SEO

Le SEO ne se résume pas à une optimisation technique et c’est sur la partie sémantique qu’accessibilité et SEO vont légèrement diverger.

Les titres Hn

En visant une accessibilité forte, un rédacteur aura tendance par exemple à aller à l’essentiel dans ses titres Hn puisque le thème de la page est implicite. On retrouvera donc des titres sur ce modèle:

<h1>Imprimante jet d’encre

<h2>Quel intérêt ?

<h2>Différences avec l’imprimante laser

 

A l’inverse, un rédacteur privilégiant le SEO fournira plus probablement ce genre de titre:

<h1>Imprimante jet d’encre

<h2>Imprimante jet d’encre : Quel intérêt ?

<h2>Différences entre Imprimante jet d’encre et l’imprimante laser

 

Les images et les balises alt

Dans une optique d’accessibilité et de simplicité, une succession d’images similaires (paysages, photos de produit prisent sous des angles différents etc…) n’auront qu’une seule balise alt renseignée pour la première image.

Pour le SEO une balise alt pourrait ressembler à “Imprimante jet d’encre ou laser [Marque]” 

A l’inverse, un SEO aura tendance à voir chaque image comme une opportunité supplémentaire de placer des mots clefs et remplira chaque balise alt avec des micro variations.

alors que pour l’accessibilité web, une balise alt ressemblerait à “image comparative d’imprimante laser et à jet d’encre”.

 

Conclusion

“Des passerelles mais pas d’amalgame”

Une page “accessible” doit logiquement être bien indexée et bénéficier d’indicateurs positifs aux yeux de Google; cependant elle n’aura certainement pas exactement le niveau d’optimisation d’un point de vue SEO pour bien se positionner.

A l’inverse, une page optimisée pour le SEO risque d’être un peu trop longue, avec un caractère redondant dans l’utilisation de mots clefs, être moins “droit au but” pour un utilisateur.

L’objectif n’est bien entendu pas de choisir entre l’un ou l’autre puisque les deux sont complémentaires: le 1er facilite l’indexation d’une page et brosse les robots dans le sens du poil (c’est d’autant plus vrai avec la prise en compte des core web vitals), quand l’autre favorise sa position dans les résultats de recherche.

Raphael Arzberger

Raphaël A., Team Leader SEO

Team Leader au sein de l'agence de Lyon, j'aime faire monter mes équipes en compétence et les accompagner dans l'élaboration de leurs stratégies SEO. Je mets plus particulièrement l'accent sur la branche netlinking du métier afin de compléter les optimisations on-site.