harborandpine.example

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Focusul tastaturii este blocat în bannerul de cookie-uri (WCAG 2.1.2).
Unde: 1 apariție pe 1 pagină, de exemplu /.

Un element care eșuează, așa cum l-a randat browserul:
```html
Settings
```

De ce contează: Utilizatorii care folosesc doar tastatura și cei cu cititoare de ecran nu pot cumpăra deloc dacă focusul este blocat (WCAG 2.1.2 No Keyboard Trap).

Ce trebuie modificat:
- Căutați în setările aplicației pentru bannerul de cookie-uri sau de consimțământ o opțiune de accesibilitate sau de capcană de focus ori cereți furnizorului să remedieze problema.
- O fereastră modală poate reține focusul doar cât timp este deschisă, trebuie să se închidă cu tasta Escape și să returneze focusul acolo de unde a venit.

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Opțiunile produsului nu pot fi alese cu tastatura (WCAG 2.1.1).
Unde: 1 apariție pe 1 pagină, de exemplu /products/trail-daypack.

Un element care eșuează, așa cum l-a randat browserul:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

De ce contează: Cumpărătorii care folosesc doar tastatura, inclusiv mulți utilizatori de cititoare de ecran, nu pot trece de acest pas (WCAG 2.1.1).

Ce trebuie modificat:
- Construiți selectoarele de opțiuni din butoane radio native (sau dintr-un <select>) cu etichete vizibile; stilizați eticheta ca mostră de culoare.
- Dacă păstrați elementele personalizate, fiecare opțiune are nevoie de tabindex="0", role="radio" cu aria-checked într-un role="radiogroup", precum și de gestionarea tastelor săgeți și Space. Butoanele radio native vă oferă toate acestea fără efort suplimentar.

O modificare sugerată (Formularul de produs din temă (selectorul de variante)):
```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>
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Butoanele trebuie să aibă un text perceptibil (WCAG 4.1.2).
Unde: 41 de apariții pe 9 pagini, de exemplu /, /collections/all, /products/trail-daypack, /cart.

Un element care eșuează, așa cum l-a randat browserul:
```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>
```

De ce contează: WCAG 4.1.2 cere ca fiecare control să aibă un nume. Printre butoanele fără nume se numără adesea selectoarele de cantitate, butoanele de închidere și săgețile caruselelor.

Ce trebuie modificat:
- Găsiți butoanele din exemplele de mai jos.
- Adăugați un text vizibil, un text ascuns vizual sau un aria-label care spune ce face butonul (de exemplu aria-label="Close" sau aria-label="Increase quantity").

O modificare sugerată (Codul temei (căutați în el markupul afișat)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Imaginile trebuie să aibă text alternativ (WCAG 1.1.1).
Unde: 22 de apariții pe 7 pagini, de exemplu /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Un element care eșuează, așa cum l-a randat browserul:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

De ce contează: WCAG 1.1.1 cere un text alternativ pentru imaginile cu semnificație. Fără el, un utilizator de cititor de ecran nu își poate da seama ce produs arată o fotografie.

Ce trebuie modificat:
- În panoul de administrare Shopify, deschideți Products > [produs] > Media, faceți clic pe fiecare imagine și completați câmpul „Alt text”. Pentru imaginile din secțiuni, deschideți Online Store > Themes > Customize și setați textul alternativ al imaginii în setările secțiunii.
- Descrieți ce contează pentru un cumpărător: numele produsului, culoarea și unghiul prezentat (de exemplu „Geantă tote din pânză, oliv, vedere din față”).
- Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.

O modificare sugerată (Fotografii de produs: Shopify admin › Products › Media › Alt text. Alte imagini: codul temei):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Elementele de formular trebuie să aibă etichete (WCAG 4.1.2).
Unde: 7 apariții pe 6 pagini, de exemplu /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Un element care eșuează, așa cum l-a randat browserul:
```html
<input type="number" value="1" min="1">
```

De ce contează: WCAG 1.3.1, 3.3.2 și 4.1.2 cer ca câmpurile de formular să aibă etichete. Câmpurile de abonare la newsletter și de căutare sunt printre cele mai frecvente cazuri.

Ce trebuie modificat:
- Dați fiecărui câmp un element <label for="field-id"> sau, cel puțin, un aria-label.
- Textul substituent (placeholder) singur nu contează ca etichetă.

O modificare sugerată (Codul temei (căutați în el markupul afișat)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Elementul select trebuie să aibă un nume accesibil (WCAG 4.1.2).
Unde: 1 apariție pe 1 pagină, de exemplu /collections/all.

Un element care eșuează, așa cum l-a randat browserul:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

De ce contează: WCAG 4.1.2 cere ca meniurile select să aibă un nume accesibil.

Ce trebuie modificat:
- Adăugați un <label> asociat cu select-ul sau un aria-label, de exemplu aria-label="Sort by".

O modificare sugerată (Codul temei (căutați în el markupul afișat)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Linkurile trebuie să aibă un text perceptibil (WCAG 2.4.4, 4.1.2).
Unde: 36 de apariții pe 9 pagini, de exemplu /, /collections/all, /products/trail-daypack, /cart.

Un element care eșuează, așa cum l-a randat browserul:
```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>
```

De ce contează: WCAG 2.4.4 și 4.1.2 cer ca linkurile să aibă un nume accesibil care să le descrie scopul.

Ce trebuie modificat:
- Găsiți linkurile din exemplele de mai jos. Cele mai multe sunt pictograme sau imagini dintr-o etichetă <a>.
- Adăugați în link un text ascuns vizual sau un aria-label, de exemplu aria-label="Instagram" sau aria-label="Cart".
- Dacă linkul conține o imagine, dați-i în schimb imaginii un text alternativ cu sens.

O modificare sugerată (Codul temei (căutați în el markupul afișat)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Elementele trebuie să respecte pragurile minime ale raportului de contrast al culorilor (WCAG 1.4.3).
Unde: 22 de apariții pe 9 pagini, de exemplu /, /collections/all, /products/trail-daypack, /cart.

Un element care eșuează, așa cum l-a randat browserul:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

De ce contează: WCAG 1.4.3 cere un raport de contrast de cel puțin 4,5:1 pentru textul normal și 3:1 pentru textul mare. Prețurile, etichetele și bannerele estompate sunt greu de citit pentru persoanele cu vedere slabă și pentru oricine se află în lumină puternică.

Ce trebuie modificat:
- Deschideți elementele cu erori listate mai jos și notați culorile textului și ale fundalului din rezumatul erorii.
- În Online Store > Themes > Customize > Theme settings > Colors, închideți culoarea textului sau deschideți fundalul schemei de culori afectate până când raportul este de cel puțin 4,5:1.
- Acordați o atenție deosebită etichetelor de reducere, textului substituent (placeholder), linkurilor din subsol și butoanelor plasate peste imagini.

O modificare sugerată (Theme settings › Colors sau fișierul CSS al temei):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Tot conținutul paginii trebuie să se afle în repere.
Unde: 18 apariții pe 9 pagini, de exemplu /, /collections/all, /products/trail-daypack, /cart.

Un element care eșuează, așa cum l-a randat browserul:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

De ce contează: Reperele (landmarks) le permit utilizatorilor de cititoare de ecran să sară dintr-o zonă în alta a paginii. Este o bună practică în sprijinul WCAG 1.3.1 și 2.4.1.

Ce trebuie modificat:
- Includeți conținutul rămas în afara reperelor (bare de anunțuri, ferestre pop-up, widgeturi de chat) în reperul potrivit sau mutați-l în <main>.

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.

Administrez un magazin Shopify (temă Online Store 2.0, șabloane Liquid), la adresa harborandpine.example. Un test de accesibilitate a găsit această problemă și vreau să o remediez în tema mea.

Problemă: Nivelurile titlurilor trebuie să crească doar cu câte unul.
Unde: 7 apariții pe 7 pagini, de exemplu /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Un element care eșuează, așa cum l-a randat browserul:
```html
<h3>Trail Daypack 22L</h3>
```

De ce contează: Utilizatorii de cititoare de ecran navighează după titluri. Este o bună practică în sprijinul WCAG 1.3.1.

Ce trebuie modificat:
- Ajustați nivelurile titlurilor din secțiunile afectate astfel încât să urmeze în ordine, fără a sări peste niveluri.
- Schimbați doar eticheta, nu și stilul vizual (folosiți clase CSS pentru dimensiune).

O modificare sugerată (Codul temei (căutați în el markupul afișat)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Reguli pentru răspuns:
- Arătați modificarea exactă, înainte și după, și indicați fișierul sau setarea în care se face. Dacă trebuie să vedeți mai întâi fișierul meu, cereți-mi să îl lipesc.
- Păstrați neschimbate designul vizual și tot comportamentul existent.
- Nu inventați nume de produse, prețuri sau texte; folosiți substituenți pe care îi pot completa eu.
- Încheiați cu modul în care pot verifica personal remedierea.
- Includeți modul de confirmare cu tastatura și cu un cititor de ecran.