Používejte nativní ovládací prvky, zachovejte logické pořadí v DOM, ponechte výrazný viditelný focus a při otevření či zavření vrstvy jej přesouvejte předvídatelně.
Web ovládaný klávesnicí potřebují lidé, kteří nepoužívají myš, pracují se čtečkou obrazovky, hlasovým vstupem nebo si jednoduše zvolili rychlejší způsob. Funkce není přístupná jen proto, že se na prvky dá dostat tabulátorem. Pořadí, viditelný focus a chování dynamických komponent musí odpovídat tomu, co člověk vidí a očekává.
Nejčastější problémy vznikají u vlastních tlačítek, přesouvání prvků pomocí CSS, modálních oken a skriptů, které focus odstraní nebo uvězní. Řešením je začít nativním HTML, definovat model ovládání klávesnicí pro každou komponentu a testovat celou úlohu. ARIA může význam doplnit, ale nevytvoří chybějící chování.
Nativní prvek poskytuje očekávané chování bez zkratek
Odkaz používejte pro navigaci a tlačítko pro akci. Oba prvky jsou fokusovatelné, mají roli a reagují na očekávané klávesy. Klikatelný div tyto vlastnosti nemá a ruční doplnění tabindexu nevyřeší celé chování. Vlastní komponenta potřebuje název, roli, stav, hodnotu a obsluhu klávesnice podle vhodného vzoru.
Nepřidávejte kladné hodnoty tabindexu, které vytvoří samostatné umělé pořadí. Běžný prvek ať následuje DOM a programově fokusovatelný kontejner může podle potřeby použít zápornou hodnotu. Zakázaný prvek a prvek dočasně nedostupný potřebují srozumitelné vysvětlení, nikoli pouhé odstranění ze sekvence bez kontextu.
Pořadí focusu má sledovat význam a vizuální tok
Uspořádejte DOM podle přirozeného pořadí čtení a ovládání. Vizuální přesunutí pomocí gridu nebo flexu nesmí vytvořit rozpor, při kterém focus skáče po obrazovce. Opakované bloky mohou mít přeskakovací odkaz na hlavní obsah. Po jeho aktivaci musí být cíl správně označen a focus nebo pozice srozumitelně změněny.
Skryté menu, neaktivní panel carouselu a zavřený dialog nesmí obsahovat prvky v pořadí procházení klávesou Tab. Naopak vizuálně dostupný ovládací prvek nesmí být nedosažitelný. Při přidávání obsahu zachovejte pozici uživatele, pokud úloha nevyžaduje přesun na novou zprávu nebo na začátek kroku.
- Pořadí v DOM odpovídá čtení stránky
- žádné kladné hodnoty tabindexu
- skryté prvky nelze zaměřit
- odkaz pro přeskočení funguje i vizuálně
Viditelný focus musí být jasný v každém stavu a motivu
Neodstraňujte výchozí outline bez rovnocenné nebo lepší náhrady. Indikátor má být viditelný na světlém, tmavém i barevném pozadí a nesmí ho zakrýt sticky hlavička. Samotná barva může selhat; kombinujte kontrast, obrys, tloušťku nebo odsazení podle aktuálních kritérií přístupnosti.
Rozlišujte stavy focus, hover, active, selected a error. Uživatel klávesnice potřebuje vědět, který prvek právě ovládá, nikoli jen který je zvolený. Styl testujte na všech komponentách designového systému včetně odkazů v textu, tlačítek s ikonou, formulářů, záložek a prvků v překryvné vrstvě.
Modální okna a dynamické změny potřebují řízený přesun focusu
Po otevření modálního dialogu přesuňte focus na jeho nadpis, úvod nebo první vhodný ovládací prvek podle úlohy. Focus má zůstat v dialogu, dokud je modalita aktivní, a klávesa Escape ho má zavřít, pokud neexistuje vážný důvod jinak. Pozadí nesmí být ovladatelné ani oznamované jako součást dialogu.
Po zavření vraťte focus na prvek, který dialog otevřel, nebo na logickou náhradu, pokud byl odstraněn. Při klientském routingu oznamte nový nadpis a umístěte focus podle konzistentního modelu. Toast nebo živá zpráva nemají bez důvodu krást focus; stačí je vhodně oznámit.
- focus po otevření na srozumitelném místě
- žádný únik do neaktivního pozadí
- Escape a viditelné tlačítko zavření
- návrat na původní nebo logický prvek
- kontrola pořadí vpřed i zpět
- žádný focus pod pevnou hlavičkou
- nativní klávesy podle typu komponenty
- regresní test po dynamické změně DOM
Manuální test prochází celou úlohou v obou směrech
Odložte myš a pomocí kláves Tab, Shift+Tab, Enter, Space, šipek a Escape projděte navigaci, formulář, dialog, carousel i vlastní widgety. Správné klávesy závisí na typu komponenty. Kontrolujte, zda se ke každému prvku dostanete, rozumíte jeho stavu, dokážete jej aktivovat a bezpečně jej opustit.
Test zopakujte se zvětšením, se čtečkou obrazovky a ve více prohlížečích. Automatický nástroj může najít chybějící název nebo kladný tabindex, ale neodhalí nelogický přesun ani past v komplexní úloze. Regresní test přidejte do designového systému i ke kritickým uživatelským cestám.
Časté dotazy
Můžeme odstranit outline, pokud se designově nehodí?
Pouze pokud ho nahradíte jasným, konzistentním a dostatečně viditelným indikátorem focusu ve všech motivech a stavech. Bez náhrady ho neodstraňujte.
Má být každý textový prvek fokusovatelný?
Ne. Do pořadí tabulátoru patří interaktivní prvky a specifické programové cíle. Běžný text čtečka obrazovky zpřístupní bez tabindexu.
Stačí přidat role a tabindex ke klikatelnému divu?
Ne. Museli byste doplnit i klávesy, stavy a další chování. Nativní tlačítko nebo odkaz je obvykle spolehlivější základ.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
