Guide numérique
d'accessibilité.

Rendre un site compréhensible, lisible et utilisable quelle que soit la situation : handicap permanent, temporaire ou situationnel. Une responsabilité partagée par tous les acteurs d'un projet.

Chiffres clés

• 15 % de la population mondiale vit avec un handicap
• 97 % des pages d'accueil ont au moins une erreur d'accessibilité (WebAIM, 2024)
• Depuis 2025, la directive EAA étend l'obligation au secteur privé

Les 4 principes WCAG

• Perceptible — information accessible à tous les sens
• Opérable — tout fonctionne sans souris
• Compréhensible — contenu clair, erreurs bien formulées
• Robuste — compatible avec les technologies d'assistance

Contrastes

• Minimum 4,5:1 pour le texte courant (AA)
• Minimum 3:1 pour les grands titres
• 7:1 pour le niveau AAA
• Taille minimale 14px, idéalement 16px

Zones cliquables

Minimum 44 × 44 px pour tout élément interactif (WCAG 2.5.5). Espacer les boutons sur mobile pour éviter les clics accidentels.

Animations

Pas de clignotement à plus de 3 fois par seconde (risque épilepsie — WCAG 2.3.1). Proposer un bouton pause pour toute animation automatique.

Navigation

Le contenu doit être navigable à la souris, au clavier et par commande vocale. Tester sans souris est le réflexe le plus simple.

Images sans alternative

Un lecteur d'écran ne voit pas les images. Sans attribut alt, une infographie est muette. Décrire chaque image informative, laisser l'alt vide pour les décoratives.

Couleur comme seul signal

8 % des hommes sont daltoniens. Un statut indiqué uniquement par la couleur exclut. Toujours associer couleur et texte.

Médias sans alternative

Vidéos sans sous-titres et podcasts sans transcription excluent les sourds, les malentendants, et les personnes en environnement bruyant.

Liens vagues

"Cliquez ici" ou "En savoir plus" sont inutiles pour un lecteur d'écran. Chaque lien doit être compréhensible sans contexte.

Titre de page identique

Le titre est la première chose lue. S'il est identique partout, l'utilisateur ne sait plus où il se trouve. Chaque page doit avoir un titre unique et descriptif.

Focus clavier supprimé

Supprimer outline rend la navigation au clavier impossible. Le focus doit toujours être visible et contrasté.

Formulaires sans étiquette

Le placeholder disparaît dès qu'on tape. Un label visible est obligatoire sur chaque champ.

Menus souris uniquement

Si un menu s'ouvre uniquement au survol, il est inutilisable au clavier. Tous les contenus doivent être accessibles sans souris.

Structure HTML

Chaque balise correspond à son rôle : h1 pour les titres, ul/ol pour les listes, a pour les liens. Un seul h1 par page, pas de niveaux sautés.

ARIA et langue

• aria-label — décrit les éléments sans texte visible
• aria-live — annonce les mises à jour dynamiques
• lang="fr" — obligatoire sur la balise html

• Titres balisés H1 à H6, pas seulement en gras
• Ordre de lecture logique
• Alt text sur chaque image informative
• Langue déclarée dans les métadonnées
• Exporter avec "PDF balisé" activé
• Valider avec PAC (PDF Accessibility Checker)

Sous-titres

Synchronisés, vérifiés et corrigés. Inclure les paroles et les informations sonores importantes.

Transcription

Disponible à proximité du média. Améliore aussi le référencement. Ajouter une audiodescription quand l'image porte une information.

Lecteur média

Entièrement accessible au clavier. Chaque bouton doit avoir une étiquette claire.

Contraste

• colourcontrast.cc
• userway.org/fr/verificateur-de-contraste

Audit web

• Wave — extension Chrome / Firefox
• ARC Toolkit — pour développeurs

Référentiels

• accessibilite.numerique.gouv.fr
• w3.org/TR/WCAG21