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)
3.1.1 Jazyk stránky
Testujeme automaticky
Toto kritérium testujeme plně automaticky.
Co testujeme:
- html-has-lang – Element <html> má atribut lang
- html-lang-valid – Hodnota atributu lang je platný jazyk
- html-xml-lang-mismatch – Atributy lang a xml:lang mají shodnou hodnotu
Oficiální znění
Výchozí lidský jazyk každé webové stránky lze programově určit.
Co to znamená v praxi
HTML musí mít atribut lang na elementu <html>, aby čtečky obrazovky věděly, jakým jazykem číst.
Příklad:
<html lang="cs">Proč je to důležité:
- Čtečky obrazovky používají správnou výslovnost
- Překladače rozpoznají jazyk
- Prohlížeče nabídnou překlad
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 3.1.1 Language of Page
3.1.2 Jazyk částí
Testujeme částečně automaticky
Toto kritérium testujeme částečně automaticky.
Co testujeme automaticky:
- valid-lang – Atributy lang obsahují platné hodnoty
Co vyžaduje manuální kontrolu:
- Zda jsou všechny cizojazyčné pasáže správně označeny
- Identifikaci textu v jiném jazyce než je hlavní jazyk stránky
Oficiální znění
Lidský jazyk každé pasáže nebo fráze v obsahu lze programově určit, s výjimkou vlastních jmen, technických termínů, slov neurčitého jazyka a slov/frází, které se staly součástí nářečí bezprostředně okolního textu.
Co to znamená v praxi
Pokud text obsahuje pasáže v jiném jazyce, označte je atributem lang.
Příklad:
<p>Navštivte naši sekci <span lang="en">Frequently Asked Questions</span>.</p>Kdy neoznačovat:
- Běžně používané cizí výrazy (e-mail, software)
- Vlastní jména
- Technické termíny
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 3.1.2 Language of Parts
3.1.3 Neobvyklá slova
Pouze manuální testování
Toto kritérium úrovně AAA nelze automaticky testovat. Vyžaduje analýzu použité terminologie.
Co kontrolujeme:
- Přítomnost glosáře pro odborné termíny
- Vysvětlení žargonu a idiomů při prvním výskytu
- Definice slov použitých v neobvyklém nebo specifickém významu
Oficiální znění
Je k dispozici mechanismus pro identifikaci specifických definic slov nebo frází používaných neobvyklým nebo omezeným způsobem, včetně idiomů a žargonu.
Co to znamená v praxi
Odborné termíny, žargon a idiomy by měly být vysvětleny.
Řešení:
- Glosář
- Vysvětlení v závorce při prvním použití
- Odkaz na definici
- Element <dfn> nebo <abbr>
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 3.1.3 Unusual Words
3.1.4 Zkratky
Pouze manuální testování
Toto kritérium úrovně AAA nelze automaticky testovat. Vyžaduje kontrolu práce se zkratkami.
Co kontrolujeme:
- Použití elementu <abbr> pro zkratky s atributem title
- Rozepsání zkratky při prvním výskytu v textu
- Přítomnost seznamu zkratek nebo glosáře
Oficiální znění
Je k dispozici mechanismus pro identifikaci rozšířené formy nebo významu zkratek.
Co to znamená v praxi
Zkratky by měly být při prvním použití vysvětleny.
Příklad:
<abbr title="World Wide Web Consortium">W3C</abbr>Alternativy:
- Rozepsání při prvním výskytu: "World Health Organization (WHO)"
- Seznam zkratek
- Tooltip
Poznámka: Toto je kritérium úrovně AAA.
Originální znění
Originální znění W3C: WCAG 2.1 Success Criterion 3.1.4 Abbreviations