harborandpine.example

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Fokus klávesnice uvízne v cookie liště (WCAG 2.1.2).
Kde: 1 výskyt na 1 stránce, například /.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
Settings
```

Proč na tom záleží: Pokud fokus uvízne, lidé, kteří používají jen klávesnici nebo čtečku obrazovky, nemohou vůbec nakupovat (WCAG 2.1.2 No Keyboard Trap).

Co je potřeba změnit:
- V nastavení aplikace pro cookie nebo souhlasovou lištu hledejte volbu pro přístupnost nebo zachytávání fokusu, nebo požádejte dodavatele o opravu.
- Modální okno smí držet fokus uvnitř jen po dobu, kdy je otevřené; musí se zavírat klávesou Escape a vracet fokus tam, odkud přišel.

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Volby produktu nelze vybrat klávesnicí (WCAG 2.1.1).
Kde: 1 výskyt na 1 stránce, například /products/trail-daypack.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Proč na tom záleží: Zákazníci, kteří používají jen klávesnici, včetně mnoha uživatelů čteček obrazovky, se přes tento krok nedostanou (WCAG 2.1.1).

Co je potřeba změnit:
- Výběr voleb sestavte z nativních přepínačů (radio buttons) nebo z prvku <select> s viditelnými popisky; jako vzorník nastylujte popisek.
- Pokud si ponecháte vlastní prvky, každá volba potřebuje tabindex="0", role="radio" s aria-checked uvnitř role="radiogroup" a obsluhu šipek a mezerníku. Nativní přepínače vám tohle všechno dají bez práce navíc.

Navrhovaná změna (Produktový formulář ve vašem motivu (výběr varianty)):
```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>
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Tlačítka musí mít rozpoznatelný text (WCAG 4.1.2).
Kde: 41 výskytů na 9 stránkách, například /, /collections/all, /products/trail-daypack, /cart.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```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>
```

Proč na tom záleží: WCAG 4.1.2 vyžaduje, aby každý ovládací prvek měl název. Tlačítka bez názvu jsou často tlačítka pro změnu množství, zavírací tlačítka a šipky slideru.

Co je potřeba změnit:
- Najděte tlačítka v příkladech níže.
- Přidejte viditelný text, vizuálně skrytý text nebo aria-label, který říká, co tlačítko dělá (například aria-label="Close" nebo aria-label="Increase quantity").

Navrhovaná změna (Kód vašeho motivu (vyhledejte v něm zobrazený kód)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Obrázky musí mít alternativní text (WCAG 1.1.1).
Kde: 22 výskytů na 7 stránkách, například /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Proč na tom záleží: WCAG 1.1.1 vyžaduje textovou alternativu u obrázků, které nesou význam. Bez ní uživatel čtečky obrazovky nepozná, jaký produkt fotka zobrazuje.

Co je potřeba změnit:
- V administraci Shopify otevřete Produkty > [produkt] > Média, klikněte na každý obrázek a vyplňte „Alternativní text“. U obrázků v sekcích otevřete Online obchod > Motivy > Přizpůsobit a alternativní text obrázku nastavte v nastavení sekce.
- Popište, na čem zákazníkovi záleží: název produktu, barvu a zobrazený úhel pohledu (například „Plátěná taška v olivové barvě, pohled zepředu“).
- Dekorativní obrázky by měly mít prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.

Navrhovaná změna (Produktové fotky: administrace Shopify › Produkty › Média › Alternativní text. Ostatní obrázky: kód vašeho motivu):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Prvky formuláře musí mít popisky (WCAG 4.1.2).
Kde: 7 výskytů na 6 stránkách, například /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<input type="number" value="1" min="1">
```

Proč na tom záleží: WCAG 1.3.1, 3.3.2 a 4.1.2 vyžadují, aby pole formuláře měla popisky. Častými viníky jsou pole pro přihlášení k newsletteru a vyhledávací pole.

Co je potřeba změnit:
- Dejte každému poli prvek <label for="field-id">, nebo alespoň aria-label.
- Samotný zástupný text (placeholder) se za popisek nepovažuje.

Navrhovaná změna (Kód vašeho motivu (vyhledejte v něm zobrazený kód)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Prvek select musí mít přístupný název (WCAG 4.1.2).
Kde: 1 výskyt na 1 stránce, například /collections/all.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Proč na tom záleží: WCAG 4.1.2 vyžaduje, aby rozbalovací seznamy měly přístupný název.

Co je potřeba změnit:
- Přidejte <label> propojený se seznamem nebo aria-label, například aria-label="Sort by".

Navrhovaná změna (Kód vašeho motivu (vyhledejte v něm zobrazený kód)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Odkazy musí mít rozpoznatelný text (WCAG 2.4.4, 4.1.2).
Kde: 36 výskytů na 9 stránkách, například /, /collections/all, /products/trail-daypack, /cart.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```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>
```

Proč na tom záleží: WCAG 2.4.4 a 4.1.2 vyžadují, aby odkazy měly přístupný název, který popisuje jejich účel.

Co je potřeba změnit:
- Najděte odkazy v příkladech níže. Většinou jde o ikony nebo obrázky uvnitř tagu <a>.
- Do odkazu přidejte vizuálně skrytý text nebo aria-label, například aria-label="Instagram" nebo aria-label="Cart".
- Pokud odkaz obsahuje obrázek, dejte místo toho obrázku smysluplný alternativní text.

Navrhovaná změna (Kód vašeho motivu (vyhledejte v něm zobrazený kód)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Prvky musí splňovat prahové hodnoty minimálního kontrastního poměru barev (WCAG 1.4.3).
Kde: 22 výskytů na 9 stránkách, například /, /collections/all, /products/trail-daypack, /cart.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Proč na tom záleží: WCAG 1.4.3 vyžaduje kontrastní poměr nejméně 4,5:1 pro běžný text a 3:1 pro velký text. Bledé ceny, štítky a bannery se špatně čtou lidem se slabým zrakem a na ostrém světle všem.

Co je potřeba změnit:
- Otevřete níže uvedené chybné prvky a v souhrnu chyby si poznamenejte barvu popředí a pozadí.
- V nabídce Online obchod > Motivy > Přizpůsobit > Nastavení motivu > Barvy ztmavte barvu textu nebo zesvětlete pozadí u dotčeného barevného schématu, dokud poměr nebude alespoň 4,5:1.
- Zvláštní pozornost věnujte štítkům slev, zástupnému textu (placeholder), odkazům v patičce a tlačítkům na obrázcích.

Navrhovaná změna (Nastavení motivu › Barvy, nebo soubor CSS vašeho motivu):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Veškerý obsah stránky by měl být uvnitř orientačních oblastí.
Kde: 18 výskytů na 9 stránkách, například /, /collections/all, /products/trail-daypack, /cart.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Proč na tom záleží: Orientační oblasti umožňují uživatelům čteček obrazovky přeskakovat po stránce. Jde o osvědčený postup, který podporuje WCAG 1.3.1 a 2.4.1.

Co je potřeba změnit:
- Obsah mimo oblasti (oznamovací lišty, vyskakovací okna, chatové widgety) zabalte do vhodné orientační oblasti nebo ho umístěte do <main>.

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.

Provozuji obchod na Shopify (motiv Online Store 2.0, šablony Liquid) na adrese harborandpine.example. Test přístupnosti našel tento problém a chci ho opravit ve svém motivu.

Problém: Úrovně nadpisů by se měly zvyšovat jen o jednu.
Kde: 7 výskytů na 7 stránkách, například /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Jeden chybný prvek tak, jak ho vykreslil prohlížeč:
```html
<h3>Trail Daypack 22L</h3>
```

Proč na tom záleží: Uživatelé čteček obrazovky se na stránce pohybují podle nadpisů. Jde o osvědčený postup, který podporuje WCAG 1.3.1.

Co je potřeba změnit:
- Upravte úrovně nadpisů v dotčených sekcích tak, aby šly po sobě a žádnou úroveň nepřeskakovaly.
- Měňte jen tag, ne vzhled (velikost nastavte třídami CSS).

Navrhovaná změna (Kód vašeho motivu (vyhledejte v něm zobrazený kód)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Pravidla pro vaši odpověď:
- Ukažte přesnou úpravu jako stav před a po a uveďte soubor nebo nastavení, kam patří. Pokud nejdřív potřebujete vidět můj soubor, požádejte mě o jeho vložení.
- Vzhled a veškeré stávající chování zachovejte beze změny.
- Nevymýšlejte názvy produktů, ceny ani texty; použijte zástupné hodnoty, které mohu doplnit.
- Na závěr uveďte, jak si mohu opravu ověřit.
- Uveďte, jak opravu ověřit klávesnicí a čtečkou obrazovky.