Глобальный атрибут tabindex

Глобальный атрибут tabindex позволяет установить порядок получения фокуса при переходе от одного элемента к другому с помощью клавиши Tab.

Переход происходит от меньшего числового значения к большему, например от 1 к 2, затем к 3 и так далее. Указывать строго последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус раньше элементов, имеющих большее значение.

Если у элементов совпадают значения атрибута tabindex, то порядок получения фокуса устанавливается в зависимости от последовательности их расположения в исходном коде документа.

Элементы, у которых установлен атрибут hidden или атрибут disabled (если он есть у элемента), фокус при переходе не получают.

Синтаксис

<элемент tabindex="число">

Значения

число — любое целое число.

Нуль, неверное значение или когда атрибут tabindex не задан означает, что элемент получит фокус с помощью перехода, однако переход к элементу происходит в самом конце — только после перехода по всем пронумерованным элементам, а также после ссылок (если они есть и идут в коде до текущего элемента).

Отрицательное значение говорит о том, что элемент не участвует в получении фокуса при переходе, но может получить фокус по нажатию по нему.

Положительные значения определяют порядок получения фокуса элементов: элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение.

Значение по умолчанию

Пример

<!-- Нажимайте клавишу Tab для перехода
     от элемента к элементу -->
<p><button tabindex="1">Первый</button></p>
<p><button tabindex="3">Третий</button></p>
<p><button tabindex="2">Второй</button></p>
<p><button tabindex="4">Четвёртый</button></p>

Результат