Sur WooCommerce, ajouter un produit au panier ou modifier une quantité déclenche une requête Ajax qui met à jour le mini-panier et le total, sans recharger la page. Pour une personne voyante, le changement de nombre et de montant est immédiatement visible. Pour une personne utilisant un lecteur d’écran, rien ne signale que quoi que ce soit vient de se passer, sauf à naviguer manuellement jusqu’au panier pour vérifier. Ce tutoriel montre comment ajouter des annonces aria-live précises sur ces mises à jour, sans revenir sur l’audit global du tunnel d’achat, déjà traité par ailleurs.
Étape 1 : créer une région aria-live permanente
Une erreur fréquente consiste à créer dynamiquement, en JavaScript, l’élément qui portera aria-live au moment même où l’on souhaite faire une annonce. Cela ne fonctionne pas de façon fiable : la plupart des lecteurs d’écran n’annoncent correctement le contenu d’une région live que si celle-ci existait déjà dans le DOM avant la mise à jour. La région doit donc être présente dès le chargement de la page, vide au départ :
<div
id="woocommerce-annonce-panier"
class="screen-reader-text"
aria-live="polite"
aria-atomic="true"></div>Cette région peut être injectée via le hook wp_footer, pour qu’elle soit présente sur toutes les pages où une action panier est possible, y compris la fiche produit et la page panier elle-même.
Étape 2 : s’accrocher aux événements Ajax déjà déclenchés par WooCommerce
WooCommerce déclenche déjà plusieurs événements JavaScript personnalisés lors des mises à jour de panier, notamment added_to_cart et updated_cart_totals. Plutôt que de réinventer la détection des changements, le script s’y accroche directement :
jQuery(document.body).on('added_to_cart', function(event, fragments, cartHash, button) {
const nomProduit = button.data('product_name') || 'Le produit';
annoncerAuPanier(`${nomProduit} ajouté au panier.`);
});
jQuery(document.body).on('updated_cart_totals', function() {
const total = document.querySelector('.woocommerce-Price-amount')?.textContent;
annoncerAuPanier(`Panier mis à jour${total ? ', nouveau total ' + total : ''}.`);
});Étape 3 : temporiser les annonces pour éviter le bruit
Modifier une quantité avec les flèches d’un champ numérique déclenche souvent plusieurs événements updated_cart_totals rapprochés, un par incrément. Annoncer chacun d’entre eux produirait un flot d’annonces contradictoires pour un lecteur d’écran, se coupant les unes les autres. Une temporisation de 300 millisecondes, avant d’annoncer seulement la dernière valeur stabilisée, résout ce problème :
let minuteurAnnonce;
function annoncerAuPanier(texte) {
clearTimeout(minuteurAnnonce);
minuteurAnnonce = setTimeout(() => {
const region = document.getElementById('woocommerce-annonce-panier');
region.textContent = '';
// Un léger décalage force certains lecteurs d'écran à bien
// détecter le changement de contenu, même identique au précédent.
requestAnimationFrame(() => { region.textContent = texte; });
}, 300);
}Étape 4 : garder un texte bref, pas une redite complète du visuel
Le texte annoncé ne doit pas chercher à décrire exhaustivement l’état du panier (liste de tous les articles, sous-total, taxes, frais de port) : cela deviendrait long à écouter et redondant à chaque petite modification. Un message court et ciblé sur ce qui vient de changer suffit :
- « Casque vélo urbain ajouté au panier. »
- « Quantité mise à jour : 3 articles, nouveau total 87,00 €. »
- « Article retiré du panier. »
Étape 5 : tester avec NVDA en situation réelle d’achat
Le test final consiste à parcourir un scénario d’achat complet avec NVDA activé : ajouter un produit depuis la fiche produit, modifier la quantité depuis la page panier, retirer un article, en vérifiant à chaque étape qu’une annonce claire et unique se déclenche, sans doublon ni silence.
Sur ce type de correctif, le réglage le plus délicat n’est pas la mécanique aria-live elle-même, mais le dosage du texte annoncé : trop bref, l’information manque de contexte ; trop détaillé, l’annonce devient fatigante à l’usage sur un site où l’on modifie son panier plusieurs fois par visite.
En résumé
Un panier WooCommerce mis à jour en Ajax devient utilisable pour une personne non-voyante avec une région aria-live permanente, branchée sur les événements déjà émis par WooCommerce, temporisée pour éviter les annonces en rafale, et formulée de façon brève et ciblée. Cette correction ne nécessite aucune modification du comportement visuel existant : elle ajoute uniquement ce qui manquait pour les personnes qui n’utilisent pas d’écran.
