Элементы с tabindex="-1"

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

Поведение в контексте библиотеки Tabbable

Библиотека Tabbable предназначена для определения всех фокусируемых элементов внутри контейнера. Она анализирует DOM и возвращает элементы, которые могут быть достигнуты через клавиатурную навигацию. Важное свойство элементов с tabindex="-1":

  • Они не попадают в список tabbable элементов, поскольку tabindex="-1" исключает их из естественного порядка табуляции.
  • Они считаются фокусируемыми при проверке свойства focusable внутри библиотеки. То есть, если нужно программно установить фокус, библиотека корректно определит, что элемент можно сфокусировать.

Пример:

import tabbable from 'tabbable';

const container = document.querySelector('#form');
const allFocusable = tabbable(container, { includeContainer: false });

console.log(allFocusable);

В этом случае элементы с tabindex="-1" не будут выведены в массиве, так как массив allFocusable содержит только элементы, доступные через клавишу Tab.

Программный фокус на элементах с tabindex="-1"

Хотя элемент не включается в последовательность табуляции, библиотека или собственный код могут использовать метод focus():

const hiddenButton = document.querySelector('#hidden-button');
hiddenButton.focus();

Это позволяет:

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

Взаимодействие с disabled и скрытыми элементами

Элементы с tabindex="-1" не должны быть disabled и не должны иметь display: none или visibility: hidden, иначе фокусировка через focus() не сработает. Библиотека Tabbable учитывает эти ограничения при фильтрации элементов:

  • tabbable() исключает элементы, которые невидимы.
  • Фокусировка на tabindex="-1" работает только с элементами, реально присутствующими в визуальном потоке документа.

Использование в динамических интерфейсах

Элементы с tabindex="-1" часто применяются в динамических интерфейсах:

  1. Модальные окна — первый элемент модального окна может иметь tabindex="-1", чтобы программно перевести фокус при открытии.
  2. Скрытые панели и аккордеоны — внутренние элементы получают временный фокус при разворачивании.
  3. Всплывающие подсказки и уведомления — для корректного обращения к элементу через клавиатуру без изменения таб-ордера.

Пример динамической фокусировки:

function openModal(modal) {
  modal.style.display = 'block';
  const firstFocusable = modal.querySelector('[tabindex="-1"]');
  if (firstFocusable) {
    firstFocusable.focus();
  }
}

Влияние на порядок табуляции

Использование tabindex="-1" не изменяет порядок табуляции остальных элементов. Это позволяет:

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

Настройки библиотеки для учета tabindex="-1"

При вызове функции tabbable() можно использовать опцию includeContainer, но специальной опции для включения tabindex="-1" нет, так как библиотека ориентирована на естественный порядок табуляции. Для получения всех фокусируемых элементов, включая tabindex="-1", можно использовать дополнительную проверку:

const allFocusableIncludingTabindexMinusOne = [
  ...tabbable(container),
  ...container.querySelectorAll('[tabindex="-1"]')
];

Это позволяет комбинировать автоматическое определение tabbable элементов с программным контролем фокуса на элементах, исключённых из таб-индекса.

Практические рекомендации

  • Использовать tabindex="-1" для элементов, которые должны быть доступны программно, но не через Tab.
  • Не ставить tabindex="-1" на интерактивные элементы, которые должны быть частью стандартной навигации.
  • Для улучшения доступности комбинировать с ARIA-атрибутами (aria-hidden, role) и динамическим управлением фокусом.
  • Проверять визуальную доступность элемента перед установкой фокуса — элементы, скрытые через CSS, не могут получить реальный фокус.

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

Оглавление