2.4.2 Titulek stránky
Testujeme automaticky
Toto kritérium testujeme plně automaticky.
Co testujeme:
- document-title – Stránka má neprázdný element <title>
Poznámka: Automaticky testujeme pouze přítomnost titulku. Kvalitu a smysluplnost titulku je třeba ověřit manuálně.
Oficiální znění
Webové stránky mají titulky, které popisují téma nebo účel.
Co to znamená v praxi
Element <title> musí jasně popisovat obsah stránky. Je to první věc, kterou čtečka obrazovky přečte.
Dobré titulky:
- "Kontakt | Název organizace"
- "Výsledky vyhledávání pro 'klíčové slovo' | Web"
Špatné titulky:
- "Stránka"
- "Document"
- Stejný titulek pro všechny stránky
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.2 Page Titled
2.4.3 Pořadí fokusu
Pouze manuální testování
Toto kritérium nelze automaticky testovat. Vyžaduje ověření logického pořadí fokusu.
Co kontrolujeme:
- Fokus se pohybuje v logickém pořadí (obvykle zleva doprava, shora dolů)
- Modály a vyskakovací okna správně zachytávají fokus
- Po zavření modálu se fokus vrací na původní místo
- Nepoužívá se pozitivní tabindex (kromě 0)
Oficiální znění
Pokud lze webovou stránku sekvenčně procházet a sekvence ovlivňuje význam nebo ovládání, komponenty přijímající fokus jej přijímají v pořadí zachovávajícím význam a ovladatelnost.
Co to znamená v praxi
Pořadí fokusu při procházení Tab klávesou musí být logické a předvídatelné.
Časté problémy:
- Modální okno se otevře, ale fokus zůstane za ním
- Formulářová pole v nelogickém pořadí
- Fokus skáče na neočekávaná místa
Řešení:
Nepoužívejte pozitivní tabindex. Držte logické pořadí v HTML.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.3 Focus Order
2.4.4 Účel odkazu (v kontextu)
Částečně automaticky
Toto kritérium testujeme částečně automaticky.
Co testujeme automaticky:
- link-name – Odkaz má přístupný název
Co vyžaduje manuální kontrolu:
- Text odkazu je srozumitelný (ne "klikněte zde", "více")
- Kontext odkazu (okolní text, nadpis) pomáhá identifikovat účel
- Odkazy na stejné cíle mají konzistentní text
Oficiální znění
Účel každého odkazu lze určit pouze z textu odkazu nebo z textu odkazu společně s jeho programově určitelným kontextem odkazu, s výjimkou případů, kdy by účel odkazu byl pro uživatele obecně nejednoznačný.
Co to znamená v praxi
Text odkazu musí dávat smysl sám o sobě nebo v kontextu věty/odstavce.
Špatně:
- "Klikněte zde"
- "Více"
- "Číst dál"
Správně:
- "Stáhnout výroční zprávu (PDF, 2 MB)"
- "Přečíst článek o přístupnosti"
- "Kontaktovat podporu"
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.4 Link Purpose (In Context)
2.4.5 Více způsobů
Pouze manuální testování
Toto kritérium nelze automaticky testovat. Vyžaduje ověření existence více navigačních mechanismů.
Co kontrolujeme:
- Web nabízí více způsobů navigace: hlavní menu, vyhledávání, mapa stránek, drobečková navigace
- Uživatel si může vybrat preferovaný způsob
Výjimka: Stránky v rámci procesu (např. checkout) nemusí mít alternativní navigaci.
Oficiální znění
Je k dispozici více než jeden způsob, jak najít webovou stránku v rámci sady webových stránek, s výjimkou případů, kdy je stránka výsledkem nebo krokem procesu.
Co to znamená v praxi
Uživatelé by měli mít více možností, jak najít obsah na webu.
Způsoby navigace:
- Hlavní menu
- Vyhledávání
- Mapa webu
- Drobečková navigace
- Související články
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.5 Multiple Ways
2.4.6 Nadpisy a popisky
Pouze manuální testování
Toto kritérium nelze automaticky testovat. Vyžaduje posouzení kvality nadpisů a popisků.
Co kontrolujeme:
- Nadpisy popisují obsah sekce, kterou uvozují
- Popisky formulářových polí jasně identifikují požadovaný vstup
- Nadpisy nejsou používány pouze pro vizuální styling
Poznámka: Přítomnost nadpisů testujeme v 1.3.1, zde kontrolujeme jejich kvalitu.
Oficiální znění
Nadpisy a popisky popisují téma nebo účel.
Co to znamená v praxi
Nadpisy a popisky formulářových polí musí jasně popisovat obsah nebo funkci.
Příklady dobrých nadpisů:
- "Kontaktní údaje" místo "Sekce 1"
- "Otevírací doba" místo "Info"
Příklady dobrých popisků:
- "E-mailová adresa" místo "Zadejte"
- "Datum narození (DD.MM.RRRR)"
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.6 Headings and Labels
2.4.7 Viditelný fokus
Pouze manuální testování
Toto kritérium nelze automaticky testovat. Vyžaduje vizuální kontrolu indikátoru fokusu.
Co kontrolujeme:
- Při procházení klávesnicí je jasně vidět, který prvek má fokus
- Fokus není skryt pomocí CSS (outline: none bez náhrady)
- Indikátor fokusu má dostatečný kontrast
Tip: Projděte celou stránku pomocí klávesy Tab a sledujte viditelnost fokusu.
Oficiální znění
Jakékoli uživatelské rozhraní ovladatelné klávesnicí má režim, ve kterém je indikátor fokusu klávesnice viditelný.
Co to znamená v praxi
Uživatelé klávesnice musí vždy vidět, kde se fokus nachází.
Problémy:
- CSS outline: none bez náhrady
- Fokus splývající s pozadím
Řešení:
- Nikdy neodstraňujte outline bez náhrady
- Použijte :focus-visible pro stylování
- Zajistěte dostatečný kontrast fokusu
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.7 Focus Visible
2.4.8 Umístění
Pouze manuální testování
Toto kritérium úrovně AAA nelze automaticky testovat. Vyžaduje ověření informací o pozici uživatele.
Co kontrolujeme:
- Drobečková navigace (breadcrumbs) zobrazuje cestu k aktuální stránce
- Mapa stránek ukazuje strukturu webu
- Aktivní položka v navigaci je vizuálně označena
Oficiální znění
Informace o umístění uživatele v rámci sady webových stránek jsou k dispozici.
Co to znamená v praxi
Uživatel by měl vědět, kde v rámci webu se nachází.
Způsoby:
- Drobečková navigace (breadcrumbs)
- Zvýrazněná položka v menu
- Mapa webu s označením aktuální pozice
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.8 Location
2.4.9 Účel odkazu (pouze odkaz)
Částečně automaticky
Toto kritérium úrovně AAA testujeme částečně automaticky.
Co testujeme automaticky:
- identical-links-same-purpose – Odkazy se stejným textem vedou na stejný cíl
Co vyžaduje manuální kontrolu:
- Text odkazu samotný identifikuje účel (ne "více", "zde")
- Každý odkaz je srozumitelný i bez kontextu
Oficiální znění
Je k dispozici mechanismus umožňující identifikovat účel každého odkazu pouze z textu odkazu, s výjimkou případů, kdy by účel odkazu byl pro uživatele obecně nejednoznačný.
Co to znamená v praxi
Přísnější verze kritéria 2.4.4 – text odkazu musí být srozumitelný úplně sám o sobě, bez kontextu.
Příklad:
"Více informací o produktu X" místo "Více informací" s kontextem.
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.9 Link Purpose (Link Only)
2.4.10 Nadpisy sekcí
Pouze manuální testování
Toto kritérium úrovně AAA nelze automaticky testovat. Vyžaduje posouzení použití nadpisů sekcí.
Co kontrolujeme:
- Obsah je organizován pomocí nadpisů sekcí
- Nadpisy pomáhají uživatelům pochopit strukturu stránky
- Každá významná sekce má nadpis
Oficiální znění
K organizaci obsahu jsou použity nadpisy sekcí.
Co to znamená v praxi
Obsah by měl být členěn nadpisy pro snadnější navigaci a orientaci.
Výhody:
- Čtečky obrazovky umožňují navigaci po nadpisech
- Lepší orientace pro všechny uživatele
- Jasná struktura dokumentu
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.4.10 Section Headings
2.4.11 Fokus není zakrytý (minimum)
Pouze manuální testování
Toto kritérium z WCAG 2.2 nelze automaticky testovat. Vyžaduje vizuální ověření viditelnosti fokusu.
Co kontrolujeme:
- Prvek s fokusem není zcela zakryt (sticky header, cookie banner, modal)
- Alespoň část prvku je viditelná při fokusu
- Uživatel může posunout zobrazení k prvku s fokusem
Oficiální znění
Když komponenta uživatelského rozhraní přijme fokus klávesnice, komponenta není zcela skryta kvůli obsahu vytvořenému autorem.
Co to znamená v praxi
Prvek s fokusem nesmí být zcela zakrytý jiným obsahem (sticky header, cookie lišta, chat widget).
Časté problémy:
- Sticky navigace zakrývá focusované odkazy
- Cookie consent zakrývá formulářová pole
- Chat bublina překrývá tlačítka
Řešení:
Použijte scroll-padding-top pro kompenzaci sticky elementů.
Originální znění
Originální znění W3C: WCAG 2.2 Success Criterion 2.4.11 Focus Not Obscured (Minimum)
2.4.12 Fokus není zakrytý (vylepšený)
Pouze manuální testování
Toto kritérium úrovně AAA z WCAG 2.2 nelze automaticky testovat. Je přísnější verzí kritéria 2.4.11.
Rozdíl oproti 2.4.11:
- 2.4.11 (AA): Prvek s fokusem není zcela zakryt
- 2.4.12 (AAA): Žádná část prvku s fokusem není zakryta
Co kontrolujeme: Celý prvek s fokusem je vždy plně viditelný.
Oficiální znění
Když komponenta uživatelského rozhraní přijme fokus klávesnice, žádná část komponenty není skryta kvůli obsahu vytvořenému autorem.
Co to znamená v praxi
Přísnější verze kritéria 2.4.11 – ani část prvku nesmí být zakrytá.
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.2 Success Criterion 2.4.12 Focus Not Obscured (Enhanced)
2.4.13 Vzhled fokusu
Pouze manuální testování
Toto kritérium úrovně AAA z WCAG 2.2 nelze automaticky testovat. Stanovuje konkrétní požadavky na vzhled indikátoru fokusu.
Co kontrolujeme:
- Indikátor fokusu má kontrastní poměr minimálně 3:1
- Plocha indikátoru je minimálně 1 CSS pixel silný obrys NEBO oblast 4× nejdelší strana prvku
- Indikátor není menší než 2 CSS pixely
Oficiální znění
Když komponenty uživatelského rozhraní přijmou fokus klávesnice, je fokus indikátor viditelný, má dostatečný kontrast a velikost.
Co to znamená v praxi
Indikátor fokusu musí být jasně viditelný – dostatečně velký a s dobrým kontrastem.
Požadavky:
- Kontrast alespoň 3:1 vůči pozadí
- Minimální plocha nebo obvod
- Nelze skrýt nebo zmenšit
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.2 Success Criterion 2.4.13 Focus Appearance
2.5.1 Gesta kurzorem
Pouze manuální testování
Toto kritérium z WCAG 2.1 nelze automaticky testovat. Vyžaduje analýzu interakčních vzorců na stránce.
Co kontrolujeme:
- Vícebodová gesta (pinch, multi-finger swipe) mají alternativu s jediným bodem
- Dráhová gesta (swipe, drag) mají alternativu bez nutnosti sledovat dráhu
- Funkce vyžadující složitá gesta jsou dostupné i jednodušším způsobem
Oficiální znění
Veškerou funkcionalitu, která pro ovládání používá vícebodová nebo na trajektorii založená gesta, lze ovládat jedním kurzorem bez gesta založeného na trajektorii, pokud není vícebodové nebo na trajektorii založené gesto nezbytné.
Co to znamená v praxi
Gesta jako pinch-to-zoom, swipe nebo kreslení musí mít alternativu pro jeden prst/klik.
Příklady:
- Karusel ovládaný swipe – přidejte šipky
- Mapa s pinch-to-zoom – přidejte +/- tlačítka
- Slider – umožněte kliknutí na pozici
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.1 Pointer Gestures
2.5.2 Zrušení akce kurzorem
Pouze manuální testování
Toto kritérium z WCAG 2.1 nelze automaticky testovat. Vyžaduje testování chování interaktivních prvků.
Co kontrolujeme:
- Akce se provádí při uvolnění tlačítka myši (up event), ne při stisku (down event)
- Uživatel může zrušit akci přesunutím kurzoru mimo prvek před uvolněním
- U akcí prováděných při stisku existuje možnost vrácení zpět
Oficiální znění
Pro funkcionalitu ovládanou jedním kurzorem platí alespoň jedno: žádná down-událost, zrušení nebo vrácení, up vrací.
Co to znamená v praxi
Akce by se neměla spustit při stisknutí tlačítka myši (mousedown), ale až při uvolnění (mouseup). To umožňuje zrušit akci přetažením pryč.
Důležité pro:
- Uživatele s třesem rukou
- Uživatele dotykových obrazovek
- Prevenci nechtěných kliknutí
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.2 Pointer Cancellation
2.5.3 Popisek v názvu
Pouze manuální testování
Toto kritérium z WCAG 2.1 nelze automaticky testovat. Vyžaduje porovnání vizuálního popisku s přístupným názvem.
Co kontrolujeme:
- Přístupný název (aria-label, aria-labelledby) obsahuje vizuální text popisku
- Vizuální popisek je na začátku přístupného názvu
- Uživatelé hlasového ovládání mohou aktivovat prvek vyslovením viditelného textu
Oficiální znění
Pro komponenty uživatelského rozhraní s popisky obsahujícími text nebo obrázky textu obsahuje přístupný název vizuálně zobrazený text.
Co to znamená v praxi
Pokud tlačítko vizuálně zobrazuje "Odeslat", jeho přístupný název musí obsahovat "Odeslat" (ne jen "Submit" nebo jinou variantu).
Proč:
- Uživatelé hlasového ovládání říkají to, co vidí
- "Klikni na Odeslat" musí fungovat
Řešení:
Aria-label musí obsahovat viditelný text.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.3 Label in Name
2.5.4 Aktivace pohybem
Pouze manuální testování
Toto kritérium z WCAG 2.1 nelze automaticky testovat. Vyžaduje identifikaci funkcí ovládaných pohybem zařízení.
Co kontrolujeme:
- Funkce aktivované nakloněním nebo zatřesením zařízení mají alternativní ovládání
- Existuje možnost vypnout reakci na pohyb (pro uživatele s třesem rukou)
- Alternativní ovládání je dostupné přes standardní UI prvky
Oficiální znění
Funkcionalitu ovládanou pohybem zařízení nebo pohybem uživatele lze ovládat také komponentami uživatelského rozhraní a reakci na pohyb lze vypnout, aby se předešlo náhodné aktivaci, s výjimkou případů, kdy pohyb je nezbytný nebo by vypnutí reakce na pohyb zneplatnilo činnost.
Co to znamená v praxi
Funkce ovládané pohybem telefonu (zatřesení, náklon) musí mít alternativní ovládání.
Příklady:
- Shake-to-undo – přidejte tlačítko Zpět
- Náklon pro scrollování – přidejte šipky
Důležité:
Možnost vypnout pro uživatele s nechtěnými pohyby.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.4 Motion Actuation
2.5.5 Velikost cíle (vylepšený)
Pouze manuální testování
Toto kritérium úrovně AAA z WCAG 2.1 nelze automaticky testovat. Vyžaduje měření velikosti interaktivních prvků.
Co kontrolujeme:
- Všechny interaktivní prvky mají velikost alespoň 44 × 44 CSS pixelů
- Výjimky: odkazy v textu, prvky s nativním UI, velikost určená user agentem
- Dostatečné rozestupy mezi malými prvky
Oficiální znění
Velikost cíle pro vstup kurzorem je alespoň 44 × 44 CSS pixelů, s výjimkou případů, kdy je k dispozici ekvivalentní odkaz/ovládací prvek, je v textu, velikost je určena user agentem, nebo je specifická prezentace nezbytná.
Co to znamená v praxi
Interaktivní prvky by měly být dostatečně velké pro snadné kliknutí/tapnutí.
Požadavek:
Minimálně 44×44 CSS pixelů.
Výjimky:
- Odkazy v textu
- Nativní ovládací prvky prohlížeče
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.5 Target Size (Enhanced)
2.5.6 Souběžné vstupní mechanismy
Pouze manuální testování
Toto kritérium úrovně AAA z WCAG 2.1 nelze automaticky testovat. Vyžaduje testování s různými vstupními zařízeními.
Co kontrolujeme:
- Web neblokuje přepínání mezi vstupními modalitami (myš, klávesnice, dotyk)
- Uživatel může kdykoli změnit vstupní zařízení bez ztráty funkcionality
- Není vynuceno použití konkrétního vstupního zařízení
Oficiální znění
Webový obsah neomezuje použití vstupních modalit dostupných na platformě, s výjimkou případů, kdy je omezení nezbytné, vyžadované pro zabezpečení, nebo vyžadované pro respektování uživatelských nastavení.
Co to znamená v praxi
Uživatelé by měli moci používat jakýkoli vstup – klávesnici, myš, dotyk, pero – podle jejich preferencí.
Neomezujte:
- Přepínání mezi klávesnicí a myší
- Použití stylusu na tabletu
- Alternativní vstupní zařízení
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 2.5.6 Concurrent Input Mechanisms
2.5.7 Pohyby tažení
Pouze manuální testování
Toto kritérium z WCAG 2.2 nelze automaticky testovat. Vyžaduje identifikaci funkcí využívajících tažení.
Co kontrolujeme:
- Funkce drag-and-drop mají alternativu s jediným kliknutím
- Posuvníky a slidery lze ovládat i bez tažení (např. tlačítky +/-)
- Přeuspořádání položek seznamu je možné i bez tažení
Oficiální znění
Veškerou funkcionalitu využívající tažení lze dosáhnout pomocí jednobodového kurzoru bez tažení, pokud není tažení nezbytné nebo funkcionalita je určena user agentem a není modifikována autorem.
Co to znamená v praxi
Funkce vyžadující drag-and-drop musí mít alternativu bez tažení.
Příklady:
- Řazení seznamu tažením – přidejte šipky nahoru/dolů
- Slider – umožněte kliknutí na pozici nebo zadání hodnoty
- Přesun souborů – nabídněte tlačítko "Přesunout do..."
Originální znění
Originální znění W3C: WCAG 2.2 Success Criterion 2.5.7 Dragging Movements
2.5.8 Velikost cíle (minimum)
Testujeme částečně automaticky
Toto kritérium z WCAG 2.2 testujeme částečně automaticky.
Co testujeme automaticky:
- target-size – Interaktivní prvky mají minimální velikost 24 × 24 px
Co vyžaduje manuální kontrolu:
- Výjimky: odkazy v textu, nativní prvky, ekvivalentní prvek na stránce
- Dostatečné rozestupy u menších prvků (24px včetně spacing)
Oficiální znění
Velikost cíle pro vstup kurzorem je alespoň 24 × 24 CSS pixelů, s výjimkami pro mezery, ekvivalentní prvky, inline prvky, user agent a nezbytnou prezentaci.
Co to znamená v praxi
Minimální velikost interaktivních prvků pro snadnější ovládání.
Požadavek:
Minimálně 24×24 CSS pixelů, nebo dostatečná mezera mezi prvky.
Výjimky:
- Prvky s dostatečným odsazením od sousedů
- Existuje větší alternativa
- Inline odkazy v textu
Originální znění
Originální znění W3C: WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum)