L'accessibilité n'est pas une fonctionnalité — c'est le produit

J'ai regardé un développeur aveugle essayer d'utiliser une application web que j'avais construite. Il tabulait à travers la page pendant qu'un lecteur d'écran annonçait ce qu'il rencontrait. Ce que j'ai entendu : « Lien. Lien. Bouton. Image. Image. Lien. Bouton. »

Pas de libellés. Pas de titres. Pas de repères. Une page qui était belle et fonctionnait parfaitement pour les utilisateurs voyants était, pour lui, un mur d'éléments interactifs non étiquetés sans structure, sans hiérarchie, et sans moyen de comprendre ce que quoi que ce soit faisait.

C'était il y a quatre ans, et ça a fondamentalement changé ma façon de penser la construction logicielle.

Les chiffres devraient nous embarrasser

1,3 milliard de personnes — 16 % de la population mondiale — vivent avec un handicap significatif. Pourtant, 96,3 % des principaux millions de pages d'accueil ont des défaillances WCAG détectables. Pas des problèmes subtils nécessitant un examen expert — des défaillances détectables que les outils automatisés peuvent attraper.

Ce n'est pas une limitation technique. C'est un choix — généralement inconscient.

L'accessibilité est plus simple que vous ne pensez

80 % des défaillances d'accessibilité courantes peuvent être corrigées avec des connaissances HTML de base.

Utilisez du HTML sémantique

<!-- Mauvais : un div qui prétend être un bouton -->
<div class="btn primary" onclick="submit()">Soumettre</div>
 
<!-- Bon : un vrai bouton -->
<button type="submit" class="btn primary">Soumettre</button>

L'élément <button> est focusable par défaut. Il répond aux touches Entrée et Espace. Les lecteurs d'écran l'annoncent comme un bouton. Le <div> ne fait rien de tout ça sans travail supplémentaire significatif.

Écrivez un texte alternatif significatif

Images informatives — texte alt qui transmet la même information :

<img
  src="revenue-chart.png"
  alt="Le chiffre d'affaires est passé de 1,2M€ au T1 à 2,8M€ au T4, avec la croissance la plus forte au T3."
/>

Images décoratives — texte alt vide :

<img src="decorative-wave.svg" alt="" />

Labellisez vos formulaires

<!-- Mauvais : le placeholder disparaît quand l'utilisateur tape -->
<input type="email" placeholder="Adresse email" />
 
<!-- Bon : le label est toujours visible et associé -->
<label for="email">Adresse email</label>
<input type="email" id="email" />

Les placeholders ne sont pas des labels. Ils disparaissent au focus, ils ont un contraste insuffisant par défaut, et les lecteurs d'écran ne les traitent pas de manière fiable comme des labels.

La couleur ne suffit pas

Si vous utilisez la couleur seule pour communiquer de l'information, vous excluez les personnes avec des déficiences de vision des couleurs — environ 8 % des hommes.

Ne faites pas ça :

• Du texte rouge pour indiquer des erreurs sans aucun autre indicateur
• Du vert/rouge pour montrer un statut sans labels
• Des graphiques qui reposent uniquement sur la couleur

Faites plutôt :

• Combinez la couleur avec des labels textuels, des icônes ou des motifs
• Utilisez des ratios de contraste suffisants (4,5:1 pour le texte normal, 3:1 pour le texte large)

La navigation clavier n'est pas optionnelle

Testez vous-même maintenant : essayez d'utiliser votre app avec seulement les touches Tab, Entrée, Espace et les flèches. Pouvez-vous naviguer vers chaque élément interactif ? Voyez-vous où est le focus à tout moment ? Pouvez-vous ouvrir et fermer les menus ? Soumettre des formulaires ?

Si vous êtes bloqué quelque part, les utilisateurs au clavier sont bloqués là en permanence.

Tester l'accessibilité

Niveau 1 : Outils automatisés (10 minutes)

• Lancez axe DevTools sur chaque page
• Lancez l'audit d'accessibilité Lighthouse

Niveau 2 : Tests clavier manuels (30 minutes)

• Tabulez à travers chaque page
• Vérifiez les indicateurs de focus visibles

Niveau 3 : Tests avec lecteur d'écran (1 heure)

• Utilisez VoiceOver (Mac), NVDA (Windows) ou TalkBack (Android)
• Naviguez par titres — forment-ils un plan logique ?

Niveau 4 : Tests utilisateurs

• Incluez des personnes en situation de handicap dans vos tests utilisateurs

L'argument business

• Taille du marché : 1,3 milliard de personnes avec un pouvoir d'achat collectif de 1,9 billion de dollars
• Exposition juridique : Les procès liés à l'accessibilité web ont augmenté de 320 % entre 2018 et 2023
• Bénéfice SEO : Le HTML sémantique et une bonne structure de titres améliorent directement le référencement
• Bénéfice universel : Les sous-titres aident les gens qui regardent des vidéos dans des environnements bruyants. La navigation clavier aide les power users.

Rendre ça durable

Ajoutez ceci à votre check-list de pull request :

• Toutes les images ont un texte alt approprié
• Tous les champs de formulaire ont des labels associés
• Tous les éléments interactifs sont accessibles au clavier
• La couleur n'est pas le seul moyen de transmettre l'information
• Les nouveaux composants ont été testés avec un lecteur d'écran
• axe DevTools montre zéro violation

Ce n'est pas du travail en plus — c'est le travail. Une interface que 16 % du monde ne peut pas utiliser n'est pas un produit fonctionnel complet. C'est un produit cassé.