Améliorations pratiques de l’accessibilité d’un site Astro

Priorisez l’accessibilité Astro à partir d’une tâche réelle, comme un formulaire de contact. Au clavier, saisissez, corrigez les erreurs et terminez, en confrontant libellés et notifications à W3C WAI: Forms Tutorial. Vérifiez l’achèvement de la tâche séparément des scores automatiques.

Mise à jour du 26 septembre 2026 : Le code et le score PageSpeed Accessibility de 100 ci-dessous décrivent le site Astro + UnoCSS de mars 2026. Le site de l’entreprise déclare désormais Tailwind CSS 4.3.3. Ces vérifications partielles et ce score automatisé ne démontrent pas la conformité WCAG AA de tout le site. L’évaluation doit définir les pages et parcours complets concernés, puis examiner tous les critères A et AA par des tests automatiques et humains (exigences du W3C).

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>

1. 1 Champ et libellé Associer un libellé visible à chaque champ et signaler l’obligation autrement que par un astérisque.
2. 2 Focus au clavier Utiliser focus-visible pour repérer le champ actif et vérifier l’accès ainsi que la saisie au clavier.
3. 3 Erreur associée et annonce aria-invalid et aria-describedby relient champ et message ; role=alert annonce les changements. Ajouter une vérification manuelle.

---

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.

Complément : vérifier l’usage lors du passage à Tailwind CSS v4

Ajout du 30 septembre 2026. Lors du passage à Tailwind CSS v4, revérifiez en production les resets CSS face à Preflight, les icônes du CMS, le focus visible et la réduction des animations. Décidez de désactiver Preflight selon les styles existants, sans généraliser à tous les sites.

Tailwind v4 / Preflight

Ajout du 6 octobre 2026 : noms accessibles des boutons d’authentification et indications après inscription

Dans une modification anonymisée, les icônes des fournisseurs d’authentification ont été remplacées par leurs icônes officielles et leur affichage en production a été vérifié. Vérifier à la lecture à voix haute que le nom indique l’objectif du contrôle constitue un autre test. Ne vous fiez pas uniquement à l’icône : vérifiez le nom accessible du bouton, le focus au clavier et la destination proposée après l’inscription.

La vérification de l’implémentation des indications à l’écran et du focus est distincte de la recette d’une inscription réellement menée à terme par une personne. Ce compte rendu ne confirme ni le parcours complet d’inscription ni un test avec lecteur d’écran ; il ne prouve pas non plus la compatibilité avec tous les fournisseurs ou toutes les technologies d’assistance.