L'accessibilité web garantit que les sites web sont utilisables par les personnes en situation de handicap — y compris les déficiences visuelles, auditives, motrices et cognitives. Au-delà de faire ce qui est juste, l'accessibilité est de plus en plus une obligation légale et améliore indirectement le SEO.

Le Cadre WCAG

WCAG (Web Content Accessibility Guidelines) est organisé autour de quatre principes connus sous le nom de POUR :

Perceptible — L'information doit être présentable aux utilisateurs de façons qu'ils peuvent percevoir
Utilisable — Les composants de l'interface doivent être utilisables
Compréhensible — L'information et le fonctionnement de l'UI doivent être compréhensibles
Robuste — Le contenu doit être suffisamment robuste pour être interprété par divers agents utilisateurs

WCAG a trois niveaux de conformité : A (minimum), AA (standard du secteur) et AAA (amélioré). La plupart des directives d'accessibilité et des exigences légales ciblent le Niveau AA.

Les Échecs les Plus Courants

1. Texte Alt Manquant (Images)

Le texte alt est lu par les lecteurs d'écran à la place de l'image. Chaque <img> a besoin d'un attribut alt :

<!-- Image informative -->
<img src="graphique.png" alt="Graphique à barres montrant une augmentation de 40% du chiffre d'affaires T1 2026" />

<!-- Image décorative (masquer pour les lecteurs d'écran) -->
<img src="separateur.png" alt="" role="presentation" />

<!-- Bouton avec icône (décrire l'action) -->
<button><img src="corbeille.svg" alt="Supprimer l'élément" /></button>

2. Contraste de Couleur Insuffisant

WCAG AA exige :

Un ratio de contraste de 4,5:1 pour le texte normal
3:1 pour le texte large (18px+ ou 14px+ en gras)
3:1 pour les composants UI et les éléments graphiques

Outils : WebAIM Contrast Checker, panneau d'accessibilité des DevTools du navigateur.

3. Étiquettes de Formulaire Manquantes

Chaque champ de formulaire a besoin d'une étiquette associée. Ne comptez pas uniquement sur le texte d'espace réservé — il disparaît quand l'utilisateur commence à taper :

<!-- Correct -->
<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" />

<!-- Également correct (étiquette visuellement masquée) -->
<label for="recherche" class="sr-only">Rechercher</label>
<input id="recherche" type="search" placeholder="Rechercher..." />

4. Navigation au Clavier

Tous les éléments interactifs doivent être accessibles et opérables uniquement au clavier :

Tab/Maj+Tab pour la navigation
Entrée/Espace pour activer les boutons et liens
Touches fléchées pour les menus et composants
Échap pour fermer les boîtes de dialogue

Testez en débranchant votre souris et en naviguant sur votre site avec Tab seulement.

5. Indicateurs de Focus

Le style :focus doit être visible. Ne faites jamais *:focus { outline: none } sans fournir un indicateur de focus alternatif :

/* Anneau de focus personnalisé respectant les préférences utilisateur */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

6. Régions de Repère Manquantes

Utilisez des repères HTML sémantiques pour que les utilisateurs de lecteurs d'écran puissent naviguer par région :

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

7. Mauvaise Utilisation d'ARIA

ARIA (Accessible Rich Internet Applications) doit améliorer l'accessibilité, pas créer de confusion. Règles clés :

Pas d'ARIA vaut mieux qu'un mauvais ARIA
N'utilisez jamais ARIA pour remplacer le HTML sémantique
Les rôles ARIA interactifs ont besoin du support clavier

<!-- Incorrect : ARIA sur un élément non interactif -->
<div role="button" onclick="...">Cliquez ici</div>

<!-- Correct : Utilisez l'élément natif -->
<button onclick="...">Cliquez ici</button>

8. Sauter du Contenu

Fournissez des liens "aller au contenu principal" pour que les utilisateurs clavier n'aient pas à tabber à travers toute la navigation sur chaque page :

<a href="#contenu-principal" class="sr-only focus:not-sr-only">
  Aller au contenu principal
</a>

Considérations Légales

Les poursuites pour accessibilité sont en hausse. En France et dans l'Union Européenne :

La Directive Européenne sur l'Accessibilité du Web (2016/2102) oblige les organismes publics
Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est le standard français basé sur WCAG 2.1 AA
La loi du 11 février 2005 pour les droits des personnes handicapées couvre les services publics numériques

Gains Rapides (Moins d'une Heure Chacun)

Ajoutez du texte alt à toutes les images (Krokanti Audit vous indique exactement lesquelles manquent)
Corrigez vos styles de focus
Ajoutez des éléments <label> à tous les champs de formulaire
Vérifiez vos ratios de contraste de couleur
Assurez-vous que votre site fonctionne avec la navigation clavier uniquement

Krokanti Audit vérifie automatiquement plus de 20 règles d'accessibilité — incluant la couverture du texte alt, les ratios de contraste, l'utilisation d'ARIA, l'étiquetage des formulaires et les modèles d'accessibilité clavier. Lancez un audit gratuit pour voir où vous en êtes.