Oldal navigáció léptetése tabulátorral

Egyik parnernek volt olyan kérése, hogy weboldalán található űrlapot kitöltve, az azon szereplő mezők közt a tab gombbal lehessen lépkedni és a lépések megadott sorrendben kövesség egymást, hogy az egymás után szereplő információk felvitele gördülékenyebb legyen.

Erre a problémára nyújt megoldást a tabindex attribútum.

A funkció HTML4-től elérhető, azonban azon oldalakon, ahol ez van hasznhálva (illetve régebbi böngészők esetében) csak <a>,  <button>, <input type="text" />, <object> és <textarea> típusú tagekkel működik, HTML5-től viszont már szélessebb körben válik elérhetővé.

A használatához az űrlap (vagy HTML oldal) elemeihez be kell tenni a tabindex="<sorszám>" attribútumot. A sorszám 0-tól egész számokkal növekedve adandó meg.

Ha a fókuszt egyéb kóddal szeretnénk programozhatóvá tenni (pl. JS-Ajax ellenőrzés vigyen egy kitöltetlen mezőre) akkor értéknek tabindex="-1" kell lenni. Ebben az esetben persze a normál léptetés nem működik.

Ha tabindex-et használsz mindenképp minden érintett taget jelölni kell vele!

Több oldalas űrlap esetében a használat nem ajánlott, mivel vegyes navigációnál (egér katt - tabulátor) a sorrend összezavarodhat és az űrlap használata nehézkessé válhat.