Tabindex-attribuutti

Attribuutti tabindex asettaa järjestyksen, jossa elementit saavat fokuksen siirryttäessä niiden välillä Tab-näppäimellä.

Painaen tätä näppäintä voidaan aktivoida peräkkäin tiettyjä sivun elementtejä (linkit ja lomakkeiden elementit). Aktiiviset elementit saavat syöttöfokuksen.

Syöttökentille, kuten input ja textarea, fokus ilmenee siten, että kentässä vilkkuu kursosi ja siihen voidaan kirjoittaa tekstiä. Linkeille ja muille elementeille se voi olla jokin korostus (alleviivaus, katkoviivainen reunus jne., riippuu selaimesta).

Jos elementti ei ollut näkyvissä sivulla fokuksen saamisen hetkellä (vierityksen vuoksi), sivu vieritetään kohti kyseistä elementtiä.

Jos elementeille ei ole asetettu attribuuttia tabindex tai sen arvo on 0, siirtyminen niiden välillä Tab-näppäimellä tapahtuu elementtien esiintymisjärjestyksessä HTML-koodissa.

Jos sivulla on elementtejä, joille on asetettu tabindex, siirtyminen tapahtuu ensin niiden välillä, alkaen attribuutin tabindex pienimmästä arvosta (pienin voi olla yksi) ja niin edelleen arvojen noustessa. Kun nämä elementit on käyty läpi, siirtyminen jatkuu niille elementeille, joille ei ole asetettu tabindex tai joilla on arvo 0.

Attribuutin arvona ovat kokonaisluvut 1 äärettömään. Jos jotkin numeroit puuttuvat, ei mitään pahaa tapahdu (esimerkiksi, jos numeroa 2 ei ole, niin ensin fokus osuu elementtiin, jonka tabindex on 1, ja sitten elementtiin, jonka tabindex on 3).

Jos sivulla on elementti fokuksessa Tab-näppäimen painamisen hetkellä (fokus olisi voitu saada paitsi Tab:lla, myös napsauttamalla hiirellä elementtiin tai attribuutilla autofocus), seuraava Tab-näppäimen painallus johtaa siihen, että fokuksen saa seuraava järjestyksessä oleva elementti (esimerkiksi, jos fokuksessa on elementti, jonka tabindex on 3, niin seuraavaksi fokuksen saa elementti, jolla on tabindex 4).

Jos syöttökentälle on asetettu attribuutti disabled, siihen ei siirrytä Tab-näppäimellä, vaikka kyseiselle kentälle olisi asetettu attribuutti tabindex.

Attribuuttia tabindex voidaan käyttää seuraavien tagien kanssa: a, input, textarea, button, select.

Esimerkki

Annetaan input-kentille attribuutti tabindex. Paina peräkkäin Tab-näppäintä ja näet, kuinka syöttöfokus siirtyy ensimmäisestä input-kentästä neljänteen, ja sitten etenee sivuilla olevien linkkien läpi alusta alkaen (koska muita elementtejä, joille on asetettu attribuutti tabindex, ei ole):

:

Katso myös