Tabindex

Co je to tabindex?

Tabindex je HTML atribut, který určuje pořadí, v jakém se uživatel pohybuje mezi interaktivními prvky na webu pomocí klávesy Tab. Představte si tabindex jako neviditelnou mapu navigace pro lidi, kteří nepoužívají myš – například uživatele s motorickým postižením, zrakově postižené s odečítačem obrazovky nebo prostě kohokoli, kdo preferuje klávesnici. Když stisknete Tab, přeskočíte na další interaktivní prvek (odkaz, tlačítko, formulář). Tabindex určuje, v jakém pořadí se to děje.

Bez tabindexu prohlížeč používá přirozené pořadí prvků v HTML kódu – naviguje odshora dolů v tom pořadí, jak jsou elementy napsány. Většinou je to ideální a tabindex nepotřebujete. Problém nastává, když vizuální rozložení stránky (vytvořené pomocí CSS) je jiné než pořadí v HTML kódu. Nebo když chcete některé prvky úplně vyřadit z klávesnicové navigace, případně přidat interaktivitu prvkům, které normálně nejsou dostupné přes Tab.

Tabindex je kritický pro přístupnost webu (accessibility). Podle odhadu WHO má přes 15 % světové populace nějaké postižení. V Česku to znamená přes milion lidí. Pokud váš web není dostupný z klávesnice, vylučujete tyto uživatele. Navíc přístupný web má lepší SEO – Google hodnotí uživatelskou zkušenost a přístupnost je její součástí.

Jak tabindex funguje?

Tabindex může mít tři typy hodnot: záporné číslo (obvykle -1), nulu (0) nebo kladné číslo (1, 2, 3...). Každá hodnota má jiný význam a použití. Ve většině případů budete používat tabindex="0" nebo tabindex="-1", kladná čísla se používají zřídka a mohou způsobit více problémů než užitku.

Tabindex="0" přidá prvek do přirozené navigační sekvence v tom pořadí, v jakém se objevuje v HTML. Používá se pro prvky, které normálně nejsou fokusovatelné (přístupné přes Tab), ale chcete je zpřístupnit klávesnici – například vlastní dropdown menu vytvořené z <div> místo <select>. Prvek s tabindex="0" dostane focus (zvýraznění) stejně jako odkazy nebo tlačítka a můžete na něj přiřadit klávesnicové události.

Tabindex="-1" odstraní prvek z přirozené Tab sekvence, ale stále ho lze programově fokusovat pomocí JavaScriptu. To je užitečné pro modální okna, které chcete otevřít a přesunout focus na zavírací tlačítko, nebo pro dynamické prvky, které se objevují a mizí. Prvek s tabindex="-1" uživatel nemůže dosáhnout pomocí Tab, ale můžete na něj přesunout focus JavaScriptem metodou element.focus().

Kladná čísla (tabindex="1", tabindex="2"...) vytváří vlastní pořadí navigace. Prvky s kladným tabindexem dostanou focus první, v pořadí od nejnižšího čísla k nejvyššímu, pak následují prvky s tabindex="0" a výchozí fokusovatelné prvky (odkazy, tlačítka...). Kladný tabindex se NEDOPORUČUJE používat – narušuje přirozený tok stránky, je těžké udržovat při změnách layoutu a mate uživatele odečítačů obrazovky.

Kdy a jak používat tabindex

• Vlastní interaktivní komponenty (tabindex="0")

Pokud vytváříte vlastní UI komponenty z ne-interaktivních elementů (např. vlastní tlačítko z <div> místo <button>), přidejte tabindex="0", aby byly dostupné z klávesnice. DŮLEŽITÉ: Vždy je lepší použít sémantické HTML elementy (<button>, <a>, <input>), které jsou přístupné automaticky. Vlastní komponenty vytvářejte jen když musíte a vždy je správně zpřístupněte.

• Modální okna a dynamický obsah (tabindex="-1")

Když otevřete modální okno (pop-up), měli byste přesunout focus dovnitř okna, aby uživatelé klávesnice nemohli omylem interagovat s obsahem pod modálem. Kontejner modálu dejte tabindex="-1" a při otevření zavolejte modal.focus(). Také "zachyťte" focus uvnitř modálu – když uživatel dojde k poslednímu prvku a stiskne Tab, vraťte ho na první prvek v modálu.

• Skip links (přeskočit navigaci)

Skip links jsou skryté odkazy na začátku stránky, které umožňují uživatelům klávesnice přeskočit opakující se navigaci a přejít rovnou k hlavnímu obsahu. Obvykle jsou skryté a zobrazí se až při focusu. Cílový prvek (např. <main>) musí mít tabindex="-1", aby na něj šel focus přesunout. Skip links jsou nejlepší praxe pro přístupnost a jsou vyžadovány standardem WCAG.

• Zakázání focusu na dočasně nedostupné prvky

Když máte prvky, které jsou vizuálně skryté ale stále v DOM (např. položky v collapsed menu), dejte jim tabindex="-1", aby uživatelé klávesnice na ně nemohli omylem přejít. Když menu rozbalíte, vraťte tabindex="0" nebo ho odstraňte. Alternativně použijte display: none nebo visibility: hidden v CSS, což prvky úplně odstraní z accessibility tree.

• NIKDY nepoužívejte kladný tabindex

Kladná čísla (tabindex="1", "2"...) narušují přirozený tok stránky a jsou noční můrou pro uživatele odečítačů obrazovky. Pokud potřebujete změnit pořadí navigace, změňte pořadí prvků v HTML kódu, ne tabindex. Je to vždy lepší řešení. Kladný tabindex je považován za anti-pattern v moderním webdesignu.

Příklady použití tabindex

Podívejme se na několik praktických příkladů, jak tabindex používat správně:

Přidání focusovatelnosti vlastnímu prvku:

<!-- Vlastní dropdown menu -->
<div class="dropdown" tabindex="0" role="button" aria-expanded="false">
    Vyberte možnost
</div>

Skip link pro přeskočení navigace:

<!-- Skip link na začátku stránky -->
<a href="#main-content" class="skip-link">
    Přeskočit na hlavní obsah
</a>

<!-- Cíl skip linku -->
<main id="main-content" tabindex="-1">
    <!-- Hlavní obsah stránky -->
</main>

Modální okno s focus management:

<!-- Modální okno -->
<div class="modal" tabindex="-1" role="dialog" aria-modal="true">
    <button class="modal-close">Zavřít</button>
    <!-- Obsah modálu -->
</div>

<script>
// Při otevření modálu přesuneme focus
modal.focus();
</script>

Tabindex a přístupnost webu

Přístupný web je ten, který může používat každý – bez ohledu na schopnosti, věk nebo technologii, kterou používá. Tabindex je jen malá část přístupnosti, ale důležitá. Správné používání tabindexu zajišťuje, že uživatelé klávesnice (včetně lidí s motorickým nebo zrakovým postižením) se mohou po webu pohybovat logicky a efektivně.

Přístupnost však znamená mnohem víc než jen tabindex. Zahrnuje sémantické HTML (používání správných tagů jako <nav>, <main>, <button>), ALT texty pro obrázky, ARIA atributy pro dynamický obsah, dostatečný kontrast barev, responzivní design, titulky u videí a mnoho dalšího. Komplexní přístupnost webu se řídí standardem WCAG (Web Content Accessibility Guidelines).

Dobrá zpráva je, že přístupný web je lepší pro všechny. Přístupnost zlepšuje SEO – sémantické HTML a logická struktura pomáhají vyhledávačům pochopit váš obsah. Přístupnost zlepšuje mobilní zkušenost – velká klikací plocha a jasná struktura pomáhají i na malých obrazovkách. A přístupnost rozšiřuje vaše publikum – pokud váš web může použít člověk s postižením, může ho použít opravdu každý.

Testování klávesnicové přístupnosti

Nejjednodušší způsob, jak otestovat přístupnost vašeho webu z klávesnice, je jednoduše zkusit web používat bez myši. Odpojte myš (nebo ji prostě nepoužívejte) a zkuste splnit běžné úkoly jen pomocí klávesnice. Klávesy pro testování: Tab (další prvek), Shift+Tab (předchozí prvek), Enter (aktivovat odkaz/tlačítko), Mezerník (aktivovat tlačítko/checkbox), šipky (v dropdowns a sliderech), Esc (zavřít modál).

Při testování dejte pozor na tyto problémy: Vidíte focus? Každý fokusovaný prvek musí být jasně vizuálně označený (obvykle outline nebo border). Mnoho designérů bohužel odstraní outline pomocí outline: none v CSS, což web znepřístupňuje. Pokud nechcete výchozí outline, navrhněte vlastní styl focusu, ale NIKDY ho úplně neodstraňujte.

Je pořadí logické? Navigace by měla jít shora dolů, zleva doprava, v logickém pořadí podle vizuálního layoutu. Pokud se focus přeskakuje divně po stránce, máte problém s pořadím prvků v HTML nebo špatně nastaveným tabindexem. Jsou dostupné všechny funkce? Vše, co jde udělat myší, musí jít udělat i klávesnicí. Pokud máte hover menu, které se zobrazí jen při najetí myší, musí být dostupné i přes klávesnici.

Pro profesionální testování použijte nástroje jako Lighthouse v Chrome DevTools (sekce Accessibility), axe DevTools extension nebo WAVE Web Accessibility Evaluation Tool. Tyto nástroje automaticky detekují běžné problémy s přístupností včetně špatného použití tabindexu. Pro komplexní audit zvažte testování se skutečnými uživateli odečítačů obrazovky jako NVDA (Windows, zdarma) nebo VoiceOver (Mac, vestavěný).

Související pojmy