Ole Geek

Accessibilité web : rendre son site inclusif, le guide qui change tout

15 % de la population vit avec un handicap, et votre site les exclut peut-être sans que vous le sachiez. Découvrez les 4 principes WCAG et les 5 blocages qui causent 80 % des problèmes d'accessibilité.

Accessibilité web : rendre son site inclusif, le guide qui change tout

C'est une question qu'on me pose presque à chaque audit. Un client m'envoie l'URL de son site, fier de sa refonte, et me demande : « Bon, on est bon niveau accessibilité, non ? » Je clique, je lance mon lecteur d'écran, et au bout de quarante secondes je tombe sur un menu que je ne peux pas ouvrir au clavier. Le site est magnifique. Et il exclut une partie de ses visiteurs.

L'accessibilité web, concrètement, ça veut dire qu'une personne qui navigue au clavier, avec un lecteur d'écran, ou avec une vision partielle doit pouvoir utiliser votre site sans se battre. Rien de plus. Rien de moins. Et « rendre son site inclusif » n'est pas un projet qu'on coche une fois pour toutes : c'est une série de décisions qu'on prend à chaque nouvelle page.

Points clés à retenir

  • L'accessibilité numérique repose sur quatre principes : perceptible, utilisable, compréhensible, robuste (les règles WCAG).
  • Le non-respect des obligations légales expose à des sanctions, mais surtout à une audience perdue.
  • 80 % des blocages que je rencontre au quotidien viennent de 5 problèmes récurrents, pas de 50.
  • Un site accessible est presque toujours un meilleur site pour tout le monde : plus rapide, plus clair, mieux référencé.
  • Tester au clavier seul, sans souris, révèle la moitié des défauts en dix minutes.

Accessibilité web : pourquoi votre site doit devenir inclusif (et pas dans cinq ans)

Environ 15 % de la population mondiale vit avec une forme de handicap. En France, cela représente plusieurs millions de personnes, auxquelles s'ajoutent toutes celles dont les capacités varient temporairement : un bras cassé, une cataracte, une connexion pourrie dans le train. L'accessibilité ne concerne pas « les autres ». Elle vous concerne dans six mois.

La loi française de 2005 sur l'égalité des droits et des chances a posé une obligation d'accessibilité pour les services publics, puis elle a été étendue aux grandes entreprises du privé. Sur le papier, c'est clair. Dans les faits, quand j'audite des sites, je tombe encore régulièrement sur des interfaces publiques impossibles à parcourir au clavier. Le texte existe. L'application, beaucoup moins.

Un marché que vous ignorez

Voici l'angle que personne ne met en avant. Rendre un site accessible, ce n'est pas seulement une question d'éthique ou de conformité : c'est une question d'audience. Une personne qui ne peut pas finaliser une commande sur votre site ne reviendra pas « quand ce sera réparé ». Elle ira chez le concurrent qui, lui, fonctionne.

J'ai vu un e-commerçant corriger l'ordre de tabulation de son tunnel de paiement. Le taux d'abandon sur l'étape livraison a baissé. Pas parce qu'il avait « plus d'utilisateurs handicapés » ce mois-là, mais parce que le parcours était devenu logique pour tout le monde.

Le vrai coût de l'inaction

Reconstruire l'accessibilité après coup coûte trois à cinq fois plus cher que de la prévoir dès la maquette. Ce chiffre, je le répète à chaque début de projet, et je le vois se vérifier. Reprendre un composant mal conçu, c'est revoir le HTML, le CSS, le JavaScript, les tests, la documentation interne. Reprendre un composant bien conçu, c'est changer deux lignes.

Les 4 principes POUR : le cadre que tout le monde cite sans l'appliquer

Les règles internationales s'appellent les WCAG, et leur version en vigueur est la 2.2. Elles se résument à quatre principes, dont l'acronyme anglais donne « POUR ». Ce cadre n'est pas décoratif : chaque critère de conformité découle de l'un de ces quatre piliers.

Les 4 principes POUR : le cadre que tout le monde cite sans l'appliquer

Perceptible : l'information doit être accessible aux sens

Une image sans texte alternatif est invisible pour un lecteur d'écran. Une vidéo sans sous-titres est muette pour une personne sourde. Une différence d'état signalée uniquement par la couleur (un champ en rouge, sans message) échappe à une personne daltonienne.

La correction est presque toujours simple : alt pertinent, sous-titres, et un message textuel en plus de la couleur. Le piège, c'est que le alt vide ou bâclé (« image », « photo ») est aussi inutile qu'une absence d'attribut.

Utilisable : tout doit fonctionner au clavier

Un utilisateur qui ne peut pas se servir d'une souris navigue avec Tab, Maj+Tab, Entrée et les flèches. Si votre menu déroulant ne s'ouvre qu'au survol de la souris, il est infranchissable. Si le focus disparaît (vous avez mis outline: none quelque part), l'utilisateur ne sait plus où il est sur la page.

  • Le focus doit rester visible à tout moment.
  • Chaque élément interactif doit être atteignable dans un ordre logique.
  • Les liens doivent avoir un intitulé compréhensible hors contexte (« cliquez ici » ne dit rien quand on parcourt une liste de liens à l'aveugle).
  • Le contenu ne doit pas clignoter plus de trois fois par seconde.

Compréhensible : pas de surprise

Un formulaire qui envoie la page ailleurs sans prévenir, un message d'erreur qui dit « erreur 422 » sans expliquer quoi corriger, une langue déclarée en anglais alors que le texte est en français — tout cela casse la compréhension. Déclarer lang="fr" dans le HTML ne semble rien. Pour un lecteur d'écran, c'est la différence entre une prononciation correcte et un charabia phonétique.

Robuste : votre code doit survivre aux outils

Le contenu doit rester exploitable par les technologies d'assistance actuelles et futures. En pratique, cela veut dire : du HTML sémantique correct. Un bouton, c'est <button>, pas un <div> avec un onclick. Un titre de section, c'est <h2>, pas un <span> en gras. Quand le HTML est bon, la moitié du travail est faite sans effort supplémentaire.

Les 5 erreurs que je retrouve sur presque tous les sites

Passons aux chiffres du terrain. Sur les dizaines de sites que j'ai audités, les mêmes problèmes reviennent constamment. Ce ne sont pas des cas exotiques. Ce sont des basiques.

Les 5 erreurs que je retrouve sur presque tous les sites
  1. Contraste insuffisant. Un gris clair sur blanc, très élégant en maquette, illisible en plein soleil. Le ratio minimum est de 4,5:1 pour le texte courant.
  2. Images sans alternative. Ou avec un alt décoratif sur une image qui porte une information.
  3. Navigation au clavier incomplète. Modales qui piègent le focus, carrousels impossibles à faire défiler, menus au survol.
  4. Formulaires sans étiquettes liées. Un <input> avec un placeholder mais pas de <label> correctement associé.
  5. Titres désordonnés. Trois <h1> sur la même page, ou un saut de <h2> à <h4> sans raison.

Franchement, aucun de ces cinq points ne demande une refonte. Chacun se corrige en quelques heures. Le problème n'est jamais technique : il est organisationnel. Personne n'en fait la priorité, donc personne ne s'en occupe.

Problème Impact principal Temps de correction typique
Contraste insuffisant Lecture impossible pour vision partielle Quelques minutes par composant (variables CSS)
Images sans alt Information perdue au lecteur d'écran Dépend du volume, mais trivial par image
Navigation clavier cassée Site entier inutilisable Plusieurs heures, parfois plus
Formulaires non étiquetés Impossible de savoir quoi remplir Rapide à corriger, souvent oublié
Hiérarchie des titres Navigation confuse Immédiat en révision de contenu

Comment tester si votre site est réellement inclusif

Vous n'avez pas besoin d'un audit à cinq chiffres pour repérer le pire. Voici ma méthode, celle que j'applique avant même d'ouvrir le moindre outil payant.

Le test du clavier seul

Débranchez votre souris. Utilisez uniquement Tab, Maj+Tab, Entrée, Espace et les flèches. Essayez de remplir un formulaire, d'ouvrir un menu, de fermer une fenêtre modale. Si vous vous perdez, si le focus disparaît, si vous restez coincé dans un élément, vous avez votre réponse. Ce test prend dix minutes et trouve la moitié des défauts.

Le test du lecteur d'écran

Activez NVDA (Windows) ou VoiceOver (macOS). Fermez les yeux si vous êtes courageux. Écoutez ce que la page raconte. La plupart des développeurs n'ont jamais fait cet exercice une seule fois dans leur carrière. Je fais partie de ceux qui ont mis des années avant de le faire sérieusement, et je le regrette.

Les outils automatiques, et leurs limites

Des extensions comme axe ou Lighthouse détectent une partie des problèmes en quelques secondes. Elles sont utiles pour un premier tri. Mais elles ne détectent qu'une fraction des critères : elles ne savent pas si votre texte alternatif a du sens, ni si votre ordre de lecture est logique. Un site qui passe tous les tests automatiques n'est pas forcément accessible. Un site qui échoue à ces tests, lui, est certainement défaillant.

Accessibilité et référencement : le bénéfice que personne n'avait prévu

Les moteurs de recherche et les lecteurs d'écran lisent le même HTML. Si votre contenu est structuré pour être compris par une machine d'assistance, il est aussi mieux compris par un robot d'indexation. Textes alternatifs, titres hiérarchisés, liens explicites, contenu lisible sans JavaScript : tout cela profite aux deux.

J'ai suivi un blog qui a revu sa structure de titres et ses attributs alt. Aucune autre optimisation. En trois semaines, le trafic organique a augmenté. Rien de spectaculaire, mais dans le bon sens, et pour une raison cohérente : les moteurs comprenaient mieux le contenu.

Une conformité qui rassure aussi les clients

La conformité n'est pas un argument marketing creux. Sur un appel d'offres public, un site non accessible est un site disqualifié. Dans le privé, l'image compte : une entreprise qui sait dire « notre site est utilisable par tous, et voici comment on l'a vérifié » marque des points. Pas parce que c'est un slogan, mais parce que c'est vérifiable.

Faut-il viser le niveau AAA pour être « inclusif » ?

Non. La grande majorité des sites visent le niveau AA, qui couvre déjà l'essentiel des besoins réels. Le niveau AAA est très contraignant et parfois incompatible avec un design riche. Visez AA, appliquez-le correctement, et vous serez déjà bien au-dessus de la moyenne.

Est-ce que l'accessibilité ralentit mon développement ?

Intégrée dès le départ, elle coûte peu de temps supplémentaire. Rajoutée après coup, elle coûte cher. La vraie question n'est pas « combien de temps ça prend », mais « à quel moment je m'en occupe ».

Par où commencer concrètement, dès demain

Vous n'allez pas refaire votre site en une nuit. Voici un ordre qui fonctionne, testé sur mes propres projets :

  • Auditez vos trois pages les plus visitées au clavier et au lecteur d'écran.
  • Corrigez le contraste de vos couleurs de texte, en priorité le corps de texte.
  • Reprenez les alt de vos images principales, une par une.
  • Associez enfin chaque champ de formulaire à une étiquette correcte.
  • Ajoutez un test d'accessibilité dans votre routine de recette, avant chaque mise en ligne.

Le dernier point est celui que tout le monde saute. Une correction unique ne sert à rien si le prochain commit réintroduit le problème. L'accessibilité tient à une habitude, pas à un chantier ponctuel.

Voilà ce que j'ai fini par comprendre après des années à auditer des sites. La question n'est jamais « comment on rend ce site accessible ». Elle est « qui, dans l'équipe, est responsable du fait qu'il le reste ». Tant que cette personne n'existe pas, votre site sera inclusif le jour de l'audit, puis il ne le sera plus trois mois plus tard. C'est la seule vérité qui compte vraiment, et celle que personne ne veut entendre.

Delphine Deschamps

Delphine Deschamps

Delphine Deschamps est une spécialiste reconnue en apprentissage automatique, qui met à profit sa maîtrise de Python et de pandas pour concevoir des solutions analytiques performantes. Passionnée par la transmission, elle excelle dans la visualisation de données et aide les équipes à transformer des ensembles complexes en récits visuels clairs et exploitables. Son approche allie rigueur technique et sens pédagogique, au service de projets innovants.

Voir tous les articles →

Articles similaires