Nástroj zdarma: Přístupnost

Test přístupnosti webu

Zadejte adresu a my tuto stránku spolu s až čtyřmi dalšími klíčovými stránkami otestujeme ve skutečném prohlížeči podle pravidel WCAG 2.2 úrovně A a AA. U každé bariéry uvidíte prvek, stránku, snímek obrazovky a vysvětlení, koho se týká.

Zdarma. Otestuje až pět klíčových stránek zhruba za minutu.

Co tento nástroj kontroluje

  • Pět stránek, které reprezentují váš web

    Stránka, kterou zadáte, a až čtyři další vybrané z jejích odkazů podle typu webu. U e-shopu to znamená kolekci, produkt, košík a obsahovou stránku; jinde stránky jako ceník, kontakt, článek nebo služby. Šablony se opakují, takže jedna produktová stránka obvykle ukáže problémy všech ostatních.

  • Pravidla WCAG na vykreslené stránce

    Každá stránka se načte v prohlížeči Chromium v rozlišení 1366 × 900 a axe-core, open-source knihovna pravidel od společnosti Deque, spustí svá pravidla WCAG 2.0, 2.1 a 2.2 úrovně A a AA až poté, co doběhnou skripty stránky. Zachytí tak i problémy, které šablona nebo aplikace vytvoří teprve tehdy, když se stránka sestaví v prohlížeči.

  • Dopad a kritéria úspěšnosti

    U každého nesplněného pravidla vidíte jeho dopad, tedy kritický (critical), závažný (serious), střední (moderate) nebo drobný (minor), kritéria úspěšnosti WCAG, ke kterým se vztahuje, a kolika prvků a stránek se týká.

  • Nevyhovující prvek, zvýrazněný

    HTML kód ukázkového prvku a snímek obrazovky stránky, na kterém je tento prvek orámovaný, abyste ho vy nebo váš vývojář našli v šabloně bez hádání.

  • Položky, o kterých musí rozhodnout člověk

    Když axe-core najde něco, o čem nedokáže rozhodnout, například text přes obrázek na pozadí, jehož kontrast nedokáže změřit, zobrazí se položka jako „Ke kontrole“. Nikdy se nezapočítává jako chyba.

  • Test klávesnicí

    Na první stránce 40krát stiskneme Tab a zaznamenáme, kam se přesouvá fokus: zda se vůbec pohne, zda neuvízne ve smyčce (často uvnitř cookie lišty), zda je první zastávkou odkaz pro přeskočení obsahu (skip link) a které fokusované prvky nemají viditelný indikátor fokusu. Poslední kontrola je heuristická, proto se zobrazuje jako „Ke kontrole“.

Co zkontrolovat nedokáže

  • Slyšet, co oznamuje čtečka obrazovky. Software může ověřit, že tlačítko má název, ne však to, že název dává smysl, když se přečte nahlas.
  • Posoudit titulky, přepisy nebo audiopopis u videa a zvukových nahrávek.
  • Posoudit kognitivní a obsahová kritéria, například zda jsou pokyny srozumitelné nebo zda chybové zprávy pomáhají lidem chybu napravit.
  • Testovat stránky za přihlášením, heslem nebo ochranou proti botům ani projít dokončením objednávky.
  • Říct vám, zda váš web vyhovuje WCAG nebo splňuje jakýkoli zákon. Automatická pravidla najdou část problémů; zbytek musí posoudit lidé.

Proč na tom záleží

Bariéry přístupnosti bývají drobné chyby v šablonách s velkými následky. Tlačítko košíku jen s ikonou a bez přístupného názvu čtečka oznámí pouze jako „tlačítko“, takže uživatel čtečky obrazovky nepozná, co dělá. Šedý text na bílém pozadí, který nedosahuje kontrastního poměru 4,5:1, se špatně čte mnoha lidem se slabým zrakem i komukoli, kdo používá telefon na ostrém slunci.

Protože se stejná hlavička, produktová karta a patička objevují na každé stránce, jedna oprava v šabloně může odstranit stovky chyb najednou. Proto jsou výsledky seskupené podle pravidel s počty prvků a stránek, místo aby se každý výskyt uváděl jako samostatný problém.

Přístupnost má v mnoha zemích i právní stránku. Sken vám neřekne, zda se na vás nějaký zákon vztahuje ani zda ho splňujete. Dá vám ale datovaný seznam skutečných bariér na vašich vlastních stránkách, a to je v každém případě praktické místo, kde začít.

Jak číst výsledky

Kritické
Bariéra může některým lidem úplně znemožnit použití prvku, například pole formuláře bez popisku nebo tlačítko bez názvu. Opravte je jako první.
Závažné
Bariéra některým lidem výrazně ztěžuje úkol, například běžný text, který nesplňuje kontrastní poměr.
Střední
Bariéra způsobuje potíže nebo zmatek, ale lidé ji obvykle dokážou obejít.
Drobné
Malý problém nebo nepříjemnost. Přesto stojí za opravu, až budete tuto šablonu příště upravovat.
Kritéria úspěšnosti WCAG
Čísla u pravidla, například 1.1.1 nebo 1.4.3, jsou kritéria, která pravidlo testuje. Pravidlo bez uvedeného kritéria je osvědčený postup (best practice), nikoli požadavek WCAG.
Prvky a stránky
Kolik prvků pravidlo nesplnilo a na kolika z testovaných stránek. Pravidlo, které selže na každé stránce, obvykle sídlí ve sdílené části, jako je hlavička, menu nebo patička.
Ke kontrole
axe-core našel něco, o čem nedokázal rozhodnout. Prohlédněte si prvek sami: může vyhovět, nebo nevyhovět. Tyto položky se nezapočítávají jako chyby.
Past na fokus
Klávesa Tab stále dokola procházela stejnými několika prvky. Pokud patří k cookie liště, uživatelé klávesnice se možná nedostanou ke zbytku stránky.
Fokus se neposouvá (Focus doesn’t move)
Stisknutí klávesy Tab nikdy nic nezaměřilo. Odkazy a tlačítka mohou být vytvořené z prvků div nebo span, nebo klávesu zachytává skript.
Odkaz pro přeskočení
Zda je první zastávkou klávesy Tab odkaz typu „Přejít na obsah“. Bez něj musí uživatelé klávesnice na každé stránce procházet celou hlavičku. Kritérium WCAG 2.4.1 Bypass Blocks mohou splnit i orientační oblasti (landmarks) a nadpisy.
Žádný viditelný indikátor fokusu
Fokusované prvky, u kterých jsme neviděli obrys (outline), stín (box-shadow) ani podtržení. Jiný styl, například změna barvy, může být přesto viditelný, proto tyto prvky sami projděte klávesou Tab a ověřte to.

Jak opravit nejčastější problémy

  • Text, který nesplňuje kontrastní poměr

    Běžný text potřebuje vůči pozadí alespoň 4,5:1 a velký text (asi 24 px nebo asi 18,7 px tučně) 3:1. Barvu změňte v nastavení šablony nebo v design tokenech, ne prvek po prvku, a pak znovu zkontrolujte zástupný text (placeholder), stavy při najetí myší a text přes obrázky.

  • Obrázky bez alternativního textu

    Každému obrázku, který nese význam, dejte atribut alt, který říká, co zobrazuje nebo co dělá, například název produktu a barvu. Dekorativní obrázky dostanou prázdný alt (alt=""), aby je čtečky obrazovky přeskočily. V Shopify přidáte alternativní text přímo u obrázku v sekci Media daného produktu; ve WordPressu v poli Alternativní text v knihovně médií.

  • Pole formuláře bez popisků

    Ke každému vstupnímu poli připojte popisek pomocí <label for>, jehož hodnota odpovídá id pole, nebo použijte aria-label, když chybí viditelný text. Nespoléhejte na zástupný text (placeholder) jako jediný popisek: zmizí, jakmile člověk začne psát. Obvyklými viníky jsou formuláře pro odběr newsletteru a vyhledávací pole v hlavičce.

  • Tlačítka a odkazy bez přístupného názvu

    Ikonové ovládací prvky pro košík, vyhledávání, menu nebo sociální profily často obsahují jen SVG. Přidejte viditelný text nebo aria-label, který říká, co prvek dělá („Otevřít košík“, ne „ikona“), a samotnému SVG přidejte aria-hidden="true".

  • Cookie lišta, která zachytí fokus

    Zajistěte, aby se ke každému tlačítku lišty dalo dostat klávesou Tab a aktivovat ho klávesou Enter nebo mezerníkem, aby zavření lišty vrátilo fokus na stránku a aby lišta, která stránku neblokuje, fokus vůbec nedržela. Zkontrolujte nastavení svého nástroje pro správu souhlasů a aktualizujte ho, pokud je skript starý.

  • Obrysy fokusu odstraněné v CSS

    Vyhledejte ve stylech outline: none nebo outline: 0 u odkazů, tlačítek a :focus. Nahraďte je viditelným stylem, například :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Otázky k tomuto nástroji

Je tento test přístupnosti webu zdarma?

Ano. Nemusíte se registrovat; jen potvrdíte, že web vlastníte nebo spravujete. Placený Report oprav přístupnosti přidá až 20 dalších stránek z vaší sitemapy, průchod pouze klávesnicí, kontrolu přeformátování (reflow) při šířce 320 px, ukázky kódu před opravou a po ní sestavené z vašeho nevyhovujícího HTML, AI prompty, PDF a 5 opakovaných testů.

Jakou část WCAG dokáže automatický test ověřit?

Jen část. Pravidlo může ověřit, že obrázek má alternativní text, ale ne že text obrázek popisuje, a že pole má popisek, ale ne že je popisek srozumitelný. Berte výsledky jako seznam jednoznačných problémů a zbytek otestujte klávesnicí a čtečkou obrazovky.

Když sken nic nenajde, splňuje můj web ADA nebo WCAG?

Ne. Žádný automatický test nedokáže prokázat, že web vyhovuje WCAG nebo splňuje ADA, Evropský akt o přístupnosti (European Accessibility Act) či jakýkoli jiný zákon. Čistý výsledek znamená, že automatická pravidla na testovaných stránkách nenašla žádné chyby.

Mohu zkontrolovat testovací web (staging) nebo stránky za přihlášením?

Stránky za přihlášením, heslem nebo ochranou proti botům otestovat nelze. Pokud vaše ochrana proti botům sken blokuje, povolte user agent FixReportsScanner nebo otestujte veřejnou testovací kopii webu.

Problém je opravený. Proč výsledek vypadá stejně?

Výsledky pro stejnou adresu se mohou převzít ze skenu provedeného během poslední hodiny. Počkejte, až tato hodina uplyne, a před dalším testem vymažte případnou mezipaměť stránek nebo CDN.

Zdroje

Související nástroje

Report oprav přístupnosti ($174, jednorázově) vychází z úplného bezplatného skenu a přidává další stránky, změnu ke každému zjištění, PDF a opakované testy k ověření vašich oprav.

Co obsahuje Report oprav přístupnosti