Vlastnosť tabindex určuje usporiadanie prvkov z pohľadu ich prechádzania klávesnicou – konkrétne klávesom tabulátor (TAB). Kláves TAB sa používa na prechádza po interaktívnych prvkov na webovej stránke – odkazoch, formulárových poliach, tlačidlách, atď.
Z hľadiska správania prvku môže mať vlastnosť tabindex 3 rôzne nastavenia:
- tabindex s hodnotami 1 a viac – (napr. tabindex=“1″) – určuje poradie prechádzania klávesom TAB po interaktívnych prvkoch – mení prirodzené poradie prechádzania prvkami. Je potrebné sa takému používaniu vyhnúť.
- tabindex s hodnotou 0 (tabindex=“0″) – v tomto prípade pôvodne neinteraktívny prvok získa možnosť zamerania klávesom TAB. Poradie daného prvku je včlenené logicky medzi iné interaktívne prvky. Napríklad značka <div> nie je pôvodne zamerateľná klávesom TAB, ale ak je v kóde <div tabindex=“0″> už bude zamerateľná.
- tabindex s hodnotami -1 a menšími – (napr. tabindex=“-1″) – prvok s danou vlastnosťou bude odstránený z poradia zamerateľnosti prvkov, ale umožní im získať zameranie prostredníctvom skriptovania.
Tabindex s hodnotami 1 a viac (napr. tabindex=“1″)
Takémuto nastaveniu vlastnosti tabindex je potrebné sa vyhnúť. Podľa hodnoty tabindex je nastavené poradie zamerateľnosti prvkov na webstránke:
<h1 tabindex="2">Poradie zamerateľnosti prvkov</h1>
<a href="#">Toto je názorný príklad kladných hodnôt vlastnosti tabindex.</a>
<p tabindex="1">Poradie zamerateľnosti prvkov určuje aj vlastnosť tabindex a jeho hodnota</p>
<div tabindex="3"><p>Toto je záver článku.</p></div>
Ako prvý bude klávesom TAB zameraný prvok <p> s hodnotou tabindex=“1″. Ak by odsek nemal nastavenú vlastnosť tabindex, klávesom TAB by nebol vôbec zamerateľný. Ako druhý v poradí bude zamerateľný prvok <h1>, potom prvok <div> a nakoniec prvok <a>, ktorý síce nemá nastavenú vlastnosť tabindex, ale je zo svojej podstaty interaktívny prvok a nasleduje v poradí po najvyššej hodnote vlastnosti tabindex.
Tabindex s hodnotou 0 (tabindex=“0″)
Ak neinteraktívnemu prvku priradíme vlastnosť tabindex s hodnotou 0 – napr. <div tabindex=“0″>, stane sa z neho prvok, ktorý sa včlení do zamerateľného poradia a je zamerateľný klávesom TAB v logickom poradí po ostatných zamerateľných prvkoch:
<a href="#">Toto je názorný príklad kladných hodnôt vlastnosti tabindex.</a>
<div tabindex="0"><img></div>
<button>Odoslať</button>
V tomto prípade bude najskôr klávesom TAB zamerateľný interaktívny prvok <a>, potom neinteraktívny prvok <div> s tabindexom 0 a následne interaktívny prvok <button>.
Takýmto spôsobom môžu byť zamerateľné napríklad nasledujúce prvky: <div>, <span>, <p> a aj prvok <a> bez href, ktorý je pôvodne nezamerateľný klávesom TAB.
Prečo je v niektorých prípadoch potrebné zamerať natívne nezamerateľné prvky? Ak je napríklad tlačidlo vytvorené prostredníctvom prvku <div> (a nie natívneho prvku <button>), je potrebné ho vložiť do navigačného poradia, aby bolo zamerateľné. A práve na to slúži vlastnosť tabindex s hodnotou 0.
Tabindex s hodnotami -1 a menšími (napr. tabindex=“-1″)
Čo sa stane, ak HTML prvku nastavíme vlastnosť tabindex s hodnotu -1? Ak je to interaktívny prvok, prestane byť zamerateľný (nebude sa dať naň presunúť pomocou klávesu TAB) – vypadne z navigačného poradia. Ak sa nejedná o interaktívny prvok, tak to bude vyzerať, ako by sa nič nestalo, tabulátorom sa nebude dať zamerať rovnako ako predtým.
Dôležité je však to, že sa prvky s vlastnosťou tabindex so zápornou hodnotou budú dať zamerať programovo – prostredníctvom skriptovania. Napríklad môžu získať možnosť zamerania pomocou focus(). Ak sa napr. na webstránke nachádza modálne okno, ktoré je pred používateľom skryté, je potrebné aby sa nezobrazovala v navigačnom poradí – aby sa naň nebolo možné presunúť prostredníctvom tabulátora. Ak ale bude modálne okno vyvolané používateľom, resp. určitou akciou, a objaví sa na webstránke, je potrebné mu zameranie priradiť. Prípadne sa môže jednať o okno s chybovou správou ohľadom formulára.