L’accessibilité web n’est pas optionnelle — c’est une obligation professionnelle

L’accessibilité web (a11y) consiste à concevoir des sites utilisables par tout le monde, y compris les personnes en situation de handicap : malvoyants, daltoniens, personnes à mobilité réduite, sourds et malentendants, personnes avec des troubles cognitifs. En Afrique subsaharienne, l’OMS estime que 15 % de la population vit avec une forme de handicap. Ignorer l’accessibilité, c’est exclure 15 % de vos utilisateurs potentiels.

Au-delà de l’aspect éthique, l’accessibilité améliore le SEO (Google favorise les sites accessibles), l’expérience mobile (les bonnes pratiques a11y améliorent l’UX pour tous), et dans certains pays, c’est une obligation légale (ADA aux USA, RGAA en France).

Les 4 principes WCAG (Web Content Accessibility Guidelines)

Les WCAG sont le standard international de l’accessibilité web. Ils s’organisent autour de 4 principes :

1. Perceptible : le contenu doit être perçu par tous les sens

Images : chaque image informative doit avoir un attribut alt descriptif. Pas alt="image" mais alt="Femme portant le sac à main en cuir marron, vue de face". Les images décoratives ont un alt="" vide
Vidéos : ajoutez des sous-titres pour les sourds et malentendants. YouTube génère des sous-titres automatiques (à corriger manuellement)
Contraste : le texte doit avoir un ratio de contraste minimum de 4.5:1 par rapport au fond. Vérifiez avec WebAIM Contrast Checker (webaim.org/resources/contrastchecker). Un texte gris #999 sur fond blanc #fff a un ratio de 2.85:1 — insuffisant
Taille du texte : le corps de texte ne doit jamais être inférieur à 16px. Utilisez des unités relatives (rem) pour que l’utilisateur puisse zoomer

2. Utilisable : l’interface doit fonctionner avec tous les dispositifs

Navigation au clavier : chaque élément interactif (lien, bouton, champ de formulaire) doit être accessible avec la touche Tab. Testez : naviguez sur votre site sans souris. Si vous êtes bloqué, il y a un problème
Focus visible : quand un élément est sélectionné au clavier, il doit avoir un indicateur visuel clair (outline). Ne faites jamais outline: none sans fournir une alternative visible
Pas de piège au clavier : l’utilisateur doit toujours pouvoir quitter un modal ou un menu avec Échap
Temps suffisant : pas de timeout automatique sur les formulaires sans avertissement

3. Compréhensible : le contenu et l’interface doivent être clairs

Langage simple : écrivez pour un niveau de lecture de 12-14 ans. Pas de jargon inutile
Messages d’erreur explicites : pas « Erreur » mais « Le numéro de téléphone doit contenir 9 chiffres »
Étiquettes de formulaire : chaque champ doit avoir un <label> associé, pas juste un placeholder
Navigation cohérente : le menu est au même endroit sur chaque page, les boutons ont le même style

4. Robuste : le code doit être interprétable par les technologies d’assistance

HTML sémantique : utilisez <nav> pour la navigation, <main> pour le contenu principal, <header> et <footer>, <button> pour les boutons (pas des <div onclick>)
Rôles ARIA quand le HTML sémantique ne suffit pas : role="alert" pour les messages d’erreur dynamiques, aria-label pour les boutons sans texte (icônes)
Structure de titres logique : un seul <h1> par page, suivi de <h2>, <h3> sans sauter de niveaux

Les corrections les plus impactantes (20 % d’effort, 80 % de résultat)

1. Ajouter les alt text aux images

Dans WordPress, éditez chaque image dans la médiathèque et remplissez le champ « Texte alternatif ». Pour un e-commerce, le alt text doit décrire le produit comme vous le feriez à quelqu’un au téléphone.

2. Corriger le contraste des couleurs

Lancez WAVE (wave.webaim.org) sur votre site. Il surligne immédiatement les éléments avec un contraste insuffisant. Corrigez en assombrissant les textes clairs ou en éclaircissant les fonds sombres.

3. Rendre les formulaires accessibles

<!-- ❌ Inaccessible -->
<input type="text" placeholder="Votre email">

<!-- ✅ Accessible -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email" 
       autocomplete="email" required
       aria-describedby="email-help">
<span id="email-help">Nous ne partagerons jamais votre email</span>

4. Ajouter un lien « Aller au contenu »

Les utilisateurs de lecteurs d’écran doivent pouvoir sauter la navigation pour accéder directement au contenu :

<body>
  <a href="#main-content" class="skip-link">Aller au contenu principal</a>
  <nav>...</nav>
  <main id="main-content">...</main>
</body>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}
</style>

Outils de test d’accessibilité

WAVE (wave.webaim.org) : audit gratuit en ligne — le plus simple pour débuter
Lighthouse (intégré à Chrome DevTools > onglet Lighthouse) : audit automatisé avec score d’accessibilité
axe DevTools (extension Chrome gratuite) : détection d’erreurs a11y directement dans le navigateur
NVDA (nvaccess.org) : lecteur d’écran gratuit pour Windows. Installez-le et naviguez sur votre site les yeux fermés — c’est l’expérience de vos utilisateurs aveugles
Colorblindly (extension Chrome) : simule les différents types de daltonisme

Accessibilité sur WordPress

WordPress intègre des outils d’accessibilité, mais votre thème peut les annuler :

Choisissez un thème taggé « accessibility-ready » dans le répertoire WordPress
Installez le plugin WP Accessibility (gratuit) : il corrige les problèmes courants (skip links, labels manquants, toolbar a11y)
Vérifiez que votre thème ne fait pas outline: none sans alternative — c’est l’erreur d’accessibilité la plus courante dans les thèmes WordPress

Tutoriel : L’accessibilité web — concevoir pour tous