# Obrazy muszą mieć tekst alternatywny

<https://www.fixreports.com/pl/issues/image-alt>

WCAG 1.1.1 Treść nietekstowa · poziom A

Obrazy nie mają tekstu alternatywnego, więc osoby korzystające z czytników ekranu nie wiedzą, co przedstawiają.

## Co sprawdza ta reguła
Elementy <img> mają atrybut alt lub rolę none albo presentation.

## 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.

## Jak to naprawić
### Na dowolnej stronie
1. W systemie CMS lub szablonie dodaj do tekstu alternatywnego każdego obrazu krótki, konkretny opis.
2. Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
3. Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.

### W Shopify
1. 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.
2. Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
3. Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.

### W WooCommerce i WordPressie
1. W WordPressie otwórz Media > Biblioteka, zaznacz każdy obraz i uzupełnij pole „Tekst alternatywny”. Obrazy w galerii produktu korzystają z tego samego pola.
2. Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
3. Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.

## Jak sprawdzić poprawkę
- Przeskanuj ponownie podstrony, których to dotyczy.
- Użyj czytnika ekranu (VoiceOver: Cmd+F5 na Macu), aby usłyszeć, jak odczytywane są obrazy produktów.

## Źródła
- Dokumentacja reguły axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Objaśnienie kryterium WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content