Tutte le guide

Accessibilità2 agosto 20269 minuti di lettura

Elenco di controllo della conformità ADA di Shopify (2026)

Un pratico elenco di controllo per la conformità ADA di Shopify: immagini, contrasto, navigazione da tastiera, moduli e app di terze parti: cosa risolvere prima che una causa ti trovi per primo.

L'Americans with Disabilities Act non menziona i siti web. È stato scritto nel 1990, prima che la maggior parte delle persone avesse la posta elettronica. Ma i tribunali hanno costantemente stabilito che l’ADA Titolo III – che vieta la discriminazione nei “luoghi di alloggio pubblico” – si applica ai negozi di e-commerce, e i commercianti Shopify vengono citati in giudizio in numero crescente. Se vendi online negli Stati Uniti, questo non è un rischio ipotetico.

Questa è la lista di controllo che utilizziamo quando controlliamo l'accessibilità di un negozio Shopify. Non ti renderà a prova di proiettile – niente lo fa – ma colmerà le lacune che gli avvocati dei querelanti cercano per primi.

Cosa richiede effettivamente l'ADA (non esiste uno standard ufficiale)

Ecco la parte che fa inciampare le persone: l'ADA stessa non nomina uno standard tecnico per i siti web. Il Congresso non ha mai aggiornato la legge su Internet e il Dipartimento di Giustizia ha stabilito che il Titolo III si applica ai negozi online senza adottare formalmente una serie di regole specifiche.

In pratica, quel divario viene colmatoWCAG (Linee guida per l'accessibilità dei contenuti Web) 2.1 o 2.2, Livello AA. Non è legge, ma è ciò a cui fanno continuamente riferimento gli accordi transattivi, le lettere di orientamento del Dipartimento di Giustizia e le sentenze dei tribunali. Se il tuo negozio soddisfa le WCAG 2.2 AA, sei in linea con ciò con cui tutte le parti coinvolte in una causa (querelante, imputato e giudice) ti misureranno.

Altre due cose che vale la pena sapere prima di iniziare:

  • La legge sull'accessibilità dell'UE è ora applicabile separatamente(da giugno 2025) per le aziende che vendono nell'UE, con i propri requisiti vagamente mappati sulle WCAG. Se spedisci a clienti europei, questa lista di controllo copre la maggior parte dello stesso territorio.
  • La conformità non è binaria.Non "superi" l'ADA nello stesso modo in cui superi un esame di guida. Riduci la tua esposizione fissando barriere reali e continui a ridurla man mano che ne trovi di più.

L'elenco di controllo della conformità ADA di Shopify

Elaborateli in ordine. Ogni sezione richiede alcuni minuti per essere controllata manualmente, anche senza strumenti specializzati.

1. Immagini e media

  • Ogni immagine del prodotto ha un testo alternativo descrittivo - non "IMG_2481.jpg", non il titolo del prodotto ripetuto senza dettagli utili, ma una descrizione su cui un acquirente cieco potrebbe agire ("maglione girocollo in lana blu scuro, piegato, su sfondo grigio").
  • Le immagini decorative (trame di sfondo, distanziatori) hanno attributi alt vuoti (alt="") in modo che gli screen reader li saltino invece di leggere ad alta voce il nome di un file.
  • Qualsiasi video sul tuo sito ha didascalie. Qualsiasi audio ha una trascrizione.

2. Colore e contrasto

  • Il corpo del testo ha un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo; il testo grande (18pt+) richiede 3:1. Gli strumenti gratuiti di controllo del contrasto lo confermeranno in pochi secondi rispetto alla tavolozza dei colori del tuo tema.
  • I badge di vendita, le etichette "esaurito" e gli errori di modulo non si basano solo sul colore. Un'etichetta rossa "non disponibile" necessita anche della parola "non disponibile": gli utenti daltonici non sono in grado di distinguere il rosso dal verde.
  • Il testo segnaposto nei campi del modulo non è l'unica etichetta. Il testo segnaposto scompare una volta riempito un campo e spesso non soddisfa completamente i requisiti di contrasto.

3. Navigazione tramite tastiera

  • Ogni elemento interattivo (link di navigazione, filtri, "aggiungi al carrello", selettori di quantità, cassetto del carrello, campi di pagamento) è raggiungibile e utilizzabile utilizzando solo i tasti Tab e Invio, senza mouse.
  • La messa a fuoco è visibile. Quando passi con il tasto Tab a un pulsante o a un collegamento, viene visualizzato un chiaro contorno visivo che mostra dove ti trovi. Molti temi lo eliminano per motivi esteticioutline: nonee non sostituirlo mai.
  • I moduli modali e i cassetti del carrello bloccano la messa a fuoco correttamente: la scheda scorre all'interno del modale aperto, non verso il contenuto della pagina nascosto dietro di esso, ed Escape li chiude.

4. Moduli e checkout

  • Ogni input ha un<label>programmaticamente legato ad esso, non solo visivamente posizionato nelle vicinanze. I lettori di schermo annunciano l'etichetta quando il campo riceve il focus; senza la connessione non annunciano nulla di utile.
  • I messaggi di errore sono specifici ("Immetti un codice postale valido") e vengono annunciati agli screen reader quando vengono visualizzati, non solo visualizzati in rosso.
  • I lavori di pagamento iniziano e finiscono con una tastiera e uno screen reader. Questo è il singolo flusso di maggior valore da testare: è anche fondamentale per le entrate, quindi i bug qui ti costano le vendite anche prima che ti costano una causa.

5. Struttura e semantica

  • I titoli seguono un ordine logico (un H1, poi H2, quindi H3 annidati sotto l'H2 destro) invece di saltare i livelli per il dimensionamento visivo.
  • Esistono regioni di riferimento (intestazione, navigazione, principale, piè di pagina) in modo che gli utenti di screen reader possano saltare tra le sezioni invece di ascoltare l'intera pagina dall'alto verso il basso.
  • I collegamenti descrivono la loro destinazione ("Visualizza la politica di restituzione", non "fai clic qui" ripetuto sei volte su una pagina).

6. App di terze parti

Questa è la categoria che manca alla maggior parte dei commercianti Shopify. Il tuo tema potrebbe essere pulito, ma il widget di recensione, il popup di upsell, il fumetto della chat e il timer per il conto alla rovescia che hai installato dall'App Store spesso non lo sono e si caricano su ogni pagina. Controlla singolarmente ciascuna app installata; un singolo popup rotto può annullare tutto il resto.

7. Obiettivi tattili mobili

  • Pulsanti e collegamenti misurano almeno 44×44 pixel sui dispositivi mobili, con una spaziatura sufficiente affinché un utente con un controllo motorio limitato non tocchi quello sbagliato.

Come testare il tuo negozio

La revisione manuale rileva le cose che gli strumenti automatizzati non rilevano e gli strumenti automatizzati rilevano le cose che la revisione manuale non rileva. Usali entrambi:

  1. Esegui prima una scansione automatica.Il nostrostrumento AccessScan gratuitocontrolla la tua home page, la pagina di un prodotto e il tuo carrello rispetto alle regole WCAG 2.2 A/AA utilizzando axe-core e segnala i problemi classificati in base alla gravità in circa un minuto. È un punto di partenza davvero utile, ma i test automatizzati in genere rilevano solo il 30-40% degli ostacoli reali, quindi considera una scansione pulita come un punto di partenza, non come un traguardo.
  2. Naviga nel tuo sito utilizzando solo una tastiera.Scollega il mouse per dieci minuti e prova a comprare qualcosa.
  3. Controllo a campione con uno screen reader.VoiceOver viene fornito gratuitamente su ogni Mac e iPhone; NVDA è gratuito su Windows. Non è necessario essere fluenti: cinque minuti sulla tua home page e il checkout faranno emergere rapidamente problemi evidenti.
  4. Ripeti il ​​test dopo ogni aggiornamento del tema o dell'app.L'accessibilità non è un progetto una tantum. Un aggiornamento del tema o una nuova app possono reintrodurre silenziosamente i problemi già risolti.

Un breve avvertimento sui widget di accessibilità

Vedrai app nell'App Store di Shopify che promettono conformità ADA immediata tramite un'unica installazione di script, in genere una piccola icona di accessibilità nell'angolo del tuo sito con un menu di regolazioni del display. Questi sono chiamati widget in sovrapposizione e non prevengono in modo affidabile le azioni legali. Abbiamo scritto un'analisi completa diperché i widget in sovrapposizione per l'accessibilità non funzionano nel modo in cui sono commercializzati- vale la pena leggerlo prima di installarne uno invece di seguire l'elenco di controllo sopra.

Quanto costa effettivamente la bonifica

Dipende interamente da quanto è lontano il tuo negozio attualmente. Un negozio con un tema pulito e moderno e una manciata di app che si comportano in modo anomalo potrebbe richiedere alcuni giorni di tempo dedicato agli sviluppatori: etichettare moduli, correggere il contrasto, controllare le app. Un negozio costruito su un vecchio tema fortemente personalizzato con dozzine di lacune di accessibilità inserite nel codice Liquid personalizzato è un progetto più grande, più vicino a una ricostruzione parziale del tema.

In ogni caso, la riparazione è più economica della causa. I costi di difesa legale e di transazione per le richieste di accessibilità web di ADA ammontano abitualmente a cinque cifre, anche quando la riparazione sottostante avrebbe richiesto a uno sviluppatore una settimana. Se desideri una stima circoscritta,Devmerx integra l'accessibilità in ogni tema e migrazione che offriamoe puoi quotare i lavori di bonifica separatamente se hai già un negozio.

Domande frequenti

Shopify è già conforme ad ADA?

Nessuna piattaforma è "conforme ADA" per impostazione predefinita, incluso Shopify. Il checkout e l'amministratore principale di Shopify sono stati sottoposti a lavori di accessibilità, ma il tuo tema, i tuoi contenuti e ogni app che installi sono sotto la tua responsabilità. Un tema Shopify predefinito necessita comunque che la lista di controllo sopra applicata al tuo negozio specifico.

Il rispetto delle WCAG 2.2 AA garantisce che non verrò citato in giudizio?

No. La conformità alle WCAG riduce drasticamente i rischi e ti garantisce una forte posizione legale in caso di reclamo, ma nessuno standard tecnico costituisce una garanzia legale. Alcune affermazioni sono opportunistiche indipendentemente dalla conformità del sito. Ciò che fa la conformità alle WCAG è rimuovere le violazioni facili ed evidenti che rendono un sito un facile bersaglio.

Ho bisogno di una pagina di dichiarazione di accessibilità?

Non è obbligatorio per legge, ma è una buona pratica. Una breve pagina che dichiara il tuo impegno per l'accessibilità, elenca lo standard a cui ti rivolgi (WCAG 2.2 AA) e fornisce un metodo di contatto per segnalare gli ostacoli dimostra buona fede e offre agli utenti un canale diverso da una causa legale.

Con quale frequenza devo ricontrollare l'accessibilità?

Come minimo, dopo ogni aggiornamento del tema, ogni nuova installazione di app e ogni importante spinta di contenuti (nuove pagine di raccolta, nuove pagine di destinazione). Molti negozi impostano un promemoria trimestrale per eseguire una scansione completa anche se non è cambiato nulla di evidente.

La risoluzione dei problemi di accessibilità rallenterà il mio negozio?

Generalmente il contrario. HTML semantico, markup pulito e meno script di terze parti gonfiati – le stesse correzioni che migliorano l’accessibilità – tendono a migliorare anche la velocità della pagina. I due obiettivi raramente entrano in conflitto.

Devmerx

Devmerx è un'agenzia di sviluppo Shopify e WordPress che aiuta i marchi DTC a creare negozi più veloci, migrazioni più pulite ed esperienze di conversione più elevate. Con sede a Londra, Regno Unito, serve clienti in tutto il mondo.

Guarda il nostro lavoro

Hai bisogno di aiuto con il tuo negozio Shopify?

Devmerx crea e ottimizza i negozi Shopify per i marchi DTC. Prenota una consulenza gratuita di 20 minuti.