Audytor dostępności HTML

Większość szybkich kontroli dostępności to albo powierzchowne skanowanie słów kluczowych, albo ciężka biblioteka, której musisz zaufać jak czarnej skrzynce. To narzędzie obiera trzecią drogę: parsuje wklejony HTML przy użyciu wbudowanego DOMParser przeglądarki — bez axe-core, bez zewnętrznych bibliotek dostępności, nic nie jest pobierane — a następnie przegląda powstałe drzewo DOM za pomocą zestawu ręcznie napisanych kontroli, które odzwierciedlają typowe, rzeczywiste wzorce niepowodzeń WCAG 2.1. Oznacza to, że logika jest w pełni możliwa do przeanalizowania, a audyt odbywa się w całości w Twojej przeglądarce: wklejony znacznik i każda przetestowana para kolorów nigdy nie są przesyłane ani nigdzie wysyłane.

Kontrole obejmują błędy pojawiające się najczęściej na rzeczywistych stronach: elementy <img> bez żadnego atrybutu alt (rzeczywisty błąd WCAG, w odróżnieniu od celowo pustego alt="" używanego dla obrazów dekoracyjnych, który poprawnie nie jest oznaczany), pola formularzy, w przypadku których technologie asystujące nie mają możliwości określenia ich przeznaczenia (sprawdzane pod kątem każdej rzeczywistej ścieżki do etykiety — pasującego <label for>, bycia opakowanym w <label> lub atrybutu aria-label/aria-labelledby), poziomy nagłówków, które przeskakują bez ostrzeżenia (przejście z <h1> od razu do <h3>, dokument bez żadnego <h1> lub z więcej niż jednym), linki bez href lub z niejasnym, wyrwanym z kontekstu tekstem, takim jak „kliknij tutaj” lub „czytaj więcej”, oraz brakujący atrybut lang, gdy wklejony zostanie pełny dokument HTML (nie tylko fragment).

Wyróżniającym się elementem jest autentyczne obliczanie kontrastu, a nie powierzchowna heurystyka „wygląda na czytelny”. Dla każdego elementu posiadającego style inline color i background-color narzędzie odczytuje obie wartości, przekształca je w rzeczywiste liczby RGB za pomocą silnika CSS przeglądarki (dzięki czemu hex, rgb(), hsl() i nazwane kolory, takie jak 'tomato', działają identycznie) i oblicza dokładną luminancję względną WCAG dla każdego z nich — L = 0,2126×R + 0,7152×G + 0,0722×B, gdzie każdy kanał jest najpierw korygowany gamma przy użyciu prawdziwej krzywej sRGB — a następnie łączy je w oficjalny wzór na współczynnik kontrastu: (jaśniejsze L + 0,05) / (ciemniejsze L + 0,05). Właściwości font-size i font-weight samego elementu decydują o tym, czy zastosować bardziej rygorystyczne progi dla „normalnego tekstu”, czy bardziej pobłażliwe dla „dużego tekstu” (18pt+ lub 14pt+ pogrubiony), a wynik jest sprawdzany jednocześnie ze wszystkimi czterema rzeczywistymi wartościami WCAG: 4,5:1 i 3:1 dla AA, 7:1 i 4,5:1 dla AAA — nigdy nie jest sprowadzany do pojedynczego, uproszczonego werdyktu dobrze/źle.

Jest to celowo uczciwy, pragmatyczny podzbiór pełnego audytu dostępności, a nie narzędzie certyfikujące: nie ocenia interaktywności opartej na JavaScript, wzorców widżetów ARIA wykraczających poza podstawowe etykietowanie, kolejności fokusa klawiatury ani niczego, co wymaga faktycznego renderowania i uruchomienia strony. Traktuj to jako szybkie pierwsze sprawdzenie, które wyłapuje niektóre z najczęstszych i najbardziej znaczących błędów WCAG — brakujące teksty alternatywne, nieopisane pola, nieprawidłową hierarchię nagłówków, tekst o niskim kontraście i niejasne linki — przed opublikowaniem strony, równolegle z (a nie zamiast) pełnym ręcznym przeglądem lub dedykowanym narzędziem audytorskim dla wszystkiego, co trafia na produkcję.