Tabindex

Tabindex je universální – lze ho použít na každém elementu.

<div tabindex="0">
</div>

Využití

Použití tabindexu jsou tři:

1. změna pořadí procházení klávesou Tab,
2. umožnění procházení/:focusu,
3. zabránění označení Tabem

Změna pořadí

Bez použití tabindexu se Tabování zachytí jen na určitých prvcích (formuláře a odkazy). Pořadí je potom řízeno umístěním jednotlivých prvků v HTML kódu.

Chceme-li toto pořadí upravit, což se v případě nelogického pořadí může hodit, začneme hodnoty tabindexu zvyšovat nad nulu (nula je u standardně Tabovatelných elementů výchozí hodnota).

<input value="Druhý">
<input tabindex="1" value="První">
<input value="Třetí">

Samostatná ukázka

Tabindex se nemusí (a ani to není příliš vhodné) nastavovat všem položkám, ale jen těm, kterým chceme zvýšit prioritu.

Při řazení pomocí vyšší hodnoty tabindexu není nutné neustále hodnotu zvyšovat (ve smyslu 1, 2, 3, …), ale lze využít pravidla, že při stejné hodnotě se pořadí řídí umístěním v kódu.

V této ukázce proto s klidem můžeme použít jako hodnoty tabindexu jen samé jedničky (ukázka) místo:

<input value="Čtvrtý">
<input tabindex="1" value="První">
<input tabindex="2" value="Druhý">
<input tabindex="3" value="Třetí">

Umožnění procházení

Pro elementy mimo formulářové prvky a odkazy způsobí přidání atributu tabindex schopnost se na element odTabovat nebo prvku udělit focus. To se hodí v případě, že chceme mít klikací <span> nebo <div> a umožnit ho vybrat jen pomocí klávesnice.

<div tabindex="0">
    Tabovatelný DIV
</div>

Hodnota 0 zajistí, že se prvek vloží do pořadí dle umístění v HTML kódu.

Ukázka

Zabránění označení

Poslední možnost je tabindex nastavit na zápornou hodnotu:

<input tabindex="-1" value="Nepůjde vybrat">

U formulářových prvků mě využití moc nenapadá. Když se pole skryje (display: none nebo visibility: hidden) či zablokuje (atribut disabled), tak se na něj dostat nedá. A jinak je poměrně žádoucí, aby se na prvek dostat dalo.

U neformulářových elementů to ale smysl dávat může.

Záporným tabindexem získá element možnost být :focusován – z čehož plyne využití v CSS pomocí příslušného selektoru :focus.

Rovněž v JavaScriptu jde elementu focus udělit.

element.focus();

Ukázka