Accessibilité numérique : les bases pour un web ouvert à tous

Personne utilisant un ordinateur portable avec une interface claire, accompagnée d'icônes symbolisant l'accessibilité numérique
L'accessibilité se pense dès la conception, pas après la mise en ligne.

Publié le 2 novembre 2026 · Temps de lecture : 6 minutes

Un site accessible est un site que tout le monde peut utiliser, quelles que soient ses capacités, son matériel ou son contexte. Handicap visuel, moteur, auditif ou cognitif, mais aussi bras cassé, soleil sur l'écran ou connexion instable : les situations sont nombreuses. Bonne nouvelle : l'essentiel repose sur quelques réflexes simples, à intégrer dès le départ.

Pourquoi l'accessibilité n'est plus optionnelle

En France, environ un habitant sur six vit avec un handicap. Au-delà de l'enjeu humain, l'accessibilité est aussi un cadre légal : le RGAA (Référentiel général d'amélioration de l'accessibilité) s'impose aux services publics et à de nombreuses grandes entreprises. Depuis juin 2025, la directive européenne sur l'accessibilité étend en outre ces obligations à une large part des services numériques grand public, notamment le commerce en ligne.

Un site accessible profite à tous : meilleure lisibilité, navigation plus claire, code plus propre et, en général, un meilleur référencement naturel.

Les repères : WCAG et RGAA

Les WCAG et leurs quatre principes

Les WCAG du W3C reposent sur quatre principes, résumés par l'acronyme POUR :

  • Perceptible : l'information doit pouvoir être perçue (textes alternatifs, contrastes, sous-titres).
  • Utilisable : l'interface doit se manipuler au clavier, sans limite de temps abusive.
  • Compréhensible : contenus lisibles, comportements prévisibles, erreurs expliquées.
  • Robuste : le code doit fonctionner avec les technologies d'assistance actuelles et futures.

Le RGAA, version française

Le RGAA décline les WCAG en critères testables, regroupés en thématiques : images, couleurs, formulaires, navigation, tableaux, etc. Il se base sur trois niveaux de conformité (A, AA, AAA), le niveau AA étant l'objectif habituel. Un site doit aussi publier une déclaration d'accessibilité indiquant son niveau de conformité.

Les gestes simples dès la conception

Soigner les contrastes

Le ratio de contraste minimum entre texte et fond est de 4,5:1 pour le texte courant et de 3:1 pour le texte large et les éléments d'interface. Évitez le gris clair sur blanc, fréquent sur les petits textes. Ne transmettez jamais une information par la couleur seule : ajoutez une icône, un libellé ou un soulignement.

Prévoir une typographie lisible

  • Taille de base d'au moins 16 px, définie en unités relatives (rem).
  • Interligne confortable (environ 1,5).
  • Largeur de ligne limitée à 60-80 caractères.
  • Texte qui reste lisible avec un zoom à 200 %.

Ces choix rejoignent les principes abordés dans notre article sur les principes du design d'interface.

Rendre les liens et boutons identifiables

Un lien dans un texte doit rester souligné, sans dépendre du survol. Son intitulé doit être explicite : « Lire le guide de performance » plutôt que « Cliquez ici ». Les zones cliquables doivent offrir une taille suffisante, idéalement 44 × 44 px sur mobile.

Les gestes essentiels côté développement

Utiliser une structure sémantique

Les balises HTML natives portent du sens gratuitement. Utilisez header, nav, main, footer pour repérer les zones, et une hiérarchie de titres logique (un seul h1, puis h2, h3 sans saut). Un vrai button vaut toujours mieux qu'une div cliquable : il gère le clavier, le focus et le rôle automatiquement. Pour aller plus loin, consultez notre guide du front-end moderne en HTML et CSS.

Garantir la navigation au clavier

Toutes les fonctionnalités doivent être utilisables avec la touche Tab, Entrée, Espace et les flèches. Vérifiez trois points :

  1. l'ordre de tabulation suit l'ordre visuel ;
  2. le focus est toujours clairement visible (ne supprimez jamais l'outline sans alternative) ;
  3. aucun piège clavier ne bloque l'utilisateur, notamment dans les modales.

Un lien d'évitement « Aller au contenu principal » en début de page fait gagner un temps précieux aux utilisateurs du clavier.

Rédiger des textes alternatifs pertinents

Chaque image informative nécessite un attribut alt qui décrit sa fonction ou son contenu. Une image purement décorative reçoit un alt="" vide afin d'être ignorée par les lecteurs d'écran. Pour une image-lien, décrivez la destination, pas l'apparence.

Soigner les formulaires

  • Associez chaque champ à un label visible.
  • Indiquez clairement les champs obligatoires.
  • Rédigez des messages d'erreur précis, proches du champ, qui expliquent comment corriger.
  • Utilisez les attributs autocomplete adaptés.

Ne pas oublier les tableaux et les médias

Les tableaux de données doivent utiliser th avec l'attribut scope, et une légende via caption. Les vidéos nécessitent des sous-titres et, si besoin, une transcription. Évitez les lectures automatiques de son et les animations clignotantes.

Les outils pour tester

Aucun outil automatique ne détecte plus d'environ un tiers des problèmes : combinez toujours tests automatisés et vérifications manuelles.

Outils de test d'accessibilité courants
Outil Usage Type de test
Lighthouse Audit rapide intégré au navigateur Automatique
axe DevTools Détection d'erreurs de code et de contraste Automatique
Assistant RGAA Aide à la vérification des critères Semi-manuel
NVDA, VoiceOver Écoute réelle du rendu par un lecteur d'écran Manuel
Navigation au clavier Contrôle du focus et de l'ordre de tabulation Manuel

Pensez aussi à tester à 320 px de large, avec un zoom à 200 % et, si possible, auprès d'utilisateurs concernés.

Les erreurs fréquentes à éviter

  • Supprimer l'indicateur de focus pour des raisons esthétiques.
  • Multiplier les ARIA inutiles : une mauvaise utilisation est pire que pas d'ARIA. Privilégiez d'abord le HTML natif.
  • Oublier les alt ou y mettre « image » ou un nom de fichier.
  • Choisir des couleurs pâles pour les placeholders et les petits textes.
  • Utiliser des intitulés de liens vagues comme « En savoir plus » répétés.
  • Créer des menus ou modales inaccessibles au clavier.
  • Bloquer le zoom sur mobile.

Une démarche à intégrer dans la durée

L'accessibilité n'est pas une case à cocher en fin de projet. Intégrez-la dans votre maquettage, vos composants, vos revues de code et vos recettes. Un audit régulier, une personne référente et une déclaration d'accessibilité tenue à jour installent une vraie culture d'équipe. Un code accessible est aussi souvent plus léger et plus rapide : voir à ce sujet notre guide de la performance web.

Le pouvoir du Web est dans son universalité. L'accès pour tous, quel que soit le handicap, en est un aspect essentiel. — Tim Berners-Lee

Articles similaires