Accessibilité : un site utilisable par tous

Un site accessible, c’est un site que tout le monde peut utiliser : une personne aveugle avec un lecteur d’écran, quelqu’un qui ne peut pas se servir d’une souris, une personne daltonienne, un utilisateur âgé dont la vue baisse, ou simplement quelqu’un qui lit son téléphone en plein soleil. L’accessibilité n’est pas une couche de finition : c’est la qualité de base d’un bon site, et vous en avez déjà posé une grande partie en écrivant du HTML sémantique. Cette leçon complète le tableau avec le CSS, le clavier et quelques notions d’ARIA.

Pourquoi s’en soucier ?

Les raisons sont nombreuses : un grand nombre de personnes vivent avec un handicap visuel, auditif, moteur ou cognitif, permanent, temporaire (un bras cassé) ou situationnel (un écran éblouissant). Rendre un site accessible profite à tous : les sous-titres aident dans un train bruyant, un bon contraste aide en plein soleil, une navigation au clavier est utile à ceux qui préfèrent aller vite. C’est aussi une obligation légale pour de nombreux services, notamment publics. En France, le référentiel de référence est le RGAA, lui-même basé sur les recommandations internationales WCAG du W3C. Les introductions de la WAI (W3C) constituent un bon point d’entrée.

Les quatre principes

Les WCAG s’organisent autour de quatre principes faciles à retenir (« POUR » en anglais) :

• Perceptible : l’information doit pouvoir être perçue (texte alternatif, contraste, sous-titres) ;
• Utilisable : on doit pouvoir naviguer et interagir (clavier, temps suffisant, pas de contenu clignotant) ;
• Compréhensible : le contenu et le fonctionnement sont clairs (langue déclarée, messages d’erreur explicites) ;
• Robuste : le code fonctionne avec les technologies d’assistance (HTML valide et sémantique).

Les contrastes de couleurs

Le contraste entre le texte et son fond est mesuré par un rapport. Les recommandations WCAG de niveau AA demandent au minimum :

• 4,5 pour 1 pour le texte courant ;
• 3 pour 1 pour le grand texte (à partir d’environ 24 px, ou 19 px en gras) et pour les éléments d’interface importants (bordures de champs, icônes porteuses de sens).

Pas besoin de calculer à la main : les outils de développement du navigateur indiquent le ratio d’une couleur quand vous cliquez sur son échantillon dans le panneau de style, et il existe des vérificateurs de contraste en ligne. Un gris clair sur fond blanc échoue presque toujours ; testez vos choix de palette dès leur conception.

Ne transmettez jamais une information uniquement par la couleur. Un champ en erreur ne doit pas être signalé que par une bordure rouge : ajoutez un message texte, une icône ou un symbole. De même, un lien dans un paragraphe doit se distinguer autrement que par sa teinte (soulignement, par exemple).

La navigation au clavier

De nombreux utilisateurs naviguent sans souris : avec la touche Tab, un clavier adapté ou un dispositif de pointage alternatif. Testez votre site ainsi : posez la souris, utilisez Tab pour avancer, Maj + Tab pour reculer, Entrée pour activer un lien, Espace pour un bouton ou une case. Vérifiez que :

• tout élément interactif est atteignable ;
• l’ordre de tabulation suit l’ordre visuel et logique (l’ordre du code source !) ;
• on voit toujours où l’on se trouve ;
• on n’est jamais piégé dans un élément.

Les éléments natifs (a, button, input, select) sont accessibles au clavier sans effort. C’est une raison de plus de les choisir plutôt que de reconstituer des boutons avec des div.

Le focus doit être visible

Quand un élément est atteint au clavier, le navigateur dessine un contour. L’erreur classique est de le supprimer par souci d’esthétique :

/* À ne jamais faire sans remplacement */
a:focus { outline: none; }

Sans cet indicateur, un utilisateur du clavier est perdu. Au lieu de le retirer, personnalisez-le avec :focus-visible, qui n’apparaît que pour la navigation clavier (et pas lors d’un clic à la souris) :

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 3px;
}

Assurez-vous que ce contour soit bien contrasté avec le fond.

Le lien d’évitement

Sur chaque page, un utilisateur du clavier doit traverser le menu avant d’atteindre le contenu. Un lien d’évitement, placé tout en haut de la page, lui permet de sauter directement au contenu principal :

<body>
  <a class="evitement" href="#contenu">Aller au contenu principal</a>
  <header>…</header>
  <main id="contenu" tabindex="-1">…</main>
</body>

.evitement {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  background: white;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.evitement:focus {
  top: 0.5rem;
}

Le lien est caché hors de l’écran tant qu’il n’a pas le focus, puis apparaît quand on arrive dessus avec Tab. N’utilisez jamais display: none pour le cacher : il serait alors inaccessible. L’attribut tabindex="-1" sur la cible permet au focus de s’y poser.

Textes alternatifs, titres, liens, formulaires : le rappel

Vous avez déjà acquis des réflexes qui comptent beaucoup. Passez votre site en revue avec cette liste :

• chaque image porte un alt pertinent (vide si décorative) ;
• la page déclare sa langue avec lang sur html ;
• les titres forment un plan logique, sans saut de niveau ;
• les liens ont un intitulé compréhensible hors contexte ;
• chaque champ de formulaire a un label associé ;
• les zones cliquables sont assez grandes et espacées ;
• le texte reste lisible à 200 % de zoom, sans défilement horizontal ni chevauchement.

Une introduction à ARIA

ARIA (Accessible Rich Internet Applications) est un ensemble d’attributs qui complètent le HTML pour informer les technologies d’assistance, notamment dans les interfaces complexes. Voici la règle la plus importante, énoncée par ses concepteurs : pas d’ARIA vaut mieux que du mauvais ARIA. Si un élément HTML natif fait le travail, utilisez-le : un button n’a besoin d’aucun attribut ARIA pour être un bouton, alors qu’une div qui se fait passer pour un bouton devrait recevoir un rôle, un focus, des gestionnaires de clavier…

Quelques attributs simples, utiles même sans JavaScript :

Un piège classique : aria-hidden="true" sur un élément focusable le rend invisible aux lecteurs d’écran tout en restant atteignable au clavier, ce qui est très déroutant. Et ARIA ne change rien au comportement : ajouter role="button" à une div ne la rend pas utilisable au clavier.

Respecter les préférences de l’utilisateur

• prefers-reduced-motion : désactivez ou réduisez les animations pour ceux qui l’ont demandé (voir chapitre 4) ;
• prefers-color-scheme : proposez un thème sombre cohérent si vous le souhaitez ;
• les unités rem respectent la taille de police définie par l’utilisateur ;
• ne bloquez jamais le zoom, ni l’orientation de l’écran.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

Tester l’accessibilité

1. Parcourez la page au clavier uniquement.
2. Passez en revue les contrastes avec les outils du navigateur.
3. Utilisez les audits intégrés aux outils de développement, ou une extension d’audit : ils détectent de nombreux problèmes (images sans alt, labels manquants, contrastes insuffisants) mais pas tous : une vérification manuelle reste indispensable.
4. Si possible, essayez un lecteur d’écran (il en existe d’intégrés aux systèmes d’exploitation) et écoutez comment votre page est annoncée.
5. Zoomez à 200 % et testez sur mobile.

À vous de jouer

Réalisez un mini-audit de votre site :

1. parcourez-le uniquement au clavier et notez les endroits où le focus n’est pas visible ;
2. ajoutez un style :focus-visible bien contrasté ;
3. ajoutez un lien d’évitement et un id sur main ;
4. vérifiez le contraste de vos trois couleurs de texte principales ;
5. ajoutez aria-current="page" au lien de la page courante dans le menu, et un aria-label sur le nav.

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #e0a96d;
  outline-offset: 3px;
}

<a class="evitement" href="#contenu">Aller au contenu principal</a>
<nav aria-label="Navigation principale">
  <ul>
    <li><a href="index.html" aria-current="page">Accueil</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
<main id="contenu" tabindex="-1">…</main>

Dans la leçon suivante, vous terminez ce chapitre avec la performance et les bases du référencement.