Shopify
Accessibilità su Shopify: cosa non va di serie e come si sistema
Shopify è una buona piattaforma, eppure quasi nessun negozio Shopify è conforme. Non è una contraddizione: la parte che Shopify controlla — il checkout ospitato, l’infrastruttura — è tenuta bene, ma la parte che decide se un cliente riesce a comprare sta nel vostro tema, e il tema è vostro. Questa pagina va componente per componente: cosa non va, quale criterio viene violato e cosa si cambia esattamente.
Shopify non vi rende conformi e non ve lo impedisce. Il checkout ospitato aiuta; il tema (Dawn compreso) arriva con barriere note nel menu, nella galleria prodotto, nel selettore delle varianti, nel cassetto del carrello e nella ricerca predittiva. Si correggono tutte nei file .liquid, nel JavaScript e nel CSS del tema — nessuna dal pannello di amministrazione.
Cosa mette Shopify e cosa mettete voi
Vale la pena separarli bene, perché quasi tutto il rumore commerciale li mescola.
Cosa mette Shopify: il checkout ospitato, che la piattaforma mantiene e migliora senza che voi tocchiate nulla, e i componenti di base dei suoi temi ufficiali, migliorati versione dopo versione.
Cosa mettete voi: il tema e le sue personalizzazioni, le app che installate (popup e motori di ricerca di terze parti sono i peggiori), le vostre immagini con il testo alternativo, e i testi delle schede prodotto. Lì sta il 90 % di ciò che trova un audit.
Una precisazione che conta se vendete in Europa: un checkout curato non vi esenta, perché l’obbligo guarda al servizio intero, non a un tratto.
Le sette barriere che escono quasi sempre
| Componente | Cosa non va | WCAG | La correzione |
|---|---|---|---|
Menu e tendineheader.liquid | Il pulsante del menu non aggiorna mai aria-expanded, e i mega menu intrappolano il focus da tastiera. | 4.1.2 · 2.1.1 | Aggiornare aria-expanded all’apertura e alla chiusura e collegare il sottomenu con aria-controls. |
Galleria prodottoproduct-media-gallery.liquid | Le miniature sono pulsanti senza nome accessibile e le frecce hanno solo un’icona. | 1.1.1 · 2.4.4 | Assegnare un aria-label tipo «Vedi immagine 2 di 7» e marcare l’attiva con aria-current. |
Selettore variantiproduct-variant-picker.liquid | Il colore scelto si distingue solo dal colore e le varianti esaurite non vengono annunciate. | 1.4.1 · 1.3.1 | Raggruppare in fieldset con legend, usare radio veri e aggiungere «Esaurito» come testo nascosto. |
Cassetto del carrellocart-drawer (JS) | All’apertura il focus resta dietro, Esc non chiude e alla chiusura il focus non torna. | 2.4.3 · 2.1.2 | Spostare il focus all’apertura, trattenerlo dentro, chiudere con Esc e restituirlo al pulsante d’origine. |
Ricerca predittivapredictive-search.liquid | I risultati compaiono senza essere annunciati: chi non vede lo schermo non sa che ci sono. | 4.1.3 · 1.3.1 | Annunciare il numero di risultati con role="status" e aria-live="polite". |
Piè di paginafooter.liquid | Il campo newsletter usa il testo grigio come etichetta e le icone social non hanno nome. | 3.3.2 · 1.1.1 | Un’etichetta vera nascosta collegata con for e un aria-label su ogni icona. |
Contrasto e focusbase.css | Il badge saldi e i pulsanti disattivati restano sotto 4,5:1; l’anello di focus è appena visibile. | 1.4.3 · 2.4.7 | Scurire quei colori e dare al focus un contorno di 3 px con uno scostamento. |
I nomi dei file si riferiscono a Dawn e ai temi ufficiali che ne derivano. In un tema a pagamento cambia il percorso, non il problema.
Perché il widget dell’app store non risolve
Nell’App Store di Shopify ci sono decine di widget di accessibilità da 20–50 € al mese. Nessuno corregge quanto sta nella tabella qui sopra, perché nessuno riscrive il vostro tema: aggiungono uno strato sopra, con pulsanti per contrasto e dimensione del testo. Il focus perso all’apertura del cassetto del carrello resta perso, e il selettore delle taglie continua a non dire quale taglia è scelta.
Peggio: alcuni iniettano ARIA errata su elementi che erano già a posto e peggiorano l’esperienza con screen reader. Se ne avete già uno installato, non toglietelo oggi stesso — ma non contatelo come conformità.
Provate il vostro negozio in dieci minuti, senza strumenti
- Mettete via il mouse. Dalla home arrivate a un prodotto, scegliete una variante, mettetelo nel carrello ed entrate nel pagamento usando solo Tab, Maiusc+Tab, Invio e le frecce.
- Guardate dov’è il focus a ogni passo. Nel momento in cui non capite quale elemento è selezionato, è una violazione del 2.4.7.
- Aprite il cassetto del carrello e premete Esc. Deve chiudersi e restituire il focus al pulsante che l’ha aperto.
- Ingrandite la pagina al 200 %. Nulla deve sovrapporsi né costringere allo scorrimento orizzontale.
- Disattivate le immagini nel browser. Se le schede prodotto ammutoliscono, manca il testo alternativo.
Se qualcosa di questo fallisce, avete già la lista di ciò da sistemare prima di pensare a dichiarazioni o certificati.
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.