Przykład

Przykładowy raport: co dostaje Twój klient

To kompletny automatyczny raport o Linden & Loom, fikcyjnym sklepie internetowym, przygotowany pod marką Kestrel & Pine, fikcyjnego studia internetowego. Obie nazwy wymyślono na potrzeby tego przykładu; problemy to prawdziwe wyniki naszego skanera na stronach demonstracyjnych sklepu.

Otwórz przykładowy PDF Zobacz cennik

Twoje logo i kolor zamiast naszych: na stronie, w PDF i w e-mailach.
W języku Twojego klienta: zmień język strony, aby zobaczyć ten sam raport w innym języku.
Prywatny link dla Twojego klienta i cotygodniowa kontrola, która porównuje każdy wynik z poprzednim.

Przykład z fikcyjnymi nazwami

Raport dostępności

lindenloom.example

Sprawdzono 12 października 2026 · Przygotował: Kestrel & Pine

Wykryte problemy: 36

Rodzaje problemów: 9 · sprawdzone podstrony: 3

Krytyczne: 6
Poważne: 27
Umiarkowane: 3
Drobne: 0

Krytyczne problemy: 6. Mogą uniemożliwić części odwiedzających zakup lub kontakt.

Pierwszy ekran lindenloom.example tak, jak widział go nasz skaner. — Pierwszy ekran strony. Numery oznaczają problemy z listy poniżej.

Wszystkie problemy

Krytyczne 4 elementy

Niektóre przyciski nie mają nazwy

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to oznacza dla odwiedzających

Osoby korzystające z czytników ekranu lub sterowania głosem nie wiedzą, który przycisk dodaje produkt do koszyka, otwiera menu albo uruchamia wyszukiwanie. Może to całkowicie uniemożliwić im zakup.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby sterujące urządzeniem za pomocą głosu

Jak naprawić

Nadaj nazwę każdemu przyciskowi: widoczny tekst, aria-label lub aria-labelledby wskazujące na widoczny tekst. Przyciski z samą ikoną potrzebują aria-label, np. "Dodaj do koszyka" lub "Zamknij". Nie polegaj na atrybucie title ani na ikonach dodanych tylko w CSS.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Podstrony, na których występuje

/×2
/product.html×2

Przykłady na stronie

Zrzut ekranu elementu na stronie, zaznaczonego na czerwono: Niektóre przyciski nie mają nazwy

Element: button[type="button"]:nth-child(1)

Kod dla programisty

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Element: .icons > button:nth-child(1)

Kod dla programisty

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Element: .cart

Kod dla programisty

<button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Inne elementy z tym samym problemem: 1.

Krytyczne 1 element

Pola formularza nie mają etykiet

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to oznacza dla odwiedzających

Osoby korzystające z czytników ekranu słyszą tylko „pole edycji” i nie wiedzą, czy wpisać imię, telefon czy kod pocztowy. W kasie prowadzi to wprost do porzuconych zamówień. Pola opisane wyłącznie placeholderem dezorientują też starszych klientów, gdy zaczną pisać.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
starsi klienci
osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi
osoby sterujące urządzeniem za pomocą głosu

Jak naprawić

Połącz widoczną etykietę <label for> z każdym polem albo umieść pole wewnątrz etykiety. aria-label stosuj tylko wtedy, gdy widoczna etykieta naprawdę nie jest możliwa. Placeholder nie jest etykietą. Sprawdź pola wyszukiwania, newslettera, ilości i kasy.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Element: input
Kod dla programisty
```
<input type="number" value="1" min="1">
```

Krytyczne 1 element

Lista rozwijana nie ma etykiety

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to oznacza dla odwiedzających

Osoby korzystające z czytników ekranu słyszą tylko „pole kombi” i nie wiedzą, czy wybierają rozmiar, kolor, ilość czy kraj. Może to uniemożliwić wybór wariantu produktu lub złożenie zamówienia.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby sterujące urządzeniem za pomocą głosu
osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi

Jak naprawić

Połącz widoczną etykietę <label for> z każdym <select> albo użyj aria-labelledby wskazującego na widoczny tekst. aria-label stosuj tylko wtedy, gdy widoczna etykieta nie jest możliwa. Sprawdź wybór wariantów, sortowanie i wybór kraju.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Zrzut ekranu elementu na stronie, zaznaczonego na czerwono: Lista rozwijana nie ma etykiety

Element: select

Kod dla programisty

<select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>

Poważne 19 elementów

Tekst jest trudny do odczytania z powodu niskiego kontrastu

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

Co to oznacza dla odwiedzających

Osoby gorzej widzące, starsi klienci i każdy, kto korzysta z telefonu na zewnątrz, mogą przeoczyć ceny, warunki dostawy lub opisy przycisków. Trudny do odczytania tekst prowadzi do wahania i porzuconych koszyków.

Kogo to dotyczy

osoby słabowidzące
starsi klienci
osoby z zaburzeniami widzenia barw
osoby korzystające z telefonu w ostrym świetle

Jak naprawić

Zapewnij współczynnik kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (24px lub 18.66px pogrubiony). Sprawdź placeholdery, stany wyglądające na nieaktywne, tekst na zdjęciach i plakietki promocji. Poprawiaj kolory w tokenach projektu lub CSS, a nie w pojedynczych elementach.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Podstrony, na których występuje

/×13
/product.html×4
/contact.html×2

Przykłady na stronie

Kontrast 3,93 : 1, wymagane co najmniej 4,5 : 1 tekst #8c8178 na #2b2622, 9.8pt (13px)

Element: .bar > span
Kod dla programisty
```
<span>· Returns within 30 days</span>
```
Kontrast 3,93 : 1, wymagane co najmniej 4,5 : 1 tekst #8c8178 na #2b2622, 9.8pt (13px)

Element: .bar > span
Kod dla programisty
```
<span>· Returns within 30 days</span>
```
Kontrast 2,88 : 1, wymagane co najmniej 4,5 : 1 tekst #ffffff na #c98a5b, 11.3pt (15px)

Element: button
Kod dla programisty
```
<button type="submit" class="btn">Send</button>
```

Inne elementy z tym samym problemem: 16.

Poważne 5 elementów

Zdjęcia nie mają opisu tekstowego

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

Co to oznacza dla odwiedzających

Osoby korzystające z czytników ekranu nie słyszą nic albo słyszą nazwę pliku, np. „IMG_2041.jpg”, zamiast nazwy produktu, koloru czy oferty. Mogą przeoczyć ważne szczegóły i przejść do sklepu, który opisuje swoje produkty.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby z wyłączonymi obrazami lub wolnym internetem

Jak naprawić

Dodaj atrybut alt do każdego <img>. Krótko opisz to, co ważne przy zakupie (produkt, kolor, kluczowy szczegół). Dla obrazów czysto dekoracyjnych użyj alt="", aby zostały pominięte. Nie powtarzaj „zdjęcie przedstawiające” i nie upychaj słów kluczowych.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Element: img[src$="hero.svg"]
Kod dla programisty
```
<img src="/hero.svg" width="800" height="600">
```
Element: img[src$="duvet.svg"]
Kod dla programisty
```
<img src="/duvet.svg">
```
Element: img[src$="towel.svg"]
Kod dla programisty
```
<img src="/towel.svg">
```

Inne elementy z tym samym problemem: 2.

Poważne 3 elementy

Niektóre linki nie mówią, dokąd prowadzą

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

Co to oznacza dla odwiedzających

Osoby korzystające z czytników ekranu słyszą tylko „link” i nie wiedzą, czy otworzy on koszyk, konto czy Instagram. Tracą czas lub rezygnują z szukania koszyka albo strony kontaktowej.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby sterujące urządzeniem za pomocą głosu

Jak naprawić

Nadaj każdemu linkowi nazwę tekstową: widoczny tekst, alt obrazka wewnątrz linku lub aria-label przy linkach z samą ikoną. Nazwa powinna opisywać cel, np. "Koszyk, 2 produkty". Dekoracyjne ikony ukryj za pomocą aria-hidden="true".

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Zrzut ekranu elementu na stronie, zaznaczonego na czerwono: Niektóre linki nie mówią, dokąd prowadzą

Element: .icons > a[href$="contact.html"]

Kod dla programisty

<a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>

Element: a[href$="contact.html"]:nth-child(1)

Kod dla programisty

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

Element: .social > a[href$="contact.html"]:nth-child(2)

Kod dla programisty

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>

Umiarkowane 1 element

Linki w tekście wyglądają jak zwykły tekst

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

Co to oznacza dla odwiedzających

Osoby z zaburzeniami widzenia barw lub słabowidzące mogą nie zauważyć linków do warunków dostawy, tabeli rozmiarów czy zasad zwrotów i przeoczyć potrzebne informacje.

Kogo to dotyczy

osoby z zaburzeniami widzenia barw
osoby słabowidzące
starsi klienci

Jak naprawić

Podkreślaj linki w treści albo nadaj im inne oznaczenie niezależne od koloru. Jeśli wyróżniasz je tylko kolorem, link musi mieć kontrast co najmniej 3:1 względem otaczającego tekstu oraz widoczną zmianę po najechaniu i przy fokusie.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Element: .desc > a[href$="contact.html"]
Kod dla programisty
```
<a href="/contact.html">care guide</a>
```

Umiarkowane 1 element

Niektóre nagłówki to tylko pogrubiony lub duży tekst

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

Co to oznacza dla odwiedzających

Niewidomi klienci często przechodzą od nagłówka do nagłówka, aby znaleźć sekcje takie jak „Opis”, „Dostawa” czy „Opinie”. Udawane nagłówki są dla tej nawigacji niewidoczne, więc muszą wysłuchać całej strony i mogą przeoczyć ważne informacje.

Kogo to dotyczy

niewidomi klienci
użytkownicy czytników ekranu
osoby nawigujące skrótami klawiszowymi

Jak naprawić

Zamień tekst pełniący rolę tytułu sekcji na prawdziwy nagłówek (<h2>, <h3> itd.) w logicznej kolejności, a wygląd ustaw w CSS. W edytorach wybieraj „Nagłówek 2” lub „Nagłówek 3” z menu formatowania zamiast pogrubiać lub powiększać tekst. Jeśli tekst nie jest nagłówkiem, zostaw go jako akapit: axe oznacza tę kontrolę jako eksperymentalną i czasem zgłasza pogrubione zdania wstępu.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Element: .price
Kod dla programisty
```
<p class="price">€129</p>
```

Umiarkowane 1 element

Pola w kasie nie wypełniają się automatycznie

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

Co to oznacza dla odwiedzających

Klienci muszą ręcznie wpisywać adres, numer telefonu i e-mail. Najbardziej odczuwają to osoby z trudnościami ruchowymi lub z pamięcią, a wolniejsze składanie zamówienia zniechęca wszystkich kupujących.

Kogo to dotyczy

osoby z niepełnosprawnością ruchową
osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi
osoby robiące zakupy na telefonie
wszyscy klienci składający zamówienie

Jak naprawić

Używaj prawidłowych tokenów autocomplete ze specyfikacji HTML, pasujących do pola, np. "email", "given-name", "postal-code", "tel". Popraw literówki i wymyślone wartości; "off" stosuj tylko tam, gdzie autouzupełnianie byłoby błędne.

Część wyjaśnienia to tłumaczenie maszynowe, którego native speaker jeszcze nie sprawdził.

Przykłady na stronie

Zrzut ekranu elementu na stronie, zaznaczonego na czerwono: Pola w kasie nie wypełniają się automatycznie

Element: input[type="email"]

Kod dla programisty

<input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Zalecenia ponad WCAG 2.2 AA

Ponad poziom WCAG 2.2 AA, na którym opierają się przepisy. Nie liczą się jako problemy; ich poprawa ułatwia korzystanie ze strony.

Część treści znajduje się poza głównymi obszarami strony Elementy: 2

Niektóre fragmenty strony nie są umieszczone w punktach orientacyjnych (landmarks), takich jak nagłówek, nawigacja, treść główna czy stopka. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

Umieść całą widoczną treść w elementach punktów orientacyjnych: <header>, <nav>, <main>, <aside> i <footer> (lub odpowiadających im rolach ARIA). Przenieś „zabłąkane” bloki, takie jak paski ogłoszeń, banery i formularze newslettera, do właściwego obszaru i upewnij się, że każda strona ma dokładnie jeden <main>. Okna pop-up i banery cookies można oznaczyć jako okno dialogowe lub nazwany region.
Tekst nie osiąga podwyższonego kontrastu (AAA) Elementy: 1 WCAG AAA

Część tekstu spełnia podstawowy poziom kontrastu, ale nie surowszy: 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. To zalecana praktyka wykraczająca poza WCAG AA, a nie wymóg.

Tam, gdzie to praktyczne, podnieś kontrast do 7:1 dla zwykłego tekstu i 4.5:1 dla dużego (24px lub 18.66px pogrubione), zaczynając od tekstu głównego, cen i kasy. Przyciemnij kolory tekstu lub rozjaśnij tła w tokenach projektu lub CSS. Najpierw usuń podstawowe problemy z kontrastem 4.5:1 (reguła color-contrast); ta kontrola to tylko dodatkowa wskazówka.

W porównaniu z poprzednim sprawdzeniem

Sprawdzenie z 5 października 2026: problemy — 40

Nowe: 19
Naprawione: 22
Pozostałe: 17

Naprawione od poprzedniego sprawdzenia

✓ Tekst jest trudny do odczytania z powodu niskiego kontrastu×7
✓ Zdjęcia nie mają opisu tekstowego×4
✓ Strona nie określa, w jakim jest języku×3
✓ Niektóre przyciski nie mają nazwy×2
✓ Niektóre linki nie mówią, dokąd prowadzą×2
✓ Pola formularza nie mają etykiet×1
✓ Linki w tekście wyglądają jak zwykły tekst×1
✓ Niektóre nagłówki to tylko pogrubiony lub duży tekst×1
✓ Lista rozwijana nie ma etykiety×1

Problemy w kolejnych sprawdzeniach

Problemy w kolejnych sprawdzeniach
Data	Znalezione problemy
12 października 2026	36
5 października 2026	40

Sprawdzone strony

Podstrona	Problemy
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/	23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html	10
Contact – Linden & Loomhttps://lindenloom.example/contact.html	3

Ten sam raport w PDF — do archiwum lub dla programisty.

Otwórz przykładowy PDF

Automatyczna kontrola, nie pełny audyt. Nie stanowi porady prawnej. Narzędzia automatyczne wykrywają tylko część problemów z dostępnością; nadal potrzebne są testy z klawiaturą i czytnikiem ekranu.