Comment rendre accessible son site web pour les personnes ayant des handicapes ?

Hello 👋🏼

J’espère que vous allez bien 😊

On se retrouve aujourd’hui autour d’un sujet très important et malheureusement trop peu abordé ! Il s’agit de l’accessibilité des sites internet pour les personnes handicapées.

A mon sens, ce sujet va prendre de plus en plus d’ampleur car nos chers moteurs de recherche souhaitent que le contenu disponible sur internet soit accessible à tous.

Actuellement, de nombreux sites ne sont pas conçus et/ou pensés pour les personnes en situation de handicaps. Ce qui rend le support complexe voire impossible à utiliser.

Depuis quelques années, nous voyons émerger des recommandations telles que WCAG (Web Content Accessibility Guidelines). Je ne vous en dis pas plus, cela fera office de première partie de cet article !

Vous êtes prêt.e ? Alors c’est parti ! ⚡️

Qu’est-ce que les recommandations WCAG ?

Les recommandations WCAG 2.1 (Web Content Accessibility Guidelines) sont une des recommandations les plus connues aujourd’hui dans le monde du web à propos de l’accessibilité.

C’est un ensemble complet de normes qui permettent de rendre votre site web accessible aux personnes handicapées.

L’objectif de la WCAG est de rendre compréhensifs les contenus disponibles sur internet à différentes formes de handicaps (handicap auditif, visuel et même moteur).

Comment répondre aux différentes normes pour rendre son site accessible ?

Vous vous demandez sans doute comment votre site peut répondre à ces différentes recommandations. C’est ce que nous allons voir maintenant :

Utiliser des titres de page clairs et hiérarchisés

Vous le savez sans doute les pages d’un site internet comportent des titres. Ces derniers doivent répondre à des “normes” permettant de structurer la page.

Dans le jargon web, on appelle cela un plan de balisage (ou encore un plan balistique). Chaque titre va avoir un niveau allant du H1 au H6.

Le H1 est UNIQUE, il est le seul H1 de la page. Il s’agit du titre principal, auxquels s’ajoutent ensuite les sous-titres.
Je vais vous faire retourner un peu dans le passé. Avez-vous un souvenir de vos cours d’Histoire-Géo ? 😅
Et bien, les titres d’une page web ont un peu le même fonctionnement que nos anciens cours d’Histoire lorsque vous écriviez le titre de votre leçon (H1), puis le Grand 1 (H2), suivi de l’alinéa a. (H3)…

Exemple pour cet article de blog :

H1 : Comment rendre mon site internet accessible aux utilisateurs en situation de handicap ?

H2 : Qu’est-ce que les recommandations WCAG ?

H2 : Comment répondre aux différentes normes pour rendre son site accessible ?

H3 : Utiliser des titres de pages clairs et hiérarchisés

H3 : Avoir des textes alternatifs pour les images et les médias

H3 : …

Tous les titres sur votre site internet doivent être clairs et pertinents. Cela permet à vos visiteurs et aux moteurs de recherches de hiérarchiser le contenu de la page et ainsi de mieux le comprendre.

Ajouter des textes alternatifs sur vos images

Avant de vous expliquer pourquoi et comment intégrer un texte alternatif, il me semble judicieux de vous en expliquer sa signification. 😄
Un texte alternatif pour les images sur le web est un texte donnant une description brève, simple et précise du contenu de l’image.

Vous vous demandez sans doute pour quelles raisons ajouter des textes alternatifs à vos images ?

1. S’il y a un souci lors du chargement de vos images sur votre site, cela permet aux utilisateurs de savoir ce qui est sensé se trouver à cet endroit (grâce à la description)
2. Si vous êtes malvoyant ou non-voyant, cela permet au lecteur d’écran de pouvoir lire et ainsi décrire l’image sur l’écran (à haute voix)
3. Les moteurs de recherche ne sont pas encore tout à fait en mesure de “voir les images” cependant ils sont très bons en lecture. Par conséquent, ils sont friands des textes alternatifs.

Pour conclure, ajouter des textes alternatifs à vos images va vous permettre d’améliorer l’accessibilité de votre site mais aussi son référencement (SEO) et ça on adore ! 🤩

Mais alors, comment fait-on ? 😫

• Si vous codez votre site, vous devez utiliser la balise HTML « alt » dans la balise « img » pour les images.
  Si vous utilisez WordPress, lorsque vous ajoutez un média, sur la partie droite du média vous avez la mention : “Texte alternatif”. C’est à cet endroit que vous devez noter le vôtre.
• Il faut que votre texte alternatif soit pertinent et clair. Je vous conseille d’y ajouter un mot clé.
• Éviter de mettre les thermes : “image” ou “photo”. Cela ne sert à rien pour le visiteur ni pour le moteur de recherche. Il sait déjà qu’il y a cet élément à cet endroit.

⭐️ Le conseil en plus : n’hésitez pas à lire l’article complet sur « L’importance d’optimiser les images sur son site internet« 

Penser à ajouter des sous-titres pour les vidéos pour les rendre accessibles

Comme pour les images, les moteurs de recherches ainsi que les outils d’accessibilité pour lire votre contenu web, sont difficilement capables de lire des vidéos.

Par conséquent, je vous conseille fortement de sous-titrer vos vidéos. Certes cela prend du temps mais vous en tirerez rapidement du bénéfice pour la suite.

Sans parler de handicapes, il arrive très fréquemment que les visiteurs de votre site web consomment votre contenu sans le son. De ce fait, ils ne savent pas de quoi vous allez parler. 

⭐️ Conseil en bonus : faites attention à ne pas lancer le son de votre vidéo si vous activez un lancement automatique. Il n’y a rien de plus insupportable que de se faire surprendre par un son trop fort et/ou de ne pas trouver d’où vient le son ! Meilleur moyen pour faire fuir ses utilisateurs !

Opter pour des couleurs qui contrastent les une avec les autres

Utilisateur en situation de handicap ou utilisateur valide, personne n’a envie de plisser les yeux pour essayer de déchiffrer ce que vous avez mis comme contenu sur votre site. Apportez donc une attention particulière au contraste !

Autre option : mettre en place un filtre de contraste qui rendra votre site en noir et blanc. 😊

⭐️ Le conseil en bonus : essayez de penser aux personnes daltoniennes… On évite le rouge et le vert ! 

Focus sur les polices pour l’accessibilité :

Dans le même ordre d’esprit que les couleurs, personne n’a envie de plisser des yeux pour essayer de décrypter ce que vous avez écrit.

Je vous suggère donc d’opter pour des polices lisibles aussi bien pour les titres que pour les paragraphes composant votre site internet.

⚠️ Attention aux polices manuscrites, elles sont souvent moins lisibles. Il faut bien les choisir.

De plus, il n’est pas non plus nécessaire d’écrire votre texte avec une taille 100… Aucune utilité, la plupart des personnes rencontrant des soucis de vision ont des logiciels adaptés. Ces derniers leur permettent de grossir ou de lire à haute voix votre contenu.

⭐️ Le conseil en plus : pour savoir si vos couleurs sont bien contrastées ou que la taille de vos polices convient à la lecture, demandez à une personne âgée de votre entourage ce qu’elle en pense. 😅 Généralement, elles sont sans filtre et vous lâcheront un magnifique : “Je ne vois rien avec ce jaune ! ” ou encore « mais c’est écrit en minuscule ton truc ».

Vous l’avez sans doute compris, l’accessibilité de votre site internet pour les visiteurs en situation de handicaps est très importante aussi bien dans un souci d’inclusion mais également d’un point de vue business.

Dans ces articles, j’ai pu vous partager plusieurs pistes d’amélioration, il s’agit des principales. Il en existe beaucoup d’autres. Tout comme je ne peux couvrir toutes les difficultés rencontrées par toutes les formes de handicaps.

Ces axes d’améliorations sont primordiaux pour les personnes atteintes de certains types de handicaps mais également pour améliorer votre expérience utilisateurs et renforcer votre image de marque de manière globale. Sans oublier que toutes ces astuces vous aideront aussi à améliorer le référencement de votre site internet.

J’espère que cet article aidera à rendre les sites web plus inclusifs pour des personnes de déficits visuels ou auditifs.

Si vous avez d’autres astuces ou avez rencontrés d’autres difficultés, n’hésitez pas à les ajouter en commentaire.

En attendant, je vous souhaite une agréable journée ☀️