WooCommerce
Accessibilità su WooCommerce: dov’è davvero il problema
WooCommerce ha una cosa rara in questo settore: il progetto pubblica la propria posizione sull’accessibilità e afferma che il frontend del plugin principale è «sostanzialmente conforme» alle WCAG 2.2 AA. Quasi nessuno lo dice. Il punto è che un negozio WooCommerce non è solo il plugin: è un tema, dieci-trenta plugin e un gateway di pagamento. È lì che si rompe.
Il nucleo di WooCommerce raramente è il problema. Lo sono gli avvisi mai annunciati, i selettori di variazione senza etichetta, i filtri a faccette dei plugin che la tastiera non raggiunge e i campi del checkout che segnalano l’errore solo con il bordo rosso. Quasi tutto si corregge con hook e template sovrascritti, senza toccare il nucleo.
Cosa mette WooCommerce e cosa mettete voi
Cosa mette WooCommerce: il progetto dichiara che il frontend del plugin principale è sostanzialmente conforme alle WCAG 2.2 livello AA e riconosce apertamente le lacune nell’area di amministrazione. È una dichiarazione onesta e poco comune.
Cosa mettete voi: il tema — e tra un tema «accessibility-ready» e uno comprato su un marketplace c’è un abisso. I plugin di filtri, popup e recensioni. Il gateway di pagamento, spesso un iframe di terzi la cui accessibilità non controllate. E i contenuti: titoli di prodotto chiari, testi alternativi, messaggi d’errore che dicano cosa correggere.
Conseguenza pratica: se il vostro negozio non è conforme, il lavoro non sta quasi mai nel nucleo ma in quattro o cinque punti precisi della vostra installazione.
Le sette barriere che escono quasi sempre
| Componente | Cosa non va | WCAG | La correzione |
|---|---|---|---|
Avvisi ed erroriwoocommerce-message / error | I messaggi «aggiunto al carrello» e di errore non vengono mai annunciati a chi usa uno screen reader. | 4.1.3 | Racchiuderli tramite un filtro in un’area con role="alert" o aria-live. |
Selettore di variazionivariable.php (variaciones) | Le tendine di taglia e colore arrivano senza etichetta associata. | 1.3.1 · 3.3.2 | Collegare ogni select alla sua label for nel template sovrascritto. |
Aggiunta al carrello via AJAXadd-to-cart AJAX | Il carrello si aggiorna in silenzio: visivamente cambia, per uno screen reader non succede nulla. | 4.1.3 | Marcare il contenitore che si aggiorna con aria-live="polite". |
Filtri a faccettefiltros por facetas (plugin) | I plugin di filtro costruiscono spesso finte caselle che la tastiera non raggiunge. | 2.1.1 · 2.4.7 | Usare controlli nativi, o dare a quelli personalizzati ruolo, stato e focus visibile. |
Campi del checkoutform-checkout.php | Errori segnalati solo con il colore e campi senza descrizione associata. | 3.3.1 · 3.3.2 | Testo d’errore esplicito e aria-describedby sui campi con testo d’aiuto. |
Gateway di pagamentopasarela de pago externa | L’iframe del fornitore può essere inaccessibile e dal vostro sito non lo sistemate. | 4.1.2 | Provare un pagamento reale con la tastiera e, se fallisce, cambiare fornitore o richiamarlo. |
Il tematema (Storefront u otro) | Contrasti bassi e focus invisibile: il difetto più comune nei temi da marketplace. | 1.4.3 · 2.4.7 | Scegliere un tema «accessibility-ready» o correggere contrasto e focus nel tema figlio. |
Le correzioni si applicano come hook nel functions.php del tema figlio o sovrascrivendo i template sotto woocommerce/. Mai modificando il nucleo: il prossimo aggiornamento cancellerebbe tutto.
Perché il plugin di accessibilità non risolve
Nel repository di WordPress ci sono plugin che promettono la conformità dietro una casella. Aggiungono una barra con contrasto alto e dimensione del testo. Non correggono un avviso che non viene annunciato, né un filtro che la tastiera non può usare, né un campo del checkout senza etichetta.
C’è anche un problema tipico di WordPress: ogni plugin aggiunge il proprio HTML al frontend, quindi un plugin che «sistema l’accessibilità» spesso entra in conflitto con quello che un altro ha appena generato. La strada che funziona è quella noiosa: scegliere bene il tema, rivedere i plugin che generano HTML e correggere con gli hook.
Provate il vostro negozio in dieci minuti, senza strumenti
- Mettete via il mouse. Dalla home arrivate a un prodotto variabile, scegliete taglia e colore, aggiungetelo al carrello e arrivate al pagamento con Tab, Maiusc+Tab, Invio e le frecce.
- Aggiungete al carrello e ascoltate. Se usate l’aggiunta in AJAX, verificate che l’avviso «aggiunto al carrello» stia in un’area
aria-live. - Inviate il checkout con un campo lasciato vuoto di proposito. L’errore deve dire quale campo e cosa manca, non solo colorare il bordo di rosso.
- Usate i filtri con la tastiera. È il punto in cui falliscono più plugin.
- Ingrandite al 200 % e verificate che la tabella del carrello resti usabile.
Volete l’elenco completo del vostro negozio?
La scansione gratuita vi dà in pochi minuti una prima mappa delle barriere del sito: senza account, senza carta, senza impegno.