Sprawdzanie dostępności HTML (WCAG 2.2)

Wklej fragment HTML albo całą stronę. Narzędzie pokazuje go w odizolowanej ramce, uruchamia w Twojej przeglądarce otwarty silnik axe-core i wypisuje problemy według wagi, każdy z błędnym kodem, kryterium sukcesu WCAG i wskazówką, jak to naprawić. Nic nie jest wysyłane na nasz serwer.

Co widzisz w wyniku

• Problemy według wagi: krytyczne, poważne, umiarkowane i drobne; najczęstsza reguła na początku.
• Kryterium sukcesu każdego problemu jako link, na przykład 1.1.1 Treść nietekstowa, z poziomem (A lub AA).
• Błędne elementy: selektor CSS i kod HTML, żeby znaleźć miejsce w kodzie.
• Jak to naprawić z naszej biblioteki reguł, w języku tej strony, z linkiem do pełnego wyjaśnienia.
• „Wymaga oka człowieka”: przypadki, których reguła nie mogła rozstrzygnąć, na przykład kolor na obrazie w tle. Sprawdź je ręcznie.

Co zostaje na Twoim komputerze

Przeglądarka przetwarza Twój HTML i pokazuje go w ramce iframe z sandbox="allow-same-origin" i ścisłą polityką bezpieczeństwa treści: żaden skrypt z fragmentu się nie uruchamia, formularze nie wysyłają danych, a linki otwierają się w nowej karcie. Domyślnie podgląd nie ładuje obrazów ani stylów z innych witryn; włącz opcję, jeśli fragment potrzebuje zewnętrznego arkusza stylów. Biblioteka axe-core jest pobierana z naszego serwera przy pierwszym kliknięciu, a sprawdzanie odbywa się w Twojej przeglądarce. Nie dostajemy Twojego kodu.

Fragment czy cała strona

Fragment nie jest stroną, dlatego reguły dotyczące całej strony (tytuł strony, atrybut lang, regiony, nagłówek pierwszego poziomu, link pomijający nawigację) są dla fragmentów wyłączone. Wklej pełny dokument zaczynający się od <!doctype html> lub <html>, a zostaną sprawdzone także one. Opcja „dodaj reguły dobrych praktyk” dopisuje wskazówki, których WCAG nie wymaga; odznacz ją, by widzieć tylko problemy WCAG.

Czego sprawdzenie wklejonego HTML nie znajdzie

• Tego, co strona dodaje później. Kod źródłowy nie zawiera tego, co skrypty zbudują potem. Skopiuj wyrenderowany HTML z narzędzi deweloperskich („Copy outerHTML”) albo przetestuj działający adres w sprawdzaniu WCAG.
• Stylów, których nie wkleiłeś. Kontrast kolorów, ramki fokusu i odstępy w tekście zależą od CSS. Kolory sprawdzisz w sprawdzaniu kontrastu.
• Wszystkiego, co wymaga człowieka. Czy tekst alternatywny opisuje obraz, czy kolejność czytania ma sens, czy użytkownik klawiatury sfinalizuje zamówienie, jak strona brzmi w czytniku ekranu. Zobacz jak testować WCAG.

To automatyczne sprawdzenie, a nie pełny audyt, i nie porada prawna. Wynik bez uwag nie oznacza, że HTML jest dostępny.

To nie walidator w rozumieniu W3C

Walidator składni HTML sprawdza, czy znaczniki zgadzają się ze specyfikacją HTML. To narzędzie sprawdza reguły dostępności: przyciski bez nazwy, obrazy bez tekstu alternatywnego, pola formularza bez etykiet, błędne atrybuty ARIA. To dwa różne pytania; strona może być poprawnym HTML-em i nie spełniać WCAG, i odwrotnie. W WCAG 2.2 nie ma już kryterium 4.1.1 Analiza składni; błędne znaczniki liczą się wtedy, gdy psują nazwy, role lub zależności (4.1.2, 1.3.1).

Gdzie to pasuje

Użyj podczas pisania komponentu lub przeglądu szablonu od klienta. Do działającej strony służy sprawdzanie WCAG, do stron za logowaniem rozszerzenie do przeglądarki. Inne narzędzia porównujemy w zestawieniu narzędzi do testowania dostępności. Pandus uruchamia takie kontrole na każdej stronie Twojego serwisu co tydzień i tłumaczy każdy problem językiem właściciela.

Najczęstsze pytania

Czy mój kod trafia na serwer?

Nie. HTML jest wyświetlany i sprawdzany w Twojej przeglądarce. Z naszego serwera ładuje się tylko sama strona i skrypt sprawdzania; wklejony kod nie jest nigdzie wysyłany.

Czy narzędzie uruchamia skrypty z mojego HTML?

Nie. Podgląd działa w odizolowanej ramce bez zgody na skrypty, więc skrypty wbudowane, procedury zdarzeń i znaczniki script nic nie robią. Treści, które dodałyby skrypty, nie są więc sprawdzane.

Jakich reguł używa?

Reguł axe-core dla WCAG 2.0, 2.1 i 2.2 na poziomach A i AA oraz reguł dobrych praktyk, jeśli zostawisz tę opcję. Wyniki wyjaśniamy własnymi kartami reguł.

Czy to walidator W3C?

Nie. Nie sprawdza składni HTML, tylko reguły dostępności. To inne pytanie.

Czy może potwierdzić, że mój HTML spełnia WCAG lub EAA?

Nie. Reguły automatyczne znajdują tylko część problemów. Nadal potrzebne jest ręczne sprawdzenie z klawiaturą i czytnikiem ekranu, a narzędzie nie jest poradą prawną.