Rendre son site accessible : pas besoin d’être un·e pro de la techno !

Michèle Fog
Designer graphique, collaboratrice

Il est fort beau d’avoir un site esthétique et rempli de bonnes informations, mais s’il n’est pas accessible, vous risquez de perdre une importante quantité de votre trafic. En effet, votre public cible doit pouvoir facilement consulter vos contenus, sans friction, et ce, sur toute taille d’écran, du téléphone intelligent au moniteur extra-large.

Avec une simple recherche sur le Web, vous pourriez trouver une multitude de ressources offrant la liste complète des critères requis pour rendre un site accessible, tel que le site du w3 présentant les Règles internationales pour l’accessibilité des contenus Web, mais cela peut sembler un peu intimidant lorsqu’on n’est pas spécialisé·e dans le domaine de la programmation.

Cet article à été conçu pour vous permettre de comprendre rapidement ce qui est requis pour avoir un site accessible, les impacts concrets de ces mesures et les techniques faciles pour déterminer si vous répondez aux critères de base. Voici les grandes lignes pour vous aider à démarrer.

1. L’humain d’abord : pourquoi on fait ça?

Un site qui n’est pas accessible empêche les personnes ayant des problèmes de motricité ou de vue de naviguer correctement bien évidemment, mais de façon plus large, l’accessibilité améliore de façon concrète l’expérience de tout le monde !

Pensez à vos propres expériences quotidiennes; l’accessibilité, c’est ce qui vous aide :

  • Lorsque vous naviguez à l’extérieur avec un grand soleil éclatant sur votre écran
  • Lorsque vous passez d’un grand écran d’ordinateur à votre téléphone
  • Quand votre réseau est faible et que les images ne peuvent tout simplement pas se télécharger
  • Quand vous êtes pressé·e et que le contenu doit être facile à survoler (à scanner)
2. Des actions concrètes (et simples) à mettre en place

Quelques améliorations à votre site actuel peuvent faire toute la différence. Voici où commencer :

  • Mettre des mots sur vos images : Premièrement, il faut que chacune des images du site ait une description qui y soit attachée. Ce texte alternatif descriptif (ou « alt text ») est lu par les lecteurs d’écran pour décrire l’image aux personnes qui ne la voient pas avec leurs yeux. De plus, cela s’avère très utile pour les utilisateurices naviguant avec une vitesse limitée pour qui les images pourraient ne pas être téléchargées.
  • Construire une hiérarchie claire : Le contenu de la page doit être structuré de façon à ce que l’information puisse être naviguée par les outils de lecteurs d’écran. Pour ce faire, il est nécessaire d’utiliser la bonne structure de titres, en utilisant les niveaux respectifs (H1, H2, H3, etc.), de suivre l’ordre approprié des éléments dans le code lui-même, et de prévoir des libellés distinctifs comme ceux pour les boutons interactifs, les tableaux, les sections, etc.
  • Oser les contrastes forts : Afin d’assurer une bonne visibilité du site, vous devez utiliser un contraste suffisamment élevé entre le texte et la couleur du fond d’écran. Cela permet aux personnes ayant une vision réduite ou naviguant sur un écran de basse qualité de lire les contenus facilement.
  • Lâcher la souris : Finalement, votre page doit être construite de façon à pouvoir être naviguée à l’aide d’un simple clavier. L’ordre des éléments tels que décrit dans le deuxième point ci-haut permet justement de ce faire. La meilleure façon de s’assurer de ceci, c’est de l’essayer vous-même : tentez de naviguer sur votre propre site en utilisant uniquement les flèches et touches de votre clavier.
3. Le duo gagnant : l’accessibilité au service du SEO et de l’IA

Si les humains aiment un site bien fait, les robots l’adorent. Un site inaccessible risque de ne pas apparaître de façon efficace dans les moteurs de recherche, alors l’accessibilité a de très grandes implications pour votre optimisation web (SEO) et pour l’intelligence artificielle (AiEO).

  • Des robots qui vous comprennent : Les robots d’indexation naviguent et analysent le web de la même façon que le font les lecteurs d’écran. Lorsqu’un site est bien hiérarchisé et interactif, il devient beaucoup plus facile à naviguer pour ces robots et pour l’intelligence artificielle. Ceux-ci parviennent ainsi à mieux analyser et indexer vos contenus, ce qui augmente votre visibilité.
  • Un trafic organique propulsé : Mieux les moteurs comprennent votre site, mieux ils le présenteront dans les résultats de recherche, augmentant alors votre trafic organique considérablement. Les outils auront un bien meilleur succès lors de la navigation et pourront fournir vos contenus aux utilisateurices de façon plus fréquente. Au contraire, si votre site n’est pas accessible, il est considéré comme défavorable et ne sera pas mis de l’avant par ces outils.
  • Le pouvoir des mots-clés : Il est important de noter que les descriptions alternatives de vos images entrent en compte pour vos mots-clés. Cela augmente et renforce directement votre optimisation pour les moteurs de recherche.
  • La qualité prime : Les moteurs de recherche et les outils d’intelligence artificielle tentent toujours de présenter les contenus de la plus haute qualité  aux utilisateurices. Ils vont donc toujours prioriser des sites qui semblent fiables, à jour, qui respectent les meilleures pratiques de conception Web, et qui sont adaptés des écrans mobiles jusqu’aux écrans extra larges.
4. La feuille de triche

Si vous souhaitez faire un audit de votre site actuel pour déterminer s’il est accessible, ou bien si vous souhaitez vous assurer qu’un site a été bien construit suite à une livraison par une agence, vous devrez jeter un coup d’œil au code.

Cliquez sur un élément avec le bouton de droite de votre souri, et sélectionnez l’option « Inspecter ».

Une fenêtre s’ouvrira dans laquelle vous trouverez le code du site. Si c’est une image, assurez-vous qu’il y a bien une description associée à la section alt= de son code.


Si c’est un titre, assurez-vous qu’il est codé en tant que tel, et idéalement, vérifiez qu’il y a bien un titre H1, H2 et H3 dans la page au minimum. Encore mieux s’ils sont tous là jusqu’au H6!

Le bonus ! Voici une « feuille de triche » contenant les demandes essentielles que vous devriez passer à votre équipe Web pour un projet réussi :

  • Je souhaite avoir des titres allant du niveau un à six sur chacune de mes pages.
  • Je souhaite utiliser l’élément « bouton » pour tout lien cliquable.
  • Je souhaite que le site soit entièrement adapté et réactif, pour des écrans de petite taille à grande taille.
  • Je souhaite utiliser un texte alternatif pour chacune des images du site, en y intégrant mes mots clés pertinents.
    • [mot clé A]
    • [mot clé B]
    • [mot clé C]
    • etc.
  • Je souhaite que les contenus des pages XYZ (ou toutes) soient navigable par clavier
  • Je souhaite utiliser un contraste d’un minimum de 7:1 pour mes textes pour un contraste accessible

En résumé : créer un site accessible n’a pas besoin d’être sorcier, et surtout, les professionnel·les avec qui vous travaillez ne devraient jamais vous faire croire que c’est un travail colossal justifiant des coûts exorbitants. Il suffit d’intégrer l’accessibilité à toutes les étapes du processus de conception ou, si votre site est déjà en ligne, de prendre le temps d’ajuster quelques éléments clés. C’est avant tout une question d’inclusion, d’impact, et de gros bon sens.

Michèle Fog
Designer graphique, collaboratrice

Articles récents

Aller en haut de la page