Table des matières:
Pourquoi l’accessibilité web est un enjeu majeur
L’accessibilité d’un site internet permet à tous les utilisateurs, y compris les personnes en situation de handicap, de naviguer et interagir avec vos contenus. En France, environ 12 millions de personnes sont concernées par un handicap temporaire ou permanent. Ignorer l’accessibilité, c’est exclure une part significative de votre audience et risquer des sanctions légales (RGAA, loi de 2005). De plus, un site accessible améliore le référencement naturel (SEO), la vitesse de chargement et l’expérience utilisateur pour tous.
Les bases pour améliorer l’accessibilité de son site internet
Comprendre les normes WCAG et le RGAA
Les WCAG (Web Content Accessibility Guidelines) sont le standard international. Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) est leur déclinaison française. Ces normes définissent quatre principes : perceptible, utilisable, compréhensible et robuste. Chaque principe est décliné en critères de succès (A, AA, AAA). Pour la plupart des sites, le niveau AA est recommandé.
Structurer le contenu avec des titres et des listes
Utilisez une hiérarchie de titres logique (h1, h2, h3…). Chaque page doit avoir un seul h1. Les titres doivent être descriptifs. Les listes à puces (<ul>) et numérotées (<ol>) facilitent la lecture par les lecteurs d’écran. Évitez de sauter des niveaux de titres.
Soigner les textes alternatifs des images
Chaque image doit avoir un attribut alt pertinent. Pour une image décorative, laissez alt="" (vide). Pour une image informative, décrivez son contenu et sa fonction. Par exemple : « Graphique montrant l’évolution du trafic en 2024 » plutôt que « Image1 ».
Proposer des contrastes de couleurs suffisants
Le contraste entre le texte et l’arrière-plan doit être d’au moins 4,5:1 pour le texte normal (WCAG AA). Utilisez des outils comme le Contrast Checker de WebAIM. Évitez les combinaisons de couleurs difficiles (ex. rouge/vert). Ne transmettez pas d’information uniquement par la couleur.
Rendre la navigation accessible
Clavier et focus visible
Toutes les fonctionnalités doivent être accessibles au clavier (tabulation, touches Entrée, Échap). Le focus (contour visible autour de l’élément actif) doit être bien visible. Ne supprimez pas l’outline par défaut sans le remplacer par un style personnalisé.
Liens et boutons explicites
Les intitulés des liens doivent décrire la destination (« Lire l’article sur l’accessibilité » plutôt que « Cliquez ici »). Les boutons doivent avoir un texte compréhensible. Évitez les liens ouvrant dans une nouvelle fenêtre sans avertir l’utilisateur.
Menu de navigation et fil d’Ariane
Utilisez des menus clairs avec des sous-menus accessibles au clavier. Ajoutez un fil d’Ariane (breadcrumb) pour aider l’orientation. Proposez un lien « Aller au contenu » en début de page.
Rendre les formulaires accessibles
Étiquettes et instructions
Chaque champ de formulaire doit avoir une étiquette (<label>) associée. Les instructions doivent être claires, surtout pour les champs obligatoires ou les formats spécifiques (date, téléphone). Utilisez des messages d’erreur explicites.
Validation et feedback
Les erreurs doivent être signalées de manière textuelle, pas seulement par une couleur. Proposez des suggestions de correction. Par exemple : « Le format de l’email est incorrect. Exemple : nom@domaine.com ».
Adapter les contenus multimédia
Sous-titres et transcriptions pour les vidéos
Ajoutez des sous-titres synchronisés (format SRT) pour les vidéos. Fournissez une transcription textuelle complète. Cela aide les personnes sourdes ou malentendantes, mais aussi les utilisateurs en environnement bruyant.
Audiodescription pour les vidéos
Si la vidéo contient des informations visuelles importantes (graphiques, actions), ajoutez une audiodescription qui décrit ces éléments entre les dialogues.
Alternatives pour les contenus audio
Proposez une transcription pour les podcasts et fichiers audio. Permettez de contrôler la lecture (pause, volume) facilement.
Améliorer la lisibilité et la compréhension
Police, taille et espacement
Utilisez une police sans empattement (Arial, Verdana) avec une taille minimale de 16px. Laissez un espacement suffisant entre les lignes (1,5) et les paragraphes. Évitez les textes en majuscules ou en italique longs.
Langue et contenu simplifié
Indiquez la langue principale de la page avec l’attribut lang="fr". Utilisez un vocabulaire simple et des phrases courtes. Pour les contenus complexes, proposez un résumé ou une version simplifiée (FALC).
Animation et mouvement
Limitez les animations clignotantes ou rapides (risque d’épilepsie). Proposez un bouton pour désactiver les mouvements. Respectez la préférence système prefers-reduced-motion.
Checklist pratique pour auditer votre site
- Images : tous les attributs alt sont-ils remplis correctement ?
- Contraste : le rapport de contraste est-il ≥ 4,5:1 pour le texte ?
- Navigation clavier : pouvez-vous parcourir tout le site avec la touche Tab ?
- Focus visible : voyez-vous un contour clair sur l’élément actif ?
- Formulaires : chaque champ a-t-il une étiquette ?
- Vidéos : y a-t-il des sous-titres et une transcription ?
- Structure : les titres sont-ils hiérarchisés correctement ?
- Liens : les intitulés sont-ils explicites ?
- Langue : l’attribut lang est-il présent ?
- Animations : existe-t-il un moyen de les désactiver ?
Outils pour tester l’accessibilité
| Outil | Type | Utilité |
|---|---|---|
| WAVE | Extension navigateur | Analyse visuelle des erreurs |
| axe DevTools | Extension navigateur | Audit automatisé (WCAG) |
| Lighthouse | Intégré à Chrome | Rapport d’accessibilité et SEO |
| NVDA / VoiceOver | Lecteurs d’écran | Test utilisateur réel |
| Color Contrast Analyser | Application | Vérification des contrastes |
Erreurs courantes à éviter
- Utiliser des PDF ou images pour du texte (non lisible par les lecteurs d’écran).
- Négliger les formulaires sans label.
- Oublier le focus clavier.
- Utiliser des couleurs seules pour transmettre une information.
- Ne pas tester avec de vrais utilisateurs en situation de handicap.
FAQ – Questions fréquentes sur l’accessibilité web
Qu’est-ce que l’accessibilité d’un site internet ?
L’accessibilité web vise à rendre les sites utilisables par tous, y compris les personnes ayant des handicaps visuels, auditifs, moteurs ou cognitifs. Elle repose sur des normes comme les WCAG.
Quels sont les bénéfices pour le SEO ?
Un site accessible a une meilleure structure (titres, balises alt, navigation clavier) ce qui améliore l’indexation par Google et l’expérience utilisateur, donc le classement.
Combien coûte la mise en accessibilité d’un site ?
Le coût varie selon la taille et l’état du site. Un audit coûte entre 1000 et 5000 €. Les corrections peuvent aller de quelques centaines à plusieurs milliers d’euros. Le retour sur investissement est positif (audience élargie, SEO, conformité légale).
Quels sont les outils gratuits pour tester l’accessibilité ?
WAVE, axe DevTools, Lighthouse, et le validateur HTML du W3C sont gratuits. Pour les contrastes, utilisez Color Contrast Analyser.
L’accessibilité est-elle obligatoire en France ?
Oui, pour les services publics et les entreprises privées réalisant un certain chiffre d’affaires (loi du 11 février 2005, RGAA). Depuis 2019, les sites doivent afficher leur niveau d’accessibilité.
Comment former mon équipe à l’accessibilité ?
Proposez des formations en ligne (OpenClassrooms, Access42) ou faites appel à un expert. Impliquez les développeurs, designers et rédacteurs.
Prochaines étapes pour un site accessible
Commencez par un audit simple avec WAVE ou Lighthouse. Priorisez les corrections les plus impactantes (contraste, alt, navigation clavier). Impliquez votre équipe et planifiez des tests réguliers. L’accessibilité n’est pas un projet ponctuel, mais une démarche continue. En l’intégrant dès la conception, vous économisez du temps et de l’argent, tout en offrant une expérience inclusive à tous vos visiteurs.
Photo by Tim Mossholder on Pexels

Merci pour ce guide très complet ! J’essaie d’améliorer l’accessibilité de mon site e-commerce. Pour les images de produits, est-ce que je dois mettre un texte alternatif long décrivant tous les détails ou juste l’essentiel ?
Bonjour, content que le guide vous soit utile ! Pour les images de produits, privilégiez un texte alternatif concis mais descriptif : indiquez le produit, sa couleur, son modèle et toute information pertinente pour un acheteur. Par exemple : « T-shirt en coton bleu marine, taille M, vu de face ». Évitez les descriptions trop longues, mais ne vous limitez pas à « produit ». L’essentiel est que l’utilisateur non-voyant comprenne ce qui est montré.