Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.
Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.
Для полей ввода типа input и textarea фокус будет выражаться в том, что в поле будет моргать курсор и в него можно будет вводить текст, для ссылок и других элементов это будет выделение каким-то образом (подчеркивание, обведение пунктирной границей и т.п., зависит от браузера).
Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.
Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.
Если элементам не задан атрибут tabindex или он имеет значение 0, то переход по ним клавишей Tab будет идти в порядке следования элементов в HTML коде.
Если на странице есть элементы, которым задан tabindex, то вначале переход будет идти по ним, начиная от меньшего значения атрибута tabindex (самым маленьким может быть единица) и так далее по возрастанию значений атрибута, а когда такие элементы закончатся - переход пойдет по тем элементам, которым не задан tabindex или он имеет значение 0.
Значением атрибута служат целые числа от 1 до бесконечности. Если какие-то номера пропущены - ничего страшного не случится (к примеру, если нет номера 2, то сначала фокус попадет на элемент с tabindex, равным 1, а потом на элемент с tabindex, равным 3).
Если на странице в момент нажатия клавиши Tab есть элемент в фокусе (фокус мог быть получен не только нажатием Tab, но и кликом мышкой по элементу или атрибутом autofocus), то следующее нажатие клавиши Tab приведет к тому, что фокус получит следующий по порядку элемент после того, который в фокусе (к примеру, если сейчас в фокусе элемент с tabindex 3, то следующим получит фокус элемент с tabindex 4).
Если полю ввода задан атрибут disabled, то оно будет проигнорировано переходами через клавишу Tab, даже если этому полю задан атрибут tabindex.
Атрибут tabindex применяется к тегам a, input, textarea, button, select, area.
Пример
Давайте инпутам зададим атрибут tabindex. Понажимайте последовательно клавишу Tab и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом tabindex нет):
<input type="text" tabindex="3" placeholder="Номер элемента: 3">
<input type="text" tabindex="1" placeholder="Номер элемента: 1">
<input type="text" tabindex="2" placeholder="Номер элемента: 2">
<input type="text" tabindex="4" placeholder="Номер элемента: 4">
: