Атрибут tabindex тега <select>

Описание

Атрибут tabindex определяет порядок перехода между элементами формы при навигации с помощью клавиши Tab. Для элемента <select> он позволяет управлять его позицией в последовательности фокусируемых элементов.

Пример использования:

<select tabindex="1"> <option>Первый в порядке табуляции</option> </select> <select tabindex="2"> <option>Второй в порядке табуляции</option> </select>

Значения атрибута:

Значение Описание Применение
tabindex="-1" Элемент исключается из последовательности табуляции, но может получать фокус программно Для всплывающих окон, временно скрытых элементов
tabindex="0" Элемент включается в естественный порядок табуляции Для стандартного поведения
tabindex="1+" Определяет явный порядок табуляции (1, 2, 3...) Для специальных сценариев навигации

Особенности работы:

  • По умолчанию <select> имеет tabindex="0"
  • Элементы с положительным tabindex получают фокус в порядке возрастания значений
  • При одинаковых значениях tabindex учитывается порядок в DOM
  • Поддерживается всеми современными браузерами

Рекомендации:

  • Избегайте положительных значений tabindex (>0) - нарушают естественный поток документа
  • Используйте tabindex="0" для возврата элемента в поток табуляции
  • Для неинтерактивных элементов используйте tabindex="-1"
  • Тестируйте порядок навигации с клавиатуры

Пример доступной формы:

<form> <label for="name">Имя:</label> <input type="text" id="name" tabindex="1"> <label for="email">Email:</label> <input type="email" id="email" tabindex="2"> <label for="country">Страна:</label> <select id="country" tabindex="3"> <option>Россия</option> <option>США</option> </select> <button type="submit" tabindex="4">Отправить</button> </form>

JavaScript управление фокусом:

<select id="focusable-select" tabindex="-1"> <option>Программно фокусируемый список</option> </select> <button onclick="document.getElementById('focusable-select').focus()"> Установить фокус </button>

Ограничения:

  • Положительные значения tabindex нарушают логический порядок навигации
  • На мобильных устройствах поведение может отличаться
  • Элементы с tabindex="-1" недоступны для клавиатурной навигации

Доступность (a11y):

<div class="sr-only" id="tabinfo">Используйте Tab для навигации по форме</div> <select aria-describedby="tabinfo" tabindex="0"> <option>Доступный элемент</option> </select>

Проверка порядка табуляции:

Для проверки порядка фокусировки элементов:

  1. Нажмите Tab для перехода вперед
  2. Shift+Tab для перехода назад
  3. Убедитесь, что порядок логичен и соответствует визуальному расположению