Rendre ton site accessible

Des tas de personnes ont des handicaps permanents ou temporaires…

Que ça soit lié à la vision, au mouvement (ça peut être aussi con qu’un bras cassé), au cognitif etc…

Le truc, c’est que souvent les sites web ne sont pas pensés avec ces personnes en tête, du coup ils sont difficilement voir pas du tout utilisable pour elles.

Ça les empêche de pouvoir faire des choses comme passer une commande, demander un renseignement via un formulaire de contact, ou tout simplement lire un article.

Pour éviter tout ça on peut rendre son site plus accessible.

L’accessibilité c’est une grosse thématique, avec plein de chose à faire, et souvent des trucs à voir au cas par cas.

Je pense qu’il faut voir ça comme quelque chose qu’il faut améliorer au fur et à mesure et pas quelque chose que tu vas faire en une fois, te frotter les mains et c’est bon c’est terminé. (ne serait-ce que parce que ton site évolue probablement avec le temps)

Je suis un total débutant en la matière et j’apprends petit à petit, je vais te faire part ici de ce que j’applique et ce que je découvre.

Si tu t’y connais et que tu vois des erreurs, ou que tu as des suggestions n’hésite pas à me le dire en commentaire ou par mail.

Un site simple

Plus ton site est simple, moins tu auras de travail à faire pour l’accessibilité.

Une raison de plus de ne pas mettre de bandeau de cookies, de pop up pour s’inscrire à une newsletter etc…

Texte en gros

Évite d’avoir un texte trop petit.

Ça peut sembler évident, mais je croise encore des sites avec des articles écrit en 11px. Et ça c’est agréable pour personne, même pour ceux qui ont une bonne vision.

Remplir la balise alt

Souvent on ne sait pas à quoi sert cette balise alt (ou ce champ « texte alternatif ») sur les images…

Pour quelqu’un qui n’utilise pas d’outil d’accessibilité, que tu le remplisses ou pas, ça ne change rien…

Mais pour une personne qui utilise la lecture vocale sur une page web, c’est autre chose.

Soit ta balise alt est mal remplie et va couper la lecture avec des informations inutiles.

Soit ta balise alt est pas remplie du tout alors qu’elle le devrait, ce qui omet de l’information utile.

Voilà quoi faire avec cette balise alt :

Tu ne dois pas forcément remplir ta balise alt.

En fait, il faut uniquement le faire si c’est pertinent.

Est-ce que ton image contient du texte ?

Oui ?

Dans ce cas-là tu ne veux pas que quelqu’un qui utilise la lecture vocale passe à côté du texte qu’il y a dans cette image.

Il faudra alors décrire cette image avec le texte qu’il y a à l’intérieur.

Par exemple pour cette image :

J’ai mis :

Photo d’une réunion avec un homme qui dit « Think Monopole »

(tu peux facilement remplir la balise alt dans WordPress en cliquant sur l’image et en remplissant le champ « Texte alternatif (alt) »)

Est-ce que ton image est purement décorative ?

Dans ce cas-là ça dépend :

Est-ce que décrire l’image apporte quelque chose à une personne qui ne la vois pas ?

Est-ce que ça à un intérêt artistique ?

Pour mon serveur410, dans certain cas, j’ai jugé que ça avait un intérêt artistique, comme cette image :

Où j’ai écrit :

Bonhomme qui se balade dans un monde coloré

Si ton image n’apporte rien à la personne qui ne vois pas l’image, comme une bordure par exemple, tu peux laisser la balise alt vide. Le lecteur sautera l’image et ça rendra la lecture plus fluide.

J’ai deux liens qui vont te permettent d’approfondir le sujet :

https://accessibility.belgium.be/fr/articles/images/images-decoratives

https://www.w3.org/WAI/tutorials/images/

Thème optimisé pour l’accessibilité

Si tu es sur WordPress, tu peux choisir un thème optimisé pour l’accessibilité.

Par exemple, le thème que j’utilise, GeneratePress, est optimisé pour l’accessibilité (il suit les standards WCAG 2.0)

Tu dois pouvoir trouver cette information sur le site du développeur de ton thème, dans la documentation, ou au pire en posant la question au support.

Examiner l’élément

Une des manières d’apprendre à faire des sites web, c’est de regarder le code source des sites que tu apprécies.

Tu peux faire la même chose avec l’accessibilité.

Si tu connais un site qui est plutôt bon en accessibilité, tu peux prendre exemple en faisant un clic droit sur l’élément (par exemple un formulaire) et en regardant le code source pour ensuite le répliquer sur ton site.