Przykładowy raport WCAG online i PDF

71/ 100

Wymaga uwagi

Wynik automatycznej dostępności

Techniczny wskaźnik ryzyka pomagający ustalić priorytety. To nie procent zgodności z WCAG, certyfikat ani pełny audyt ekspercki.

Wykryte wystąpienia: 7
Zbadane podstrony: 3
Zakończono: 07.10.2026, 20:21

Pobierz pełny przykładowy PDF Zleć poprawki DoSieci

Zakres badania

Co rzeczywiście sprawdził skaner

playwright-axe-core

3odkrytych adresów

3zbadanych podstron

63reguł w zakresie silnika

0pominiętych lub błędnych

Skan obejmuje adresy znalezione w linkach wewnętrznych i mapach witryny. Sprawdza je w przeglądarce regułami axe-core dla WCAG 2.0, 2.1 i 2.2 (A i AA): m.in. teksty alternatywne, kontrast, formularze, nazwy elementów, tabele, ARIA i rozmiar celów dotykowych.

Wyniki techniczne

Wykryte problemy

6 reguł, 7 wystąpień

Krytyczny WCAG A 2 wystąpień 2 podstron

Obrazy muszą mieć tekst alternatywny.

Elementy <img> mają atrybut alt lub rolę none albo presentation.

Wpływ na użytkownika: Osoba korzystająca z czytnika ekranu może nie poznać znaczenia lub funkcji obrazu.

Zalecenie: Opisz znaczenie obrazu w alt. Dla dekoracji użyj alt="". Obraz w linku lub przycisku powinien opisywać działanie, nie wygląd.

<img src="produkt.jpg" alt="Czerwona torba z dwiema kieszeniami">

Dokumentacja reguły image-alt

Pokaz przyklady i podstrony (2)

https://cyfrowodostepni.pl/demo/index.html img

<img src="/images/hero-800.webp">

Napraw następujące elementy: Element nie ma atrybutu alt. Atrybut aria-label nie istnieje lub jest pusty. Atrybut aria-labelledby nie istnieje albo elementy, do których odwołuje atrybut aria-labelledby, nie istnieją lub są puste. Element nie ma atrybutu title. Domyślna semantyka elementu nie została nadpisana przez role="none" ani role="presentation".

https://cyfrowodostepni.pl/demo/produkt.html img

<img src="/images/hero-800.webp">

Napraw następujące elementy: Element nie ma atrybutu alt. Atrybut aria-label nie istnieje lub jest pusty. Atrybut aria-labelledby nie istnieje albo elementy, do których odwołuje atrybut aria-labelledby, nie istnieją lub są puste. Element nie ma atrybutu title. Domyślna semantyka elementu nie została nadpisana przez role="none" ani role="presentation".

Krytyczny WCAG A 1 wystąpień 1 podstron

Przyciski muszą mieć odróżniający je tekst nazwy.

Każdy przycisk ma odróżniającą go dostępną nazwę.

Wpływ na użytkownika: Działanie przycisku jest niejasne w nawigacji czytnikiem ekranu.

Zalecenie: Dodaj jednoznaczny widoczny tekst. Przy samej ikonie nadaj dostępną nazwę przez aria-label; nazwa ma opisywać działanie.

<button type="button" aria-label="Zamknij okno">X</button>

Dokumentacja reguły button-name

Pokaz przyklady i podstrony (1)

https://cyfrowodostepni.pl/demo/index.html button

<button type="button"></button>

Napraw następujące elementy: Element nie ma wewnętrznego tekstu, który jest widoczny dla czytników ekranu. Atrybut aria-label nie istnieje lub jest pusty. Atrybut aria-labelledby nie istnieje albo elementy, do których odwołuje atrybut aria-labelledby, nie istnieją lub są puste. Element nie ma atrybutu title. Element formularza nie ma dorozumianej etykiety (nie jest owinięty w label). Element formularza nie ma jawnie określonej label. Domyślna semantyka elementu nie została nadpisana przez role="none" ani role="presentation".

Powazny WCAG A 1 wystąpień 1 podstron

Element <html> musi mieć atrybut lang.

Każdy dokument HTML ma atrybut lang.

Wpływ na użytkownika: Czytnik ekranu może stosować niewłaściwą wymowę.

Zalecenie: Ustaw poprawny kod języka dokumentu w html. Fragmenty w innym języku oznacz własnym atrybutem lang.

<html lang="pl">

Dokumentacja reguły html-has-lang

Pokaz przyklady i podstrony (1)

https://cyfrowodostepni.pl/demo/index.html html

<html>

Napraw następujące elementy: Element <html> nie ma atrybutu lang.

Powazny WCAG AA 1 wystąpień 1 podstron

Elementy muszą mieć wystarczający kontrast kolorów.

Kontrast między kolorami pierwszego planu i tła spełnia progi kontrastu WCAG 2 AA.

Wpływ na użytkownika: Tekst może być trudny do odczytania przez osoby słabowidzące.

Zalecenie: Zmień kolor tekstu lub tła. Dla zwykłego tekstu zapewnij co najmniej 4,5:1, a dla dużego 3:1. Sprawdź także stany interaktywne, stosownie do kryterium.

color: #444; background-color: #fff;

Dokumentacja reguły color-contrast

Pokaz przyklady i podstrony (1)

https://cyfrowodostepni.pl/demo/produkt.html .faint

<p class="faint">Ten tekst ma celowo zbyt niski kontrast.</p>

Napraw następujące elementy: Element ma niewystarczający kontrast kolorów 2.16 (kolor pierwszego planu: #b0b0b0, kolor tła: #ffffff, rozmiar czcionki: 13.5pt (18px), waga czcionki: normal). Oczekiwany współczynnik kontrastu: 4.5:1

Krytyczny WCAG A 1 wystąpień 1 podstron

Element formularza musi mieć etykietę.

Każdy element formularza ma etykietę.

Wpływ na użytkownika: Użytkownik czytnika ekranu nie wie, jakie dane wpisać w pole.

Zalecenie: Dodaj widoczny label i połącz go z unikalnym id pola. Nie zastępuj etykiety samym placeholderem. Instrukcje i błędy połącz przez aria-describedby.

<label for="email">E-mail</label><input id="email" type="email">

Dokumentacja reguły label

Pokaz przyklady i podstrony (1)

https://cyfrowodostepni.pl/demo/kontakt.html #message-demo

<textarea id="message-demo" rows="4"></textarea>

Napraw następujące elementy: Element formularza nie ma dorozumianej etykiety (nie jest owinięty w label). Element formularza nie ma jawnie określonej label. Atrybut aria-label nie istnieje lub jest pusty. Atrybut aria-labelledby nie istnieje albo elementy, do których odwołuje atrybut aria-labelledby, nie istnieją lub są puste. Element nie ma atrybutu title. Element nie ma atrybutu placeholder. Domyślna semantyka elementu nie została nadpisana przez role="none" ani role="presentation".

Powazny WCAG A 1 wystąpień 1 podstron

Łącza muszą mieć odróżniający je tekst.

Łącza mają odróżniający je tekst.

Wpływ na użytkownika: Cel linku jest niejasny w nawigacji czytnikiem ekranu.

Zalecenie: Dodaj tekst opisujący cel linku. Dla linku z samą ikoną użyj aria-label. Obraz będący jedyną treścią linku powinien mieć alt opisujący cel.

<a href="/kontakt">Kontakt z obsługą</a>

Dokumentacja reguły link-name

Pokaz przyklady i podstrony (1)

https://cyfrowodostepni.pl/demo/kontakt.html p:nth-child(5) > a[href="index.html"]

<a href="index.html"><span aria-hidden="true">←</span></a>

Napraw wszystkie poniższe: Element znajduje się w porządku tabulacji i nie ma dostępnego tekstu. Napraw następujące elementy: Element nie ma tekstu, który jest widoczny dla czytników ekranu. Atrybut aria-label nie istnieje lub jest pusty. Atrybut aria-labelledby nie istnieje albo elementy, do których odwołuje atrybut aria-labelledby, nie istnieją lub są puste. Element nie ma atrybutu title.

Kontrola ekspercka

Elementy wymagające ręcznej weryfikacji

1 obszary

WCAG AAcolor-contrast

Elementy muszą mieć wystarczający kontrast kolorów.

Kontrast między kolorami pierwszego planu i tła spełnia progi kontrastu WCAG 2 AA.

Jak sprawdzić: Elementy muszą mieć wystarczający kontrast kolorów.

Pokaż miejsca do ręcznej oceny (1)

https://cyfrowodostepni.pl/demo/kontakt.html / span

Ręczna ocena poza wynikiem automatu

Niezależnie od wykrytych problemów sprawdź obsługę klawiaturą i czytnikiem ekranu, fokus, sens opisów, powiększenie, multimedia oraz kluczowe interakcje. Skan nie loguje się i nie przechodzi interaktywnie całego zakupu w sklepie.

DoSieci może ocenić zakres, wycenić prace, wdrożyć uzgodnione poprawki i ponownie je zweryfikować.

Zleć poprawki DoSieci

Pokrycie witryny

Lista zbadanych podstron

3 adresów

Adres	HTTP	Status	Czas
https://cyfrowodostepni.pl/demo/index.html	200	Zbadana	1453 ms
https://cyfrowodostepni.pl/demo/produkt.html	200	Zbadana	1244 ms
https://cyfrowodostepni.pl/demo/kontakt.html	200	Zbadana	1240 ms