Нулевое значение tabindex

В HTML атрибут tabindex управляет порядком фокусировки элементов при навигации с клавиатуры. Значение 0 играет особую роль: оно делает элемент доступным для фокусировки через клавиатуру, но не задаёт конкретный порядок в последовательности табуляции. Элементы с tabindex="0" следуют естественному порядку документа.

Основное поведение

  • Элементы, которые по умолчанию фокусируемы (например, <button>, <a href="">, <input>), остаются фокусируемыми и без tabindex.
  • Присвоение tabindex="0" позволяет сделать фокусируемым элемент, который обычно фокус не принимает (например, <div> или <span>).
  • Такие элементы включаются в стандартную последовательность табуляции, при этом их порядок определяется расположением в DOM.
<div tabindex="0">Фокусируемый блок</div>
<span tabindex="0">Ещё один фокусируемый элемент</span>

В этом примере оба элемента можно достичь с помощью клавиши Tab в том порядке, в котором они находятся в документе.

Отличие от положительных и отрицательных значений

  • Положительные числа (tabindex="1", "2" и т.д.) создают явный порядок табуляции, который опережает элементы с tabindex="0".
  • Отрицательное значение (tabindex="-1") делает элемент невидимым для последовательной навигации, но фокусируемым программно через JavaScript (element.focus()).

tabindex="0" находится между этими двумя подходами: элемент участвует в естественном порядке, но не нарушает привычную табуляцию.

Использование в библиотеке Tabbable

Библиотека Tabbable предоставляет функции для определения, какие элементы на странице доступны для фокуса. Она учитывает все атрибуты tabindex, включая 0.

Основные моменты:

  • Метод tabbable(container) возвращает массив всех элементов внутри container, которые можно достичь с клавиатуры.
  • Элементы с tabindex="0" включаются автоматически, так как они соответствуют стандартам фокусируемости.
  • Элементы с tabindex отрицательным (-1) не попадают в этот список, если явно не использовать методы для поиска всех фокусируемых элементов (focusable()).

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

import { tabbable } from 'tabbable';

const container = document.getElementById('form-container');
const focusableElements = tabbable(container);

focusableElements.forEach(el => {
  console.log(el.tagName, el.tabIndex);
});

Вывод покажет все элементы, включая <div tabindex="0"> и стандартные элементы формы, но исключит те с tabindex="-1".

Практические советы по применению

  1. Добавление интерактивности к блокам tabindex="0" часто используют для элементов <div> или <span> с кастомными интерактивными компонентами, такими как кнопки, вкладки или аккордеоны.

  2. Сохранение естественного порядка табуляции Использование нулевого значения позволяет не вмешиваться в порядок стандартных элементов формы, сохраняя предсказуемость для пользователей клавиатуры.

  3. Совместимость с ARIA Для элементов с role="button" или role="tab" атрибут tabindex="0" обеспечивает корректную фокусируемость без нарушения семантики.

<div role="button" tabindex="0">Пользовательская кнопка</div>
  1. Избегать ненужного увеличения числа элементов с положительным tabindex Положительные значения усложняют поддержку и могут вызвать неожиданные прыжки фокуса. tabindex="0" является безопасной альтернативой для большинства случаев.

Итоговые характеристики tabindex="0"

  • Элемент становится фокусируемым через клавиатуру.
  • Следует естественному порядку документа.
  • Совместим с библиотекой Tabbable, которая корректно определяет такие элементы.
  • Подходит для кастомных интерактивных компонентов, сохраняя удобство и предсказуемость навигации.

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

Оглавление