Inspektor přístupnosti spouští automatizované kontroly WCAG 2.1 úrovně AA na libovolné webové stránce a vytváří kategorizovanou zprávu o problémech přístupnosti. Detekuje nedostatečné poměry kontrastu barev, chybějící alt text obrázků, nesprávné role ARIA a atributy, chybějící popisky formulářů, problémy s navigací klávesnicí a chybějící oblasti orientačních bodů — s jedním kliknutím pro zvýraznění elementu pro každý nalezený problém.
Přístupnost webu není volitelná — je to zákonný požadavek v mnoha jurisdikcích a nezbytná pro 15 % světové populace žijící s postižením. Přesto jsou problémy přístupnosti během normálního vývoje a testování neviditelné. Tlačítko může vypadat správně, ale být zcela nepřístupné pro čtečky obrazovky, protože je to stylizovaný div bez atributu role. Text může být pro vás čitelný, ale nesplňovat požadavky kontrastu pro uživatele se slabým zrakem. Inspektor přístupnosti tato neviditelná problémy automaticky odhaluje. Kontroluje desítky kritérií WCAG 2.1 úrovně AA včetně poměrů kontrastu barev (minimálně 4,5:1 pro normální text, 3:1 pro velký text), chybějícího alt textu obrázků, chybějících popisků vstupů formulářů, nesprávných rolí ARIA a atributů, chybějících orientačních bodů dokumentu (nav, main, footer) a indikátorů fokusu klávesnice. Každý problém zahrnuje postižený element, konkrétní porušené kritérium WCAG a doporučení, jak ho opravit. Kliknutím na libovolný problém zvýrazníte element na stránce.
Spouští automatizované kontroly oproti kritériím úspěchu WCAG 2.1 úrovně AA včetně kategorií vnímatelnosti, ovladatelnosti, srozumitelnosti a robustnosti. Každá kontrola zobrazuje konkrétní kritérium (např. 1.4.3 Kontrast, 1.1.1 Netextový obsah) a stav úspěch/selhání.
Vypočítá poměr kontrastu mezi barvami textu a pozadí pro každý textový element na stránce. Označuje elementy pod 4,5:1 pro normální text nebo 3:1 pro velký text (18 px+ nebo 14 px+ tučný). Zobrazuje skutečný poměr a minimum požadované.
Prohledá každý element img, svg a image role. Označuje chybějící atributy alt, prázdný alt na nedekorativních obrázcích a přílišně obecný alt text (obrázek, foto). Navrhuje, zda každý obrázek potřebuje popisný alt, prázdný alt (dekorativní) nebo role="presentation".
Kontroluje nesprávné použití rolí ARIA (role na špatných elementech), chybějící požadované atributy ARIA (např. aria-label na ikonových tlačítkách), duplicitní ID odkazovaná pomocí aria-labelledby a chybějící oblasti orientačních bodů (bez main, bez nav). Doporučuje sémantické alternativy HTML.
Zajišťuje, aby každý vstup formuláře (text, email, heslo, zaškrtávací políčko, výběr) měl přidružený popisek — buď prostřednictvím elementu label s odpovídajícím for/id, aria-label nebo aria-labelledby. Nepopsané vstupy jsou nepřístupné pro čtečky obrazovky.
Problémy jsou kategorizovány jako Chyby (nutno opravit — bariéry přístupu), Varování (mělo by se opravit — potenciální bariéry) a Úspěchy (potvrzeno přístupné). Počet chyb je výrazně zobrazen. Kliknutím na libovolný problém zvýrazníte postižený element na stránce.
Před spuštěním nové stránky nebo funkce spusťte Inspektor přístupnosti pro zachycení problémů v rané fázi. Chybějící alt text, nepopsaná pole formulářů a porušení kontrastu jsou snadné k opravě během vývoje, ale drahé k zjištění v produkci.
Mnoho jurisdikcí vyžaduje soulad s WCAG 2.1 úrovně AA (ADA v USA, EAA v EU). Spusťte inspektor na veřejně přístupných stránkách pro identifikaci mezer v souladu dříve, než se stanou právními riziky.
Zahrňte kontrolu přístupnosti jako součást procesu QA. Po vizuálním QA a funkčním testování spusťte Inspektor přístupnosti pro ověření, že implementace nezavádí regrese přístupnosti.
Spusťte inspektor na aktuální stránce během týmové schůzky pro zobrazení skutečných problémů přístupnosti. Vizuální zvýrazňování a jasná vysvětlení pomáhají vývojářům pochopit, jak vypadá přístupné označení a proč na tom záleží.
Auditujte stránky, které obsahují widgety třetích stran, vložený obsah nebo HTML generovaný uživateli. Tyto zdroje často zavádějí problémy přístupnosti (chybějící alt text, porušení kontrastu), za které jako vlastník stránky stále odpovídáte.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Inspektoru přístupnosti. Nástroj prohledá DOM stránky pro problémy přístupnosti.
Zobrazí se kategorizovaná zpráva s Chybami (červené), Varováními (žluté) a Úspěchy (zelené). Každá sekce uvádí konkrétní problémy s postiženými elementy a referencemi kritérií WCAG.
Kliknutím na libovolný problém zvýrazníte postižený element na stránce barevným rámečkem a přejdete k němu. Spojení mezi zprávou a elementem DOM je okamžité.
Každý problém zahrnuje konkrétní doporučení: Přidejte alt text popisující obsah obrázku, Zvyšte kontrast barvy písma na nejméně 4,5:1, Přidejte element label s for='email'.
Proveďte změny v kódu, znovu načtěte stránku a znovu spusťte audit. Počet chyb by se měl snižovat s tím, jak jsou problémy řešeny. Cílte na nulové chyby.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
