harborandpine.example

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Fokus klawiatury jest uwięziony w banerze cookie (WCAG 2.1.2).
Gdzie: 1 wystąpienie na 1 podstronie, np. /.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
Settings
```

Dlaczego to ważne: Osoby korzystające wyłącznie z klawiatury i z czytników ekranu w ogóle nie mogą robić zakupów, jeśli fokus jest uwięziony (WCAG 2.1.2 Bez pułapki na klawiaturę).

Co trzeba zmienić:
- Sprawdź w ustawieniach aplikacji banera cookie lub zgód, czy jest opcja dotycząca dostępności lub pułapki fokusu, albo poproś dostawcę o poprawkę.
- Okno modalne może utrzymywać fokus w swoim wnętrzu tylko wtedy, gdy jest otwarte; klawisz Escape musi je zamykać, a fokus musi wracać tam, skąd przyszedł.

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Opcji produktu nie da się wybrać klawiaturą (WCAG 2.1.1).
Gdzie: 1 wystąpienie na 1 podstronie, np. /products/trail-daypack.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Dlaczego to ważne: Osoby robiące zakupy wyłącznie z klawiatury, w tym wiele osób używających czytników ekranu, nie mogą przejść dalej na tym etapie (WCAG 2.1.1).

Co trzeba zmienić:
- Zbuduj selektory opcji z natywnych przycisków opcji (radio) lub elementu <select> z widocznymi etykietami; nadaj etykiecie wygląd próbki.
- Jeśli zostawiasz własne elementy, każda opcja potrzebuje tabindex="0", role="radio" z aria-checked wewnątrz role="radiogroup" oraz obsługi strzałek i spacji. Natywne przyciski opcji zapewniają to wszystko bez dodatkowej pracy.

Proponowana zmiana (Formularz produktu w Twoim motywie (wybór wariantu)):
```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>
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Przyciski muszą mieć odróżniający je tekst nazwy (WCAG 4.1.2).
Gdzie: 41 wystąpień na 9 podstronach, np. /, /collections/all, /products/trail-daypack, /cart.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```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>
```

Dlaczego to ważne: WCAG 4.1.2 wymaga, aby każdy element sterujący miał nazwę. Wśród przycisków bez nazw często są przyciski zmiany ilości, przyciski zamykania i strzałki suwaków.

Co trzeba zmienić:
- Znajdź przyciski w poniższych przykładach.
- Dodaj widoczny tekst, tekst ukryty wizualnie lub atrybut aria-label, który mówi, co robi przycisk (np. aria-label="Close" lub aria-label="Increase quantity").

Proponowana zmiana (Kod Twojego motywu (wyszukaj w nim pokazany fragment HTML)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Obrazy muszą mieć tekst alternatywny (WCAG 1.1.1).
Gdzie: 22 wystąpienia na 7 podstronach, np. /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Dlaczego to ważne: WCAG 1.1.1 wymaga tekstu alternatywnego dla obrazów niosących treść. Bez niego osoba korzystająca z czytnika ekranu nie wie, jaki produkt przedstawia zdjęcie.

Co trzeba zmienić:
- W panelu administracyjnym Shopify otwórz Produkty > [produkt] > Multimedia, kliknij każdy obraz i uzupełnij pole „Tekst alternatywny”. W przypadku obrazów w sekcjach otwórz Sklep online > Motywy > Dostosuj i ustaw tekst alternatywny obrazu w ustawieniach sekcji.
- Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
- Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.

Proponowana zmiana (Zdjęcia produktów: panel Shopify › Produkty › Multimedia › Tekst alternatywny. Inne obrazy: kod Twojego motywu):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Element formularza musi mieć etykietę (WCAG 4.1.2).
Gdzie: 7 wystąpień na 6 podstronach, np. /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<input type="number" value="1" min="1">
```

Dlaczego to ważne: WCAG 1.3.1, 3.3.2 i 4.1.2 wymagają, aby pola formularzy miały etykiety. Najczęściej dotyczy to pól zapisu do newslettera i pól wyszukiwania.

Co trzeba zmienić:
- Nadaj każdemu polu element <label for="field-id"> albo przynajmniej atrybut aria-label.
- Sam tekst zastępczy (placeholder) nie jest etykietą.

Proponowana zmiana (Kod Twojego motywu (wyszukaj w nim pokazany fragment HTML)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Element select musi mieć dostępną nazwę (WCAG 4.1.2).
Gdzie: 1 wystąpienie na 1 podstronie, np. /collections/all.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Dlaczego to ważne: WCAG 4.1.2 wymaga, aby listy wyboru miały dostępną nazwę.

Co trzeba zmienić:
- Dodaj element <label> powiązany z listą wyboru albo atrybut aria-label, np. aria-label="Sort by".

Proponowana zmiana (Kod Twojego motywu (wyszukaj w nim pokazany fragment HTML)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Łącza muszą mieć odróżniający je tekst (WCAG 2.4.4, 4.1.2).
Gdzie: 36 wystąpień na 9 podstronach, np. /, /collections/all, /products/trail-daypack, /cart.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```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>
```

Dlaczego to ważne: WCAG 2.4.4 i 4.1.2 wymagają, aby linki miały dostępną nazwę opisującą ich cel.

Co trzeba zmienić:
- Znajdź linki w poniższych przykładach. Większość to ikony lub obrazy wewnątrz tagu <a>.
- Dodaj w linku tekst ukryty wizualnie albo atrybut aria-label, np. aria-label="Instagram" lub aria-label="Cart".
- Jeśli link obejmuje obraz, nadaj zamiast tego obrazowi znaczący tekst alternatywny.

Proponowana zmiana (Kod Twojego motywu (wyszukaj w nim pokazany fragment HTML)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Elementy muszą mieć wystarczający kontrast kolorów (WCAG 1.4.3).
Gdzie: 22 wystąpienia na 9 podstronach, np. /, /collections/all, /products/trail-daypack, /cart.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Dlaczego to ważne: WCAG 1.4.3 wymaga współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Blade ceny, plakietki i banery są trudne do odczytania dla osób słabowidzących, a w jasnym świetle dla wszystkich.

Co trzeba zmienić:
- Otwórz wymienione poniżej błędne elementy i zanotuj kolory tekstu i tła podane w podsumowaniu błędu.
- W sekcji Sklep online > Motywy > Dostosuj > Ustawienia motywu > Kolory przyciemnij kolor tekstu lub rozjaśnij tło w danym schemacie kolorów, aż współczynnik wyniesie co najmniej 4,5:1.
- Zwróć szczególną uwagę na plakietki promocji, tekst zastępczy (placeholder), linki w stopce i przyciski na obrazach.

Proponowana zmiana (Ustawienia motywu › Kolory lub plik CSS Twojego motywu):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Cała treść strony musi być zawarta w obszarach kluczowych.
Gdzie: 18 wystąpień na 9 podstronach, np. /, /collections/all, /products/trail-daypack, /cart.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Dlaczego to ważne: Punkty orientacyjne pozwalają osobom korzystającym z czytników ekranu szybko przechodzić między częściami strony. To dobra praktyka wspierająca WCAG 1.3.1 i 2.4.1.

Co trzeba zmienić:
- Treść znajdującą się poza punktami orientacyjnymi (paski z ogłoszeniami, pop-upy, widżety czatu) umieść w odpowiednim punkcie orientacyjnym lub wewnątrz <main>.

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.

Prowadzę sklep Shopify (motyw Online Store 2.0, szablony Liquid) pod adresem harborandpine.example. Test dostępności wykrył ten problem i chcę go naprawić w moim motywie.

Problem: Poziomy nagłówków powinny wzrastać tylko o jeden.
Gdzie: 7 wystąpień na 7 podstronach, np. /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Jeden z błędnych elementów w postaci wyrenderowanej przez przeglądarkę:
```html
<h3>Trail Daypack 22L</h3>
```

Dlaczego to ważne: Osoby korzystające z czytników ekranu poruszają się po stronie według nagłówków. To dobra praktyka wspierająca WCAG 1.3.1.

Co trzeba zmienić:
- Popraw poziomy nagłówków w sekcjach, których to dotyczy, tak aby następowały po kolei, bez pomijania poziomów.
- Zmień tylko tag, a nie wygląd (rozmiar ustawiaj klasami CSS).

Proponowana zmiana (Kod Twojego motywu (wyszukaj w nim pokazany fragment HTML)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Zasady odpowiedzi:
- Pokaż dokładną zmianę w formie „przed” i „po” oraz wskaż plik lub ustawienie, w którym należy ją wprowadzić. Jeśli najpierw musisz zobaczyć mój plik, poproś mnie o jego wklejenie.
- Zachowaj bez zmian wygląd i całe dotychczasowe działanie.
- Nie wymyślaj nazw produktów, cen ani tekstów; użyj symboli zastępczych, które mogę uzupełnić.
- Na koniec napisz, jak mogę samodzielnie sprawdzić poprawkę.
- Napisz też, jak potwierdzić poprawkę za pomocą klawiatury i czytnika ekranu.