Navigace pomocí klávesnice — kompletní průvodce

Jak zajistit, aby se uživatelé bez myši mohli pohybovat po vaší stránce. Tab order, focus stavy, skip linky — vše podrobně vysvětleno.

9 min čtení Začátečník Březen 2026

Herní ovladač vedle klávesnice, symbol reprezentující navigaci bez myši a ovladání webových stránek

Proč je klávesnice důležitá?

Myš není pro všechny. Někdo má motorické postižení, jiný preferuje klávesnici ze zvyku. A pak jsou tu uživatelé, kterým technologie prostě selhala. Přístupná navigace znamená, že každý — opravdu každý — si užije vaší stránky bez frustrací.

Není to složité. Víc se jedná o tom porozumět základním pravidlům. Tab order, focus indikátory, skip linky — to jsou všechno věci, které můžete vyřešit během několika hodin.

Člověk pracující na notebooku bez myši, s fokusem na klávesnici jako hlavní nástroj ovládání

Řád tabelace — tab order

Tab order je pořadí, v jakém se fokus pohybuje po stránce, když uživatel stiskne klávesu Tab. Měl by jít logicky — shora dolů, zleva doprava. Jako když čtete knihu.

Ve výchozím stavu se fokus pohybuje právě tímto způsobem. Problémy vznikají, když začnete používat CSS order vlastnost nebo position: absolute . Pak se vizuální pořadí liší od pořadí v HTML.

Řešení je jednoduché: držte se logického HTML pořadí. Pokud potřebujete změnit vizuální pořadí, udělejte to flexboxem nebo gridem — nikoli absolutním pozicováním.

Indikátor fokusu — viditelný a jasný

Když uživatel stiskne Tab, měl by vidět, kde se nachází. To je indikátor fokusu — obvykle tečkovaný či tenký rámeček kolem prvku. Nemusí být krásný, ale musí být viditelný.

Mezi nejčastější chyby patří outline: none; bez náhrady. To je přesně to, co by se nikdy nemělo dělat. Uživatel neví, kde je. Místo toho si nadefinujte vlastní :focus styl.

Pěkný focus indikátor potřebuje dostatek kontrastu — minimálně 3:1 vůči pozadí. Když se rozhodujete mezi krásou a přístupností, vždycky vítězí přístupnost.

Dva buttony vedle sebe: jeden bez viditelného fokusu, druhý s jasným modrým obvodem kolem něj

Webová stránka se zobrazením skip linku v levém horním rohu, který je zvýrazněn při fokusování

Skip linky — přeskočit na hlavní obsah

Skip linka je hypertextový odkaz na začátku stránky, který uživatele přesměruje přímo na hlavní obsah. Přeskočí tak všechny navigační prvky, které vidí stokrát za den.

Není to luxus — je to nutnost. Když uživatel čte novinku, nechce se probírat hlavním menu. Chce jít rovnou na článek. Skip linka mu to umožní.

Výchozí stav? Skrytá. Jakmile uživatel stiskne Tab, objeví se. To se dělá jednoduše — position: absolute; left: -9999px; a pak :focus { left: 0; } .

Popisky a ARIA labely

Každé pole formuláře potřebuje popisku. Měl by existovat jasný vztah mezi <label> a <input> . To se dělá pomocí atributu for na labelu a id na inputu.

Pokud nemůžete použít label — třeba v případě ikony v poli hledání — použijte ARIA atribut aria-label . Čtečka obrazovky to pak přečte správně.

Bez popisky se uživatel klávesnice nevyznačuje. Co znamená to pole? Jméno? Email? Bez kontextu se cítí ztracený.

HTML kód s ukázkou správně propojené popisky a inputu, s zvýrazněním atributů for a id

Jak testovat klávesnicovou navigaci

Nejjednoduší test je ten nejlepší. Vezměte si klávesnici a používejte web bez myši.

Stiskněte Tab

Procházejte stránkou. Vidíte fokus indikátor? Pohybuje se logicky? Nebo vám zmizí někde uprostřed?

Shift + Tab pro zpět

Vraťte se. Fokus by měl jít opačným směrem. Je to konzistentní?

Enter nebo Space

Aktivujte prvek. Buttony, linky, checkboxy — všechno by mělo fungovat bez myši.

Klávesy se šipkami

V některých prvcích — jako jsou menu nebo selecty — se používají šipky. Fungují správně?

Osoba testující webové stránky pouze s klávesnicí, bez použití myši, se zaměřením na Tab klíč

Kontrolní seznam — ověřte si základy

HTML pořadí prvků

Pořadí v kódu odpovídá logickému toku. Žádné position: absolute změny.

Viditelný focus indikátor

Každý interaktivní prvek má jasně viditelný :focus styl s dostatkem kontrastu.

Skip linka na začátku

Uživatel se dostane k hlavnímu obsahu jedním klikem Tab + Enter.

Popisky na formulářích

Všechna pole mají <label> nebo aria-label . Bez výjimek.

Testováno bez myši

Vyzkoušeli jste site čistě s klávesnicí? Opravdu všechno funguje?

Shrnutí — není to tak těžké

Přístupná klávesnicová navigace není věda. Je to pečlivost a respekt k uživatelům. Pár hodin práce — to je všechno, co potřebujete, aby se vaše stránka stala přístupnější pro desítky tisíc lidí.

Není to čekání na nejnovější trendy. Není to náročné. Je to jednoduše správně. A když to uděláte správně, všichni se budou cítit vítáni na vaší stránce. To je to, na čem záleží.

Klíčová fakta: 15-20% uživatelů internetu preferuje klávesnici nebo ji musí používat. To není malá skupina. To je váš zákazník, čtenář, návštěvník. Zaslouží si přístup bez bariér.

Přečtěte si další průvodce přístupností

Poznámka k obsahu

Tento průvodce je edukační materiál zaměřený na pochopení základních principů přístupné klávesnicové navigace. Legislativní požadavky se mohou lišit podle země a typu organizace. Před implementací na svém webu se vždy poraďte s aktuálními standardy WCAG 2.1 a příslušnými místními zákony o přístupnosti. Technologie se vyvíjí — tento článek odráží stav k březnu 2026.