Accessibilité WordPress à Sierre: formulaires, contrastes et navigation clavier pour un site plus inclusif

Contexte

Un site WordPress en blocs, utilisé pour informer et orienter le public à Sierre, recevait régulièrement des retours: certaines personnes avaient de la peine à naviguer au clavier, et plusieurs champs de formulaire manquaient de clarté. Le site était globalement propre, mais quelques détails suffisaient à créer de la friction. L’objectif était d’améliorer l’accessibilité sans alourdir la technique, et de rendre les parcours essentiels plus inclusifs.

Objectifs

• Rendre la navigation clavier fiable sur les pages principales.
• Améliorer la visibilité du focus et des états interactifs.
• Corriger des contrastes faibles sur boutons et textes atténués.
• Rendre les formulaires plus compréhensibles (labels, aides, erreurs).
• Contrôler l’impact sur l’engagement via GA4 (mobile et formulaires).

Diagnostic initial

• Focus : visible sur certains éléments, insuffisant sur d’autres (notamment liens et boutons secondaires).
• Navigation clavier : ordre de tabulation parfois illogique autour de sections réutilisées.
• Contrastes : textes « muted » trop légers sur fond clair, et outline peu lisible.
• Formulaires : labels implicites, messages d’erreur non associés au champ concerné.

Actions mises en place

1) Focus visible cohérent

• Uniformisation des styles :focus-visible sur liens, boutons, champs.
• Tests sur desktop et mobile (clavier + navigation assistée).
• Vérification des composants ajoutés autour de Gutenberg (menus, formulaires).

2) Contrastes et états interactifs

• Corrections CSS ciblées sur les composants récurrents.
• Vérification des états hover/focus pour garder une lisibilité stable.
• Contrôle par échantillon sur les pages les plus consultées.

3) Formulaires plus accessibles

• Labels explicites et aides courtes (format attendu, champs obligatoires).
• Messages d’erreur plus précis, reliés au champ via aria-describedby.
• Validation côté navigateur + retour clair côté interface.

4) Mesure GA4 orientée usage

• Suivi des envois de formulaire et des clics vers contact.
• Lecture du taux d’engagement mobile sur les pages d’entrée.
• Contrôle des abandons sur la page contact (avant/après).

Exemple technique : styles focus visibles (CSS)

Objectif: un focus net, cohérent, sans effet agressif.

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,.28);
  border-radius:10px;
}

Exemple technique : erreurs de formulaire reliées au champ (HTML)

Améliore la compréhension avec lecteurs d’écran et navigation clavier.

<label for="message">Message</label>
<textarea id="message" name="message" aria-describedby="msg-help msg-error" required></textarea>
<small id="msg-help">Indiquez votre demande en quelques lignes.</small>
<div id="msg-error" role="alert" hidden>Merci d'indiquer un message.</div>

Exemple technique : audit rapide Axe (commande)

Pour une vérification rapide avant mise en production.

Axe DevTools (extension navigateur)
- Scanner la page Contact
- Corriger contrastes / labels / aria
- Re-scanner après corrections

Résultats observés

• Navigation clavier plus fiable, avec un focus clairement visible.
• Lisibilité renforcée sur les composants récurrents (contrastes, outline).
• Formulaires plus compréhensibles, donc moins d’erreurs et moins d’abandons.
• Expérience mobile plus cohérente, avec une mesure plus utile via GA4.

Points clés à retenir

• Les corrections d’accessibilité les plus efficaces sont souvent des détails répétés (focus, labels, contrastes).
• Un site en blocs reste accessible si les composants ajoutés autour respectent les mêmes règles.
• Mesurer l’usage (formulaires, engagement mobile) aide à prioriser les prochaines améliorations.