Narzędzie deweloperskie (ang.) Developer Tools
Narzędzia Deweloperskie (DevTools) to wbudowany zestaw narzędzi diagnostycznych i inspekcyjnych dostępny w każdej nowoczesnej przeglądarce internetowej (Chrome, Firefox, Edge, Safari). Stanowią one niezbędne, fundamentalne narzędzie do manualnego testowania dostępności, ponieważ pozwalają testerom i deweloperom zagłębić się w kod strony (HTML, CSS, JavaScript) oraz zbadać, jak technologia asystująca widzi zawartość.
DevTools nie jest automatycznym walidatorem, lecz zaawansowanym narzędziem diagnostycznym. Umożliwia weryfikację struktury kodu, badanie ścieżek dostępu (Accessibility Tree) oraz symulowanie różnych stanów elementów (np. fokus, najazd myszy).
Skąd pobrać?
Narzędzia deweloperskie są preinstalowane w każdej głównej przeglądarce internetowej i nie wymagają pobierania ani instalowania dodatkowych wtyczek.
| Przeglądarka | Metoda dostępu |
|---|---|
| Chrome, Edge, Firefox, Safari | Naciśnięcie klawisza F12 lub Ctrl + Shift + I (Windows) / Cmd + Option + I (macOS). |
Do konkretnie jakich podpunktów WCAG 2.2 na poziomie AA przydaje się to narzędzie w testowaniu?
DevTools są kluczowe do weryfikacji kryteriów, które wymagają inspekcji kodu w czasie rzeczywistym, symulacji stanów lub bezpośredniej weryfikacji Drzewa Dostępności (Accessibility Tree):
| Nazwa Kryterium | Jak pomaga DevTools? |
|---|---|
| 1.3.1 Informacje i relacje (Info and Relationships) / 4.1.2 Nazwa, rola, wartość (Name, Role, Value) | Panel Dostępności (Accessibility Panel): Bezpośredni podgląd Accessible Name (nazwy dostępnej), Role (roli) i State (stanu) elementu. Inspekcja Drzewa Dostępności w celu weryfikacji poprawnej struktury. |
| 1.4.3 Kontrast (minimalny) (Contrast (Minimum)) | Panel Stylów (Styles Panel): Wbudowany Kontroler Koloru (Color Picker) w DevTools wyświetla współczynnik kontrastu dla tekstu względem tła w czasie rzeczywistym. |
| 1.4.11 Kontrast elementów nietekstowych (Non-text Contrast) | Panel Stylów: Kontrola kontrastu (3:1) dla obramowań, ikon, i innych graficznych komponentów interfejsu. |
| 2.4.7 Widoczny Fokus (Focus Visible) / 2.4.11 Fokus niezasłonięty (minimum) (Focus Not Obscured (Minimum)) | Panel Elementów (Elements Panel): Umożliwia wymuszenie stanu :focus na dowolnym elemencie, by sprawdzić widoczność wskaźnika fokusu i upewnić się, że nie jest on zasłonięty przez inne elementy (np. przez sticky header/footer). |
| 2.1.1 Klawiatura (Keyboard) | Panel Elementów: Analiza atrybutu tabindex i innych atrybutów CSS, które mogą zakłócać kolejność tabulacji, oraz testowanie zablokowanych skrótów klawiaturowych. |
Jak testować?
Testowanie za pomocą DevTools wymaga manualnego podejścia i przełączania się między różnymi panelami:
- Otwarcie: Naciśnij F12, aby otworzyć DevTools.
- Inspekcja elementu: Użyj ikony pipety (wyboru elementu – zazwyczaj Ctrl+Shift+C) lub przejdź do panelu Elements, aby zlokalizować element, który chcesz sprawdzić.
- Weryfikacja Nazwy/Roli (Kryterium 4.1.2):
- W panelu Elements (lub Inspector), kliknij zakładkę Accessibility.
- Sprawdź, czy pole „Accessible Name” jest poprawne i czy pole „Role” jest logiczne (np. przycisk ma rolę „button”).
- Weryfikacja Kontrastu (Kryterium 1.4.3/1.4.11):
- W panelu Styles, znajdź definicję koloru tekstu lub tła.
- Kliknij na próbnik koloru. Otworzy się narzędzie, które wyświetli stosunek kontrastu i wskaże, czy zalicza on poziom AA (4.5:1).
- Symulacja Fokusu (Kryterium 2.4.7/2.4.11):
- W panelu Elements, kliknij prawym przyciskiem myszy na element interaktywny.
- Wybierz opcję „Force State” (Wymuś Stan) i zaznacz
:focus. - Sprawdź wizualnie, czy wskaźnik fokusu jest wyraźny i czy żaden element go nie zasłania.
- Wyłączenie CSS: Możesz tymczasowo wyłączyć style CSS strony, aby zweryfikować kolejność odczytu (Kryterium 1.3.2 – Meaningful Sequence).
Wskazówka: DevTools to narzędzie diagnostyczne, które pomaga zrozumieć dlaczego automatyczne narzędzia (jak WAVE) lub czytniki ekranu zgłaszają błąd. Jest kluczowe w procesie naprawy.