Почему может не срабатывать Tab индекс?

Проблемы с Tab Index: причины и решения

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

1. Некорректные значения tabindex

Наиболее частая причина — неправильное использование атрибута tabindex.

<!-- Проблемные примеры -->
<button tabindex="-1">Недоступная кнопка</button> <!-- Исключена из последовательности -->
<div tabindex="0">Фокус на div</div> <!-- Может нарушить логику -->
<span tabindex="5">Неправильный порядок</span> <!-- tabindex > 0 антипаттерн -->

• tabindex="-1": элемент исключается из последовательной навигации Tab, но может получить фокус программно (через .focus()). Частая ошибка — случайное применение к необходимым элементам.
• tabindex="0": добавляет элемент в естественную последовательность навигации согласно DOM-порядку. Проблема возникает, когда его ставят на нефокусируемые по умолчанию элементы (<div>, <span>), не обеспечивая им семантическую роль и обработку клавиатуры.
• tabindex > 0": категорически не рекомендуется, так как переопределяет естественный порядок, создавая путаницу и нарушая логику DOM. Особенно опасно при динамическом добавлении элементов.

2. CSS-свойства, блокирующие фокус

Некоторые CSS-правила визуально или программно скрывают элементы, удаляя их из потока навигации.

/* Стили, мешающие фокусу */
.invisible {
  visibility: hidden; /* Элемент скрыт, но сохраняет место */
}
.hidden {
  display: none; /* Полностью удален из потока */
}
.off-screen {
  position: absolute;
  left: -9999px; /* "Уведен" за пределы экрана */
}
.disabled {
  pointer-events: none; /* Отключает взаимодействие */
  opacity: 0.5;
}

• display: none и visibility: hidden полностью исключают элемент из навигации.
• pointer-events: none может отключить фокус для некоторых элементов, хотя формально они остаются доступными для Tab.
• aria-hidden="true" (HTML-атрибут) скрывает элемент от вспомогательных технологий, но не всегда блокирует фокус — это может привести к неожиданному поведению.

3. Динамическое изменение DOM

В современных SPA-приложениях частая причина — манипуляции с DOM, которые нарушают последовательность фокуса.

// Пример опасного динамического обновления
function updateContent() {
  const container = document.getElementById('container');
  container.innerHTML = '<input type="text"><button>Submit</button>';
  // Новые элементы могут не получить фокус автоматически
}

// Более безопасный подход
function updateContentSafely() {
  const container = document.getElementById('container');
  container.innerHTML = '';
  const input = document.createElement('input');
  const button = document.createElement('button');
  container.append(input, button);
  input.focus(); // Явное управление фокусом
}

• При полной замене innerHTML ранее сфокусированные элементы удаляются, что может "потерять" фокус.
• Добавление элементов с tabindex > 0 ломает естественный порядок.
• Модальные окна и всплывающие элементы часто требуют ловушки фокуса (focus trap).

4. Ошибки в порядке фокусировки

Порядок Tab должен соответствовать визуальному потоку и логике интерфейса.

<!-- Нелогичный порядок -->
<input tabindex="3" placeholder="Поле 1">
<input tabindex="1" placeholder="Поле 2">
<input tabindex="2" placeholder="Поле 3">
<!-- Правильно — без tabindex или с tabindex="0" -->
<input placeholder="Поле A">
<input placeholder="Поле B">
<input placeholder="Поле C">

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

• Избегайте tabindex > 0.
• Порядок должен соответствовать DOM-структуре.
• Для кастомных компонентов (например, слайдеров) обязательно реализуйте управление фокусом через клавиши стрелок.

5. Отсутствие семантики и ролей WAI-ARIA

Кастомные элементы без соответствующих ролей могут быть проигнорированы.

<!-- Плохо: div без роли -->
<div class="custom-button" tabindex="0">Кнопка</div>

<!-- Хорошо: явная роль и обработка клавиатуры -->
<div class="custom-button" tabindex="0" role="button" aria-pressed="false" 
     onKeyPress="handleKeyPress(event)">
  Кнопка
</div>

Как отладить проблему?

1. Проверьте значения tabindex в инструментах разработчика.
2. Используйте вкладку Accessibility в Chrome DevTools для аудита.
3. Временно отключите CSS, чтобы убедиться, что проблема не в стилях.
4. Проверьте порядок фокуса с помощью document.activeElement в консоли.
5. Протестируйте с screen reader (NVDA, VoiceOver) или инструментами вроде axe DevTools.

Вывод: Сбои в Tab-навигации обычно возникают из-за комбинации неправильных атрибутов tabindex, CSS-скрытия, динамических манипуляций с DOM и отсутствия семантики. Соблюдение стандартов доступности, отказ от tabindex > 0 и тщательное тестирование с клавиатуры — ключ к стабильной работе навигации.