harborandpine.example

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Il focus della tastiera resta intrappolato nel banner dei cookie (WCAG 2.1.2).
Dove: 1 occorrenza in 1 pagina, ad esempio /.

Un elemento non conforme, così come l’ha reso il browser:
```html
Settings
```

Perché è importante: Se il focus resta intrappolato, chi usa solo la tastiera o uno screen reader non può fare acquisti (WCAG 2.1.2 No Keyboard Trap).

Cosa va modificato:
- Cerca nelle impostazioni dell’app del banner dei cookie o del consenso un’opzione per l’accessibilità o per la trappola del focus, oppure chiedi al fornitore di correggerlo.
- Una finestra modale può trattenere il focus solo mentre è aperta, e deve chiudersi con il tasto Esc e riportare il focus al punto di partenza.

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Le opzioni del prodotto non si possono scegliere con la tastiera (WCAG 2.1.1).
Dove: 1 occorrenza in 1 pagina, ad esempio /products/trail-daypack.

Un elemento non conforme, così come l’ha reso il browser:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Perché è importante: I clienti che usano solo la tastiera, compresi molti utenti di screen reader, non riescono a superare questo passaggio (WCAG 2.1.1).

Cosa va modificato:
- Costruisci i selettori delle opzioni con radio button nativi (o un <select>) con etichette visibili; dai all’etichetta lo stile del campione.
- Se mantieni elementi personalizzati, ogni opzione ha bisogno di tabindex="0", role="radio" con aria-checked all’interno di un role="radiogroup", e della gestione dei tasti freccia e della barra spaziatrice. I radio button nativi ti offrono tutto questo senza sforzo.

Una modifica suggerita (Il modulo prodotto del tuo tema (selettore delle varianti)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: I pulsanti devono avere un testo distinguibile (WCAG 4.1.2).
Dove: 41 occorrenze in 9 pagine, ad esempio /, /collections/all, /products/trail-daypack, /cart.

Un elemento non conforme, così come l’ha reso il browser:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

Perché è importante: Il criterio WCAG 4.1.2 richiede che ogni controllo abbia un nome. I pulsanti senza nome sono spesso i selettori di quantità, i pulsanti di chiusura e le frecce degli slider.

Cosa va modificato:
- Trova i pulsanti negli esempi qui sotto.
- Aggiungi un testo visibile, un testo visivamente nascosto o un aria-label che dica cosa fa il pulsante (ad esempio aria-label="Close" o aria-label="Increase quantity").

Una modifica suggerita (Il codice del tuo tema (cercaci il markup mostrato)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Le immagini devono avere un testo alternativo (WCAG 1.1.1).
Dove: 22 occorrenze in 7 pagine, ad esempio /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Un elemento non conforme, così come l’ha reso il browser:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Perché è importante: Il criterio WCAG 1.1.1 richiede un’alternativa testuale per le immagini significative. Senza di essa, chi usa uno screen reader non può capire quale prodotto mostra una foto.

Cosa va modificato:
- Nell’admin di Shopify apri Prodotti > [prodotto] > Contenuti multimediali, fai clic su ogni immagine e compila «Testo alternativo». Per le immagini delle sezioni, apri Negozio online > Temi > Personalizza e imposta il testo alternativo dell’immagine nelle impostazioni della sezione.
- Descrivi ciò che conta per un cliente: nome del prodotto, colore e angolazione mostrata (ad esempio «Borsa tote in tela verde oliva, vista frontale»).
- Le immagini decorative devono avere un attributo alt vuoto (alt=""), così gli screen reader le saltano.

Una modifica suggerita (Foto dei prodotti: admin di Shopify › Prodotti › Contenuti multimediali › Testo alternativo. Altre immagini: il codice del tuo tema):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Gli elementi del modulo devono avere etichette (WCAG 4.1.2).
Dove: 7 occorrenze in 6 pagine, ad esempio /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Un elemento non conforme, così come l’ha reso il browser:
```html
<input type="number" value="1" min="1">
```

Perché è importante: I criteri WCAG 1.3.1, 3.3.2 e 4.1.2 richiedono che i campi dei moduli abbiano un’etichetta. Le iscrizioni alla newsletter e i campi di ricerca sono i colpevoli più frequenti.

Cosa va modificato:
- Dai a ogni campo un elemento <label for="field-id">, o almeno un aria-label.
- Il solo testo segnaposto non vale come etichetta.

Una modifica suggerita (Il codice del tuo tema (cercaci il markup mostrato)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: L'elemento select deve avere un nome accessibile (WCAG 4.1.2).
Dove: 1 occorrenza in 1 pagina, ad esempio /collections/all.

Un elemento non conforme, così come l’ha reso il browser:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Perché è importante: Il criterio WCAG 4.1.2 richiede che i menu select abbiano un nome accessibile.

Cosa va modificato:
- Aggiungi un <label> collegato al select, oppure un aria-label come aria-label="Sort by".

Una modifica suggerita (Il codice del tuo tema (cercaci il markup mostrato)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: I collegamenti devono avere un testo distinguibile (WCAG 2.4.4, 4.1.2).
Dove: 36 occorrenze in 9 pagine, ad esempio /, /collections/all, /products/trail-daypack, /cart.

Un elemento non conforme, così come l’ha reso il browser:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

Perché è importante: I criteri WCAG 2.4.4 e 4.1.2 richiedono che i link abbiano un nome accessibile che ne descriva lo scopo.

Cosa va modificato:
- Trova i link negli esempi qui sotto. La maggior parte sono icone o immagini all’interno di un tag <a>.
- Aggiungi un testo visivamente nascosto all’interno del link, oppure un aria-label come aria-label="Instagram" o aria-label="Cart".
- Se il link contiene un’immagine, dai invece all’immagine un testo alternativo significativo.

Una modifica suggerita (Il codice del tuo tema (cercaci il markup mostrato)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Gli elementi devono soddisfare le soglie minime del rapporto di contrasto di colore (WCAG 1.4.3).
Dove: 22 occorrenze in 9 pagine, ad esempio /, /collections/all, /products/trail-daypack, /cart.

Un elemento non conforme, così come l’ha reso il browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Perché è importante: Il criterio WCAG 1.4.3 richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Prezzi, badge e banner sbiaditi sono difficili da leggere per le persone ipovedenti, e per tutti in piena luce.

Cosa va modificato:
- Apri gli elementi non conformi elencati qui sotto e annota i colori di primo piano e di sfondo indicati nel riepilogo dell’errore.
- In Negozio online > Temi > Personalizza > Impostazioni del tema > Colori, scurisci il colore del testo o schiarisci lo sfondo della combinazione di colori interessata finché il rapporto non è almeno 4,5:1.
- Presta particolare attenzione ai badge dei saldi, al testo segnaposto, ai link del footer e ai pulsanti sopra le immagini.

Una modifica suggerita (Impostazioni del tema › Colori, oppure il file CSS del tuo tema):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: Tutti i contenuti della pagina dovrebbero essere contenuti nei landmark.
Dove: 18 occorrenze in 9 pagine, ad esempio /, /collections/all, /products/trail-daypack, /cart.

Un elemento non conforme, così come l’ha reso il browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Perché è importante: I landmark permettono a chi usa uno screen reader di spostarsi rapidamente nella pagina. È una buona pratica a supporto dei criteri WCAG 1.3.1 e 2.4.1.

Cosa va modificato:
- Racchiudi i contenuti sparsi (barre degli annunci, pop-up, widget di chat) nel landmark appropriato o inseriscili all’interno di <main>.

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.

Gestisco un negozio Shopify (tema Online Store 2.0, template Liquid) all’indirizzo harborandpine.example. Un test di accessibilità ha trovato questo problema e voglio correggerlo nel mio tema.

Problema: I livelli delle intestazioni possono aumentare solo di uno.
Dove: 7 occorrenze in 7 pagine, ad esempio /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Un elemento non conforme, così come l’ha reso il browser:
```html
<h3>Trail Daypack 22L</h3>
```

Perché è importante: Chi usa uno screen reader naviga per intestazioni. È una buona pratica a supporto del criterio WCAG 1.3.1.

Cosa va modificato:
- Modifica i livelli delle intestazioni nelle sezioni interessate in modo che seguano l’ordine senza saltare livelli.
- Cambia solo il tag, non lo stile visivo (usa le classi CSS per la dimensione).

Una modifica suggerita (Il codice del tuo tema (cercaci il markup mostrato)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regole per la tua risposta:
- Mostra la modifica esatta come prima e dopo, e indica il file o l’impostazione in cui va inserita. Se prima hai bisogno di vedere il mio file, chiedimi di incollarlo.
- Mantieni invariati il design visivo e tutto il comportamento esistente.
- Non inventare nomi di prodotti, prezzi o testi; usa dei segnaposto che posso compilare io.
- Concludi spiegando come posso verificare personalmente la correzione.
- Spiega anche come verificarla con la tastiera e uno screen reader.