Описание тега tabindex

Описание тега Вопросы с тегом
[Tabindex] используется для определения последовательности, которой следуют пользователи, когда они используют клавишу Tab для навигации по странице. По умолчанию естественный порядок табуляции соответствует исходному порядку в разметке.

Атрибут содержимого tabindex позволяет авторам контролировать, должен ли элемент быть фокусируемым, должен ли он быть достижимым с использованием последовательной навигации по фокусу, и каков должен быть относительный порядок элемента для целей последовательной навигации по фокусу. Название "индекс вкладки" происходит от обычного использования клавиши "вкладка" для навигации по элементам, на которые можно сфокусироваться. Термин "табуляция" относится к продвижению вперед через фокусируемые элементы, которые могут быть достигнуты с помощью последовательной навигации по фокусу.
Рекомендация W3C: HTML5
Раздел 7.4.1 Последовательная навигация по фокусу и атрибут tabindex

В tabindexначинается с 0 или любого положительного целого числа и увеличивается с увеличением. Обычно значение 0 избегают, потому что в старых версиях Mozilla и IE tabindex начинался с 1, переходил к 2 и только после 2 переходил в 0, а затем в 3. Максимальное целочисленное значение дляtabindex является 32767. Если элементы имеют одинаковыеtabindex тогда tabindex будет соответствовать исходному порядку в разметке.

Отрицательное значение (обычно tabindex="-1") удалит элемент из индекса вкладки, и его нельзя будет сфокусировать с помощью клавиатуры. Фокус может быть отдан элементу программно, используяelement.focus() или щелчком мыши для фокусируемых элементов.

Если вы укажете tabindex без значения или с пустым значением он будет проигнорирован.

Если disabled атрибут установлен на элементе, который имеет tabindex, элемент будет проигнорирован.

Если tabindex устанавливается в любом месте страницы независимо от того, где он находится по отношению к остальной части кода (он может быть в нижнем колонтитуле, области содержимого, где угодно), если существует определенный tabindex тогда порядок табуляции начнется с элемента, которому явно назначен самый низкий tabindex значение выше 0. Затем он будет циклически перебирать определенные элементы и только после явного tabindex элементы были перенесены с табуляцией, вернется ли он в начало документа и будет ли следовать естественному порядку табуляции.

В спецификации HTML4 только следующие элементы поддерживают атрибут tabindex: привязка, область, кнопка, ввод, объект, выбор и текстовое поле. Но спецификация HTML5 с учетом доступности позволяет назначать все элементы.tabindex.

-

Например

<ul tabindex="-1">
  <li tabindex="0"></li>
  <li tabindex="1"></li>
  <li tabindex="2"></li>
</ul>

такой же как

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

потому что независимо от того, что все они назначены tabindex="1", они по-прежнему будут следовать в том же порядке: первый будет первым, а последний - последним. Это тоже то же самое..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

потому что вам не нужно явно определять tabIndex, если это поведение по умолчанию. Аdiv по умолчанию не будет фокусируемым, anchor теги будут.