Accessibilité web : les bonnes pratiques WCAG pour un site inclusif

L'accessibilité web : pourquoi c'est urgent

En France, la loi pour une République numérique impose l'accessibilité aux services publics, et les tribunaux commencent à condamner des entreprises privées pour non-conformité. Mais au-delà du légal, l'accessibilité améliore l'expérience de tous les utilisateurs — pas seulement des personnes en situation de handicap.

Les 4 principes WCAG (Perceivable, Operable, Understandable, Robust) constituent le cadre international de référence, disponibles en niveaux A, AA et AAA.

Structure HTML sémantique

La première étape, et la plus impactante, est d'utiliser les bons éléments HTML :

<!-- ❌ Mauvais : divs sans sémantique -->
<div class="header">
  <div class="nav">
    <div onclick="aller()">Accueil</div>
  </div>
</div>

<!-- ✅ Bon : éléments sémantiques -->
<header>
  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/services">Services</a></li>
    </ul>
  </nav>
</header>

<main id="contenu-principal">
  <article>
    <h1>Titre de l'article</h1>
    <p>Contenu...</p>
  </article>
</main>

<footer>
  <p>© 2025 Mon Site</p>
</footer>

Alternatives textuelles pour les images

<!-- Image informative : alt descriptif -->
<img src="graphique-ventes.png" 
     alt="Graphique montrant une hausse des ventes de 35% au T1 2025">

<!-- Image décorative : alt vide (pas d'alt du tout = mauvaise pratique) -->
<img src="decoration.svg" alt="">

<!-- Image complexe : description longue -->
<figure>
  <img src="schema-architecture.png" 
       alt="Schéma d'architecture microservices"
       aria-describedby="desc-schema">
  <figcaption id="desc-schema">
    Le schéma montre 4 services indépendants (Auth, API, Storage, Notification) 
    communiquant via une API Gateway centrale...
  </figcaption>
</figure>

Contrastes de couleurs

Le ratio minimum WCAG AA est 4,5:1 pour le texte normal et 3:1 pour le grand texte (18px+ ou 14px gras).

/* ❌ Ratio insuffisant */
.texte-problematique {
  color: #aaaaaa; /* gris clair */
  background: #ffffff; /* blanc */
  /* Ratio : 2,32:1 — ÉCHEC */
}

/* ✅ Ratio suffisant */
.texte-accessible {
  color: #595959; /* gris foncé */
  background: #ffffff;
  /* Ratio : 7,0:1 — SUCCÈS */
}

Outil gratuit : Colour Contrast Analyser

Navigation au clavier

Tous les éléments interactifs doivent être accessibles au clavier et avoir un focus visible :

/* Ne jamais supprimer le focus sans alternative */
:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Style de focus amélioré (visible uniquement au clavier) */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Masquer l'outline pour la souris uniquement */
:focus:not(:focus-visible) {
  outline: none;
}

Pour les éléments interactifs non-natifs :

<!-- ❌ Non accessible au clavier -->
<div class="btn" onclick="submit()">Envoyer</div>

<!-- ✅ Accessible -->
<button type="button" onclick="submit()">Envoyer</button>

<!-- Ou avec role si vraiment nécessaire -->
<div role="button" tabindex="0" 
     onkeydown="if(event.key==='Enter'||event.key===' ')submit()"
     onclick="submit()">Envoyer</div>

Attributs ARIA essentiels

ARIA complète le HTML quand la sémantique native ne suffit pas :

<!-- Menu déroulant -->
<button aria-expanded="false" aria-controls="menu-nav" id="btn-menu">
  Menu <span aria-hidden="true">▼</span>
</button>
<ul id="menu-nav" role="menu" hidden>
  <li role="menuitem"><a href="/accueil">Accueil</a></li>
</ul>

<!-- Formulaire avec erreurs -->
<label for="email">Email <span aria-hidden="true">*</span>
  <span class="sr-only">obligatoire</span>
</label>
<input type="email" id="email" 
       aria-required="true"
       aria-describedby="email-erreur"
       aria-invalid="true">
<p id="email-erreur" role="alert">
  Format d'email invalide. Exemple : nom@domaine.fr
</p>

<!-- Classe pour lecteurs d'écran uniquement -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
</style>

Tester l'accessibilité de votre site

Outils automatiques (détectent ~30% des problèmes) :

# axe-core en ligne de commande
npm install -g @axe-core/cli
axe https://votresite.fr --tags wcag2a,wcag2aa

Test manuel incontournable :

1. Naviguez avec Tab uniquement (sans souris)
2. Activez le lecteur d'écran (NVDA sur Windows, VoiceOver sur Mac)
3. Zoomez à 200% : le contenu doit rester lisible
4. Testez en niveaux de gris (simulez le daltonisme)

L'accessibilité améliore aussi le SEO

Un site accessible est mécaniquement mieux référencé : les balises sémantiques aident les robots, les textes alternatifs enrichissent le contenu indexé, la navigation clavier réduit les frictions. L'accessibilité web n'est pas un coût, c'est un investissement doublement rentable.