Inspektor dostępności uruchamia automatyczne kontrole WCAG 2.1 Level AA na dowolnej stronie i produkuje skategoryzowany raport problemów z dostępnością. Wykryj niewystarczające współczynniki kontrastu kolorów, brakujący alt text obrazów, niewłaściwe role i atrybuty ARIA, brakujące etykiety formularzy, problemy z nawigacją klawiaturą i brakujące regiony punktów orientacyjnych — z jednym kliknięciem podświetlania elementu dla każdego znalezionego problemu.
Dostępność webowa nie jest opcjonalna — to wymóg prawny w wielu jurysdykcjach i niezbędny dla 15% światowej populacji żyjącej z niepełnosprawnościami. Jednak problemy z dostępnością są niewidoczne podczas normalnego developmentu i testowania. Przycisk może wyglądać dobrze, ale być całkowicie niedostępny dla czytników ekranu, ponieważ jest stylizowanym divem bez atrybutu role. Tekst może być czytelny dla ciebie, ale nie spełniać wymagań kontrastu dla użytkowników ze słabym wzrokiem. Inspektor dostępności ujawnia te niewidoczne problemy automatycznie. Sprawdza dziesiątki kryteriów WCAG 2.1 Level AA, w tym współczynniki kontrastu kolorów (minimum 4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu), brakujący alt text na obrazach, brakujące etykiety na polach formularzy, niewłaściwe role i atrybuty ARIA, brakujące punkty orientacyjne dokumentu (nav, main, footer) i wskaźniki fokusu klawiatury. Każdy problem zawiera dotknięty element, konkretne naruszone kryterium WCAG i rekomendację naprawy. Kliknij dowolny problem, aby podświetlić element na stronie.
Uruchamia automatyczne kontrole względem kryteriów sukcesu WCAG 2.1 Level AA, w tym kategorii postrzegalności, operatywności, zrozumiałości i solidności. Każda kontrola pokazuje konkretne kryterium (np. 1.4.3 Kontrast, 1.1.1 Zawartość nietekstowa) i status pass/fail.
Oblicza współczynnik kontrastu między kolorami tekstu i tła dla każdego elementu tekstowego na stronie. Oznacza elementy poniżej 4,5:1 dla zwykłego tekstu lub 3:1 dla dużego tekstu (18px+ lub 14px+ pogrubiony). Pokazuje rzeczywisty współczynnik i minimalny wymagany.
Skanuje każdy element img, svg i z rolą image. Oznacza brakujące atrybuty alt, pusty alt na niedekoracyjnych obrazach i zbyt ogólny alt text ("image", "photo"). Sugeruje, czy każdy obraz potrzebuje opisowego alt, pustego alt (dekoracyjny) czy role="presentation".
Sprawdza niewłaściwe użycie ról ARIA (role na niewłaściwych elementach), brakujące wymagane atrybuty ARIA (np. aria-label na przyciskach z ikoną), zduplikowane ID odwoływane przez aria-labelledby i brakujące regiony punktów orientacyjnych (brak main, brak nav). Rekomenduje alternatywy semantycznego HTML.
Zapewnia, że każde pole formularza (tekst, email, hasło, checkbox, select) ma powiązaną etykietę — albo przez element label z pasującym for/id, aria-label lub aria-labelledby. Pola bez etykiet są niedostępne dla czytników ekranu.
Problemy są kategoryzowane jako Błędy (muszą być naprawione — bariery dostępu), Ostrzeżenia (powinny być naprawione — potencjalne bariery) i Zaliczenia (potwierdzona dostępność). Liczba błędów jest wyraźnie wyświetlana. Kliknij dowolny problem, aby podświetlić dotknięty element na stronie.
Przed uruchomieniem nowej strony lub funkcji uruchom Inspektor dostępności, aby wcześnie wychwycić problemy. Brakujący alt text, pola formularzy bez etykiet i naruszenia kontrastu są łatwe do naprawy podczas developmentu, ale kosztowne do odkrycia na produkcji.
Wiele jurysdykcji wymaga zgodności z WCAG 2.1 Level AA (ADA w USA, EAA w UE). Uruchom inspektor na swoich publicznych stronach, aby zidentyfikować luki w zgodności, zanim staną się ryzykiem prawnym.
Włącz sprawdzanie dostępności jako część procesu QA. Po wizualnym QA i testach funkcjonalnych uruchom Inspektor dostępności, aby zweryfikować, że implementacja nie wprowadza regresji dostępności.
Uruchom inspektor na swojej bieżącej stronie podczas spotkania zespołu, aby pokazać rzeczywiste problemy z dostępnością. Wizualne podświetlanie i jasne wyjaśnienia pomagają programistom zrozumieć, jak wygląda dostępny znacznik i dlaczego ma znaczenie.
Audytuj strony, które zawierają widżety zewnętrzne, osadzoną zawartość lub HTML generowany przez użytkowników. Te źródła często wprowadzają problemy z dostępnością (brakujący alt text, naruszenia kontrastu), za które nadal jesteś odpowiedzialny jako właściciel strony.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Inspektora dostępności. Narzędzie skanuje DOM strony w poszukiwaniu problemów z dostępnością.
Pojawia się skategoryzowany raport z Błędami (czerwony), Ostrzeżeniami (żółty) i Zaliczeniami (zielony). Każda sekcja wymienia konkretne problemy z dotkniętymi elementami i odniesieniami do kryteriów WCAG.
Kliknij dowolny problem, aby podświetlić dotknięty element na stronie kolorową ramką i przewinąć do niego. Połączenie między raportem a elementem DOM jest natychmiastowe.
Każdy problem zawiera konkretną rekomendację: "Dodaj alt text opisujący zawartość obrazu", "Zwiększ kontrast koloru czcionki do co najmniej 4,5:1", "Dodaj element label z for='email'".
Dokonaj zmian w swoim kodzie, załaduj ponownie stronę i uruchom audyt ponownie. Liczba błędów powinna się zmniejszyć w miarę rozwiązywania problemów. Dąż do zera błędów.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
