Guide pratique pour rendre un site Astro conforme au WCAG AA

Introduction

L’« accessibilité » est souvent un sujet qu’on repousse à plus tard. Pourtant, en y travaillant concrètement, on réalise que l’amélioration du contraste, de la navigation au clavier et de l’affichage du focus contribue directement à l’ergonomie pour tous les utilisateurs.

Cet article présente les améliorations réalisées pour atteindre un score PageSpeed Accessibility de 100 sur un site Astro + UnoCSS, classées par catégorie.

aria-hidden pour les icônes décoratives

Les icônes Iconify d’UnoCSS (i-lucide-*) sont souvent utilisées comme éléments décoratifs visuels, mais les lecteurs d’écran les annoncent comme « image » ou « image inconnue », ce qui crée de la confusion.

Solution

Ajoutez aria-hidden="true" aux icônes purement décoratives.

<span class="i-lucide-mail" aria-hidden="true"></span>
Contact

Cette correction a été appliquée à plus de 30 icônes sur l’ensemble du site. Attention aux icônes dans les composants comme StatBar, Callout, ServiceCard et ProcessFigure, souvent oubliées.

Notification pour lecteur d’écran sur les liens externes

Les liens ouverts avec target="_blank" sont visuellement identifiables comme ouvrant un nouvel onglet, mais cette information n’est pas transmise aux utilisateurs de lecteurs d’écran.

Solution

Ajoutez un texte supplémentaire visuellement masqué aux liens externes.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Example
  <span class="sr-only">(s'ouvre dans un nouvel onglet)</span>
</a>

Le plugin rehype-external-links permet d’ajouter automatiquement target="_blank" et rel aux liens externes dans le Markdown. Le texte de notification pour les lecteurs d’écran est ajouté côté template.

Assurer un contraste suffisant

L’insuffisance de contraste est le problème le plus fréquemment signalé par PageSpeed Insights.

Problèmes courants

Avec la palette de couleurs d’UnoCSS, text-slate-400 sur fond blanc donne un ratio de contraste d’environ 3:1, ne satisfaisant pas le critère WCAG AA de 4.5:1.

Solution

Passer de text-slate-400 à text-slate-500 (ratio de contraste de 4.6:1) permet de satisfaire le critère. Ce changement est particulièrement fréquent pour les textes auxiliaires comme les dates et les légendes — vérifiez l’ensemble du site.

Styles focus-visible

Pour les utilisateurs naviguant au clavier, l’indicateur de focus est le seul repère visuel de leur position actuelle. Le WCAG 2.4.7 exige l’affichage du focus.

Implémentation avec UnoCSS

Définissez un style de focus commun pour les boutons et les liens. La fonctionnalité de raccourcis d’UnoCSS permet de l’appliquer globalement à partir d’une seule définition.

shortcuts: {
  'ac-btn': '... focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:outline-none',
}

focus-visible est une pseudo-classe qui n’affiche l’anneau que lors de la navigation au clavier, pas lors d’un clic souris. L’UX est meilleure qu’avec focus.

Éléments souvent oubliés

• Boutons de copie
• Bouton de retour en haut
• Bouton de fermeture des annonces ancrées
• Bouton de fermeture des modales

Soulignement des liens en ligne

PageSpeed peut signaler que « les liens ne sont identifiables que par la couleur ». Les utilisateurs ayant des troubles de la vision des couleurs ne peuvent pas distinguer les liens.

Solution

Affichez le soulignement en permanence au lieu de ne l’afficher qu’au survol. L’unification via les raccourcis UnoCSS est recommandée.

shortcuts: {
  'ac-link': 'underline decoration-brand-300 underline-offset-2 hover:decoration-brand-500 transition-colors',
}

Accessibilité des formulaires

L’accessibilité est particulièrement importante dans les contextes de saisie utilisateur, comme les formulaires de contact.

Validation en ligne

Affichez immédiatement les messages d’erreur sur les événements blur / input, en les associant aux attributs aria suivants :

• aria-invalid="true" — signale que la saisie est invalide
• aria-describedby — référence l’ID du message d’erreur

<input
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<p id="email-error" role="alert">Veuillez saisir une adresse e-mail valide</p>

Indication des champs obligatoires

Le marqueur visuel * seul est insuffisant. Ajoutez un texte complémentaire pour les lecteurs d’écran.

<span aria-hidden="true">*</span>
<span class="sr-only">(obligatoire)</span>

Attribut role des éléments figure

Définir role="img" sur les éléments <figure> masque les éléments enfants pour les lecteurs d’écran. Pour les composants contenant des icônes et du texte descriptif (InsightGrid, ProcessFigure, Timeline), changez pour role="group" afin de garder le contenu interne accessible.

Attribut role des éléments de liste

Lorsque list-style: none est défini en CSS, un bug connu de VoiceOver dans Safari fait que les listes ne sont plus reconnues comme telles.

Ajoutez role="list" aux éléments <ol> / <ul> du fil d’Ariane, de la barre latérale et du pied de page. Vérifiez toutes les listes dont l’apparence a été personnalisée.

Autres améliorations

Attributs width/height des images

Les images sans width et height explicites causent un décalage de mise en page (CLS — Cumulative Layout Shift) lors du chargement. Spécifiez les dimensions pour toutes les images, y compris les avatars (32×32, 48×48, 64×64px) et les miniatures YouTube (480×360px).

aria-live pour le slider Hero

Les sliders à défilement automatique ne transmettent pas les changements aux utilisateurs de lecteurs d’écran. Prévoyez une zone aria-live="polite" et notifiez par texte : « Diapositive 1 / 4 : ○○ ».

aria-labelledby pour les dialog

Référencez l’ID de l’élément titre via aria-labelledby sur les éléments <dialog> pour que les lecteurs d’écran puissent annoncer l’objet de la modale.

aria-current pour la pagination

Définissez aria-current="page" sur le numéro de page actuel pour indiquer aux lecteurs d’écran qu’il s’agit de la page en cours.

Mise à jour de l’aria-label du bouton de copie

Lors de la copie réussie dans le presse-papiers, mettez dynamiquement à jour l’aria-label en « Copié » pour notifier le changement d’état aux lecteurs d’écran.

Conclusion

Chaque amélioration de l’accessibilité est un petit changement en soi, mais leur accumulation améliore considérablement la qualité globale du site. Les trois mesures les plus efficaces ont été :

1. Application globale de focus-visible : amélioration radicale de la navigation au clavier
2. Correction du ratio de contraste : text-slate-400 → text-slate-500 suffit pour satisfaire le WCAG AA
3. Notification SR pour les liens externes : traitement automatique de tous les liens en combinaison avec rehype-external-links

Nous recommandons de commencer par scanner le site avec axe DevTools et de corriger d’abord les problèmes détectables automatiquement.

Série d’articles associée

Cet article fait partie de la série « Guide d’amélioration de la qualité d’un site Astro ». Les améliorations de performance, SEO et UX sont présentées dans des articles dédiés.