Contexte
Une structure basée à Fribourg utilisait un site WordPress en blocs pour informer et orienter le public. Le site était globalement propre, mais plusieurs détails nuisaient à l’accessibilité: navigation clavier incomplète, contrastes insuffisants sur certains boutons et messages de formulaire peu explicites. L’objectif était d’améliorer l’expérience sans alourdir le site, et de rendre les parcours essentiels plus inclusifs.
Objectifs
- Améliorer la navigation clavier et la visibilité du focus.
- Corriger des contrastes problématiques sur des composants récurrents.
- Rendre les formulaires plus accessibles (labels, erreurs, aides).
- Conserver de bonnes performances et éviter l’ajout de scripts inutiles.
- Mesurer l’impact sur l’usage (engagement, formulaires) via GA4.
Diagnostic initial
- Navigation clavier : certains éléments interactifs n’étaient pas atteignables ou pas identifiés clairement.
- Focus : contour visible insuffisant sur fond clair, surtout sur mobile.
- Contrastes : textes et boutons secondaires trop pâles dans certaines sections.
- Formulaires : labels parfois implicites, erreurs renvoyées sans indication d’emplacement.
Approche mise en place
Les corrections ont été priorisées sur les parcours réels: navigation, contact et pages les plus consultées. Les tests ont été réalisés avec clavier, lecteurs d’écran (vérification de base) et outils de diagnostic (Lighthouse, Axe).
1) Focus visible et navigation clavier
- Uniformisation de l’affichage du focus sur liens, boutons et champs.
- Correction de quelques éléments personnalisés non accessibles au clavier.
- Vérification de l’ordre de tabulation sur les sections Gutenberg.
2) Contrastes et lisibilité
- Corrections CSS ciblées sur des composants récurrents (boutons outline, textes atténués).
- Réglages sur les états hover/focus pour garder une bonne lisibilité.
- Validation par échantillon sur pages clés.
3) Formulaires: labels, aides et erreurs
- Ajout de labels explicites et d’aides courtes (format téléphone, champs obligatoires).
- Messages d’erreur plus précis, associés aux champs concernés.
- Vérification reCAPTCHA sans bloquer inutilement le parcours.
4) Mesure (GA4)
- Suivi des clics vers contact et des envois de formulaire.
- Contrôle du taux d’engagement sur mobile.
- Lecture des pages où l’abandon était le plus probable.
Exemple technique : skip link (lien d’accès rapide au contenu)
Composant simple et très utile au clavier. À intégrer dans le header du thème (ou via un hook).
<a class="cc-skip-link" href="#contenu">Aller au contenu</a>.cc-skip-link{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.cc-skip-link:focus{
left:16px;
top:16px;
width:auto;
height:auto;
padding:.6rem 1rem;
border-radius:12px;
background:#fff;
border:1px solid rgba(0,0,0,.15);
box-shadow:0 10px 24px rgba(0,0,0,.12);
z-index:9999;
}Exemple technique : erreurs de formulaire associées à un champ (HTML)
Principe: relier l’erreur au champ via aria-describedby.
<label for="email">E-mail</label>
<input id="email" name="email" type="email" aria-describedby="email-help email-error" required>
<small id="email-help">Format: [email protected]</small>
<div id="email-error" role="alert" hidden>Merci d'indiquer une adresse e-mail valide.</div>Résultats observés
- Navigation clavier plus fiable, avec un focus nettement visible.
- Lisibilité améliorée sur les boutons et sections à contraste faible.
- Formulaires plus simples à comprendre, donc moins d’erreurs de saisie.
- Expérience mobile plus cohérente, sans ajout de lourdeur technique.
Points clés à retenir
- De petites corrections ciblées (focus, labels, contrastes) améliorent fortement l’accessibilité.
- Gutenberg permet des modèles cohérents, mais il faut vérifier les composants ajoutés autour.
- L’accessibilité et la performance peuvent avancer ensemble, si les changements restent sobres.
