(ang.) Lighthouse

Lighthouse to darmowe, otwarte narzędzie do automatycznego audytu jakości stron internetowych, rozwijane przez Google. Jest wbudowane w Narzędzia Deweloperskie przeglądarki Chrome (i Edge) oraz dostępne jako rozszerzenie i narzędzie CLI (wiersza poleceń).

Lighthouse generuje kompleksowe raporty w pięciu głównych kategoriach, z których jedna jest dedykowana Dostępności (Accessibility). W kontekście dostępności, Lighthouse wykorzystuje silnik axe-core do automatycznego skanowania strony pod kątem typowych błędów, które mogą stanowić bariery dla użytkowników technologii wspomagających (takich jak czytniki ekranu).

Warto pamiętać, że Lighthouse wykonuje tylko testy automatyczne, które wykrywają około 30-50% wszystkich problemów z dostępnością. Wynik Lighthouse (np. 100/100) oznacza jedynie, że nie wykryto automatycznie sprawdzalnych błędów, ale nie gwarantuje to pełnej zgodności z WCAG.

Gdzie znajduje się Lighthouse?

Aby uruchomić Lighthouse, należy otworzyć stronę w przeglądarce Chrome, uruchomić Narzędzia deweloperskie (F12), przejść do zakładki „Lighthouse”.

Do konkretnie jakich podpunktów WCAG 2.2 na poziomie AA przydaje się to narzędzie w testowaniu?

Lighthouse automatycznie sprawdza reguły z poziomów WCAG, które można zweryfikować algorytmicznie. Poniżej znajdują się przykłady problemów i kryteriów, które Lighthouse efektywnie wykrywa:

Nazwa Kryterium	Co sprawdza Lighthouse?
1.1.1 Treść nietekstowa (Non-text Content)	Brak tekstu alternatywnego (alt) dla obrazów.
1.3.1 Informacje i relacje (Info and Relationships)	Nieprawidłowa hierarchia nagłówków (h1 nie jest pierwszym, pominięcia w kolejności: h2 po h4), brak atrybutów dla elementów list.
1.4.3 Kontrast (minimalny) (Contrast (Minimum))	Niewystarczający kontrast kolorów tekstu (poniżej 4.5:1) względem tła.
2.4.4 Cel linku (w kontekście) (Link Purpose (In Context)) / 4.1.2 Nazwa, rola, wartość (Name, Role, Value)	Elementy interaktywne (linki, przyciski) nie mają nazw dostępnych dla czytników ekranu (np. brak etykiet w formularzach lub aria-label).
2.4.2 Tytuł strony (Page Titled)	Brak tytułu strony w elemencie <title>.
3.1.1 Język strony (Language of Page) (Czytelne)	Brak atrybutu języka (lang) na elemencie <html>.

Jak testować?

Przeprowadzenie audytu dostępności za pomocą Lighthouse jest szybkie i generuje czytelny, łatwy do interpretacji raport:

1. Otwarcie: Przejdź na stronę, którą chcesz przetestować. Otwórz Narzędzia Deweloperskie (F12).
2. Konfiguracja audytu: W zakładce Lighthouse (lub Audits w starszych wersjach):
   • Mode: Wybierz Navigation (domyślny).
   • Device: Wybierz Desktop lub Mobile (audyt mobilny może wpłynąć na wyniki).
   • Categories: Upewnij się, że opcja Accessibility jest zaznaczona. Możesz odznaczyć pozostałe kategorie (Performance, SEO, Best Practices), aby przyspieszyć audyt.
3. Uruchomienie: Kliknij Analyze page load (lub Generate report). Lighthouse przeskanuje stronę.
4. Analiza Raportu: Po kilku sekundach zobaczysz raport z wynikiem od 0 do 100.
   • Wynik: Wyższy wynik (bliżej 100) jest lepszy.
   • Fails (Błędy): Sekcja ta zawiera listę wykrytych problemów. Kliknij na dany błąd, aby zobaczyć, które elementy go dotyczą i uzyskać link „Learn more…” do szczegółowej dokumentacji, wyjaśniającej problem i sugerującej rozwiązanie.
   • Passed Audits (Zaliczono): Sekcja potwierdzająca, które testy automatyczne zostały pomyślnie zaliczone.
   • Additional items to manually check (Elementy do sprawdzenia ręcznie): Lighthouse sugeruje, które kryteria (np. widoczność fokusu, kolejność tabulacji, poprawna struktura nagłówków) należy zweryfikować manualnie, ponieważ narzędzie nie jest w stanie tego zrobić automatycznie.

Lighthouse jest świetnym punktem wyjścia do szybkiego wyłapywania oczywistych błędów technicznych, ale zawsze wymaga uzupełnienia o testy manualne, aby osiągnąć pełną zgodność z WCAG.