Avant-propos : L’idée de ces travaux de mise en conformité et la rédaction de cet article m’ont été soufflées par Florian Kromer. Un grand merci à lui pour avoir attiré mon attention sur cet aspect crucial du développement web moderne.

L’accessibilité web, souvent abrégée a11y (car il y a 11 lettres entre le ‘a’ et le ‘y’), est souvent perçue comme une contrainte technique ou une liste de règles administratives rébarbatives. Pourtant, c’est tout l’inverse : c’est l’art de s’assurer que votre contenu est consultable par tous, quelle que soit la manière dont ils naviguent (souris, clavier, lecteur d’écran, ou même avec une connexion lente).

Dans cet article, nous allons décomposer les piliers de l’accessibilité en nous basant sur le refactoring récent de ce blog.

1. La vision : Le ratio de contraste 4.5:1

Le premier frein à la lecture est visuel. Si votre texte est gris clair sur fond blanc, vous excluez non seulement les personnes malvoyantes, mais aussi n’importe quel utilisateur lisant votre article sur son smartphone en plein soleil.

La notion didactique

Le ratio de contraste mesure la différence de luminance (luminosité perçue) entre la couleur du texte et la couleur de son arrière-plan. La norme WCAG AA exige un ratio minimal de 4.5:1 pour le texte de taille normale.

  • 1:1 correspond à du blanc sur blanc (invisible).
  • 21:1 correspond à du noir sur blanc (contraste maximum).

Comment tester ?

Ouvrez votre inspecteur de navigateur (F12), cliquez sur le petit carré de couleur d’une propriété CSS : le navigateur vous indique directement si vous passez le test avec une coche verte.

La solution

Ajustez vos variables CSS. Ne cherchez pas le “gris design” à tout prix ; cherchez la lisibilité.

/* Dans global.css */
--text-muted: #595959; /* La limite du gris sur blanc pour rester à 4.5:1 */

2. La navigation : Le clavier comme seul guide

Certains utilisateurs ne peuvent pas utiliser de souris (handicap moteur, matériel défaillant). Ils naviguent en utilisant la touche Tab pour sauter d’un élément interactif à l’autre.

La notion didactique : Le “Focus Ring”

Le focus est cet encadré qui apparaît autour d’un lien quand vous tabulez. Ne le supprimez jamais avec un outline: none sans proposer d’alternative visuelle forte. Si l’utilisateur ne sait pas où il se trouve sur la page, il est perdu.

Sur un blog, le header peut être long. Imaginez devoir appuyer 10 fois sur Tab à chaque changement de page pour arriver au début de l’article. La solution : Un lien caché qui n’apparaît qu’au focus et qui pointe vers l’ID de votre contenu principal.

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

3. La sémantique : Parler aux machines (ARIA)

Un lecteur d’écran (utilisé par les personnes aveugles ou malvoyantes) ne “voit” pas que votre menu kebab est une icône de trois barres. Il a besoin que le code lui explique le rôle et l’état de l’élément.

Les labels ARIA

Si votre bouton ne contient qu’un SVG, il est muet pour une machine.

  • Exemple clair : Un bouton loupe doit posséder un aria-label=“Rechercher”.

L’état dynamique : aria-expanded

C’est le point crucial pour les menus mobiles.

  • Le principe : Quand le menu est fermé, le bouton porte l’attribut aria-expanded=“false”.
  • L’action : Dès que le menu s’ouvre, votre JavaScript doit passer cet attribut à true. Cela permet à l’utilisateur de savoir instantanément si sa commande a été prise en compte.

4. La structure : La hiérarchie des titres (Hn)

Utiliser un <h3> parce que vous trouvez sa taille de police “jolie” alors qu’il n’y a pas de <h2> au-dessus est une erreur sémantique majeure.

Pourquoi c’est important ?

Les logiciels de lecture d’écran permettent de lister tous les titres de la page pour comprendre le plan de l’article. S’il manque des niveaux (passer de H1 à H3), le “plan” perçu est incohérent.

Que faire alors ?

  • H1 : Un seul par page (le titre de l’article).
  • H2 : Vos sections principales.
  • H3 : Vos sous-sections. Si vous voulez changer la taille visuelle, utilisez le CSS (ex: .title-large), pas la balise HTML.

Conclusion : Est-ce que mon site est accessible ?

Pour le déterminer, faites ces trois tests simples dès maintenant :

  • Le test du clavier : Pouvez-vous naviguer sur tout votre site et utiliser toutes les fonctions (recherche, dark mode) sans toucher à votre souris ?
  • Le test du soleil : Essayez de lire votre site avec la luminosité de votre écran réduite de moitié. Le texte reste-t-il lisible ?
  • L’outil automatique : Utilisez l’onglet Lighthouse (dans Chrome) ou l’extension Axe DevTools. Ils listeront vos erreurs prioritaires.

L’accessibilité n’est pas une destination, c’est un voyage. On ne finit jamais vraiment de rendre un site accessible, mais chaque petit changement améliore concrètement la vie d’un lecteur.