Un site accessible, c’est un site que tout le monde peut utiliser : une personne aveugle qui navigue avec un lecteur d’écran, une personne qui ne peut pas utiliser de souris, une personne âgée qui agrandit le texte, ou simplement quelqu’un qui consulte son téléphone en plein soleil.
Je travaille cette année comme assistant de la Mission Handicap de mon université, et ce poste m’a fait voir le web autrement. Un bouton mal codé ou un texte trop pâle ne sont pas de simples détails de design : pour certaines personnes, ce sont des portes fermées.
La bonne nouvelle, c’est qu’une grande partie de l’accessibilité repose sur des pratiques simples. Voici celles que j’applique sur chaque projet.
Pourquoi l’accessibilité compte
Il y a trois bonnes raisons de s’y intéresser :
- Les utilisateurs : rendre un site accessible, c’est ne laisser personne de côté.
- La loi : en France, les sites publics doivent respecter le RGAA (Référentiel général d’amélioration de l’accessibilité). Depuis l’entrée en application de l’Acte européen sur l’accessibilité en juin 2025, de nombreux services numériques privés sont aussi concernés, comme les sites de commerce en ligne.
- Le référencement : un site bien structuré, avec des titres logiques et des images décrites, est aussi plus facile à comprendre pour Google.
Les règles de référence au niveau international sont les WCAG (Web Content Accessibility Guidelines). Le niveau visé en général est le niveau AA.
1. Des contrastes suffisants
Un texte gris clair sur fond blanc peut sembler élégant, mais il devient vite illisible. Les WCAG demandent un rapport de contraste d’au moins 4,5:1 pour un texte courant, et 3:1 pour les grands textes.
Je vérifie chaque couleur de texte avec un outil de contraste dès la création de la charte graphique. C’est beaucoup plus simple que de corriger un site entier une fois terminé.
2. Des textes alternatifs sur les images
L’attribut alt permet de décrire une image pour les personnes qui ne la voient pas. Le lecteur d’écran le lit à voix haute.
- Une image qui apporte une information doit être décrite :
alt="Capture de la page d'accueil du site Sama Quotidien". - Une image purement décorative doit avoir un
altvide :alt="". Le lecteur d’écran l’ignore alors, ce qui évite du bruit inutile.
Une erreur fréquente est d’écrire « image de » ou « photo de ». Le lecteur d’écran annonce déjà qu’il s’agit d’une image.
3. Une structure de titres logique
Les personnes qui utilisent un lecteur d’écran naviguent souvent de titre en titre, comme on survole un sommaire. La structure doit donc être cohérente :
- un seul
h1par page, qui annonce le sujet principal ; - des
h2pour les grandes parties ; - des
h3pour les sous-parties, sans sauter de niveau.
Les titres ne doivent pas être choisis pour leur taille. Si un texte doit être grand sans être un titre, c’est le rôle du CSS.
4. Un site utilisable au clavier
Certaines personnes ne peuvent pas utiliser de souris. Elles naviguent avec la touche Tab pour passer d’un élément à l’autre, et Entrée pour cliquer.
Pour que cela fonctionne :
- tous les liens, boutons et champs doivent être atteignables avec Tab ;
- l’ordre de navigation doit suivre l’ordre logique de la page ;
- le focus doit rester visible. Supprimer le contour autour des éléments avec
outline: nonesans le remplacer est l’une des erreurs les plus courantes.
Un test simple : posez votre souris et essayez de parcourir votre site uniquement au clavier. On découvre souvent des surprises.
5. Les bonnes balises au bon endroit
Le HTML sémantique fait une grande partie du travail d’accessibilité gratuitement.
- Un élément qui déclenche une action est un
<button>, pas une<div>cliquable. - Un élément qui mène vers une autre page est un lien
<a>. - Les zones de la page utilisent
<header>,<nav>,<main>et<footer>.
Ces balises sont reconnues par les lecteurs d’écran et fonctionnent au clavier sans code supplémentaire.
6. Des formulaires clairs
Les formulaires sont souvent le point le plus bloquant d’un site.
- Chaque champ doit avoir un
<label>visible et relié au champ. Un simple texte d’exemple dans le champ (placeholder) disparaît dès qu’on écrit et ne suffit pas. - Les champs obligatoires doivent être indiqués clairement, pas seulement par une couleur.
- Les messages d’erreur doivent expliquer le problème et comment le corriger : « L’adresse e-mail doit contenir un @ » plutôt que « Champ invalide ».
7. Des liens compréhensibles hors contexte
Les lecteurs d’écran permettent d’afficher la liste de tous les liens d’une page. Une liste de cinq liens « Cliquez ici » ou « En savoir plus » n’aide personne.
Un bon lien décrit sa destination : « Voir l’étude de cas Lemondetravaille » ou « Lire l’article sur la charte graphique ».
8. Ne pas transmettre une information uniquement par la couleur
Un champ en erreur entouré de rouge, sans autre indication, n’est pas compréhensible pour une personne daltonienne. J’ajoute toujours un second repère : une icône, un texte ou un soulignement.
Même chose pour les animations : je respecte le réglage « réduire les animations » du système avec la requête CSS prefers-reduced-motion, car certains mouvements peuvent provoquer des vertiges.
Comment tester son site
Pas besoin d’être expert pour faire un premier diagnostic :
- Lighthouse, intégré à Chrome, donne un score d’accessibilité et liste les problèmes détectés.
- WAVE, une extension gratuite, affiche les erreurs directement sur la page.
- La navigation au clavier, pour vérifier le focus et l’ordre de tabulation.
- Un lecteur d’écran : VoiceOver est intégré aux Mac et aux iPhone, NVDA est gratuit sur Windows.
Les outils automatiques ne détectent qu’une partie des problèmes. Un test manuel reste indispensable.
En résumé
L’accessibilité n’est pas une option à ajouter à la fin d’un projet. Pensée dès le départ, elle demande peu d’efforts supplémentaires et rend un site meilleur pour tout le monde : plus clair, plus rapide à utiliser et mieux référencé.
C’est une démarche que j’intègre à chaque site que je conçois, y compris ce portfolio.
Vous souhaitez vérifier l’accessibilité de votre site ou en discuter ? Écrivez-moi.
