Corriger les “formulaires sans label” sur WooCommerce

Par défaut, WooCommerce génère des labels corrects sur tous les champs du checkout. Le problème ne vient donc presque jamais de WooCommerce lui-même, mais du thème : environ 60 % des thèmes commerciaux masquent ces labels avec `label { display: none; }` pour gagner de la place — et créent une non-conformité RGAA 11.1 sans que personne ne s'en aperçoive.

Diagnostic en 30 secondes

Ouvrez le checkout, clic droit sur un champ, "Inspecter". Si vous voyez bien une balise `<label>` dans le DOM mais qu'aucun texte ne s'affiche à l'écran au-dessus du champ, c'est que le thème la masque en CSS. C'est la cause la plus fréquente — et la plus simple à corriger.

Pourquoi display:none est le mauvais réflexe

Un thème qui fait `label { display: none }` retire le label du flux ET de l'arbre d'accessibilité : le lecteur d'écran ne l'annonce plus non plus. Le placeholder seul ne le remplace pas, puisqu'il disparaît à la saisie. Résultat : un champ "Code postal" devient anonyme dès qu'on commence à taper.

Fix CSS minimal

/* Re-afficher les labels que le thème cache */
.woocommerce-checkout label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
  display: block !important;
  font-weight: 500;
  margin-bottom: 4px;
}

À placer dans Apparence → Personnaliser → CSS additionnel, ou dans la feuille d'un thème enfant. Aucun plugin requis. Rechargez le checkout : les libellés réapparaissent au-dessus de chaque champ.

Les autres champs qui posent problème

• →Passerelles de paiement (Stripe, PayPal) : leurs champs sont dans une iframe, non corrigeables côté thème — vérifiez et signalez à l'éditeur si besoin
• →Case "J'ai lu et j'accepte les CGV" : doit être un vrai label cliquable lié à la case
• →Champ de recherche du header : souvent sans label, à doubler d'un `aria-label`
• →Sélecteur de quantité : les boutons + et - doivent avoir un nom accessible

Questions fréquentes

Un plugin d’accessibilité corrige-t-il ça ?

Non, fuyez les overlays : ils ajoutent une couche par-dessus le problème sans le résoudre, et exposent à un risque juridique supplémentaire. Le fix ici tient en quelques lignes de CSS — pas besoin de plugin.

Faut-il modifier le thème parent ?

Jamais directement : utilisez un thème enfant ou le CSS additionnel du personnalisateur, sinon votre correctif saute à la prochaine mise à jour du thème.

Comment être sûr qu’il ne reste aucun champ sans label ?

Inspectez chaque champ du tunnel, ou lancez un audit automatisé qui détecte les champs sans nom accessible sur l'ensemble du checkout d'un coup.