Что такое tabindex?

Что такое tabindex?

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

Значения tabindex и их поведение

Атрибут tabindex может принимать целочисленные значения, каждое из которых имеет своё особое значение:

• tabindex="0": Элемент включается в естественный порядок последовательной навигации (тот порядок, который определяется исходным HTML-кодом и структурой DOM). Элемент также становится программируемо фокусируемым с помощью JavaScript (методы .focus(), .blur()). Это значение обычно добавляется к элементам, которые по умолчанию не являются фокусируемыми (например, <div>, <span>), но должны быть интерактивными.

  <div tabindex="0" role="button" onclick="handleClick()">Нажми меня с клавиатуры</div>
  

• tabindex="-1": Элемент исключается из последовательной навигации с клавишей Tab. Однако он остаётся программируемо фокусируемым. Это крайне полезно для управления фокусом через JavaScript. Типичные сценарии использования:

    * Модальные окна: когда окно открывается, фокус программно устанавливается на него (`modal.focus()`), но при закрытии фокус возвращается на ранее активный элемент.
    * Виджеты, где фокус должен управляться скриптом (например, кастомные выпадающие списки).
    * Скрытие элементов от навигации с Tab, но с возможностью вернуть их в поток позже.

```javascript
const modal = document.getElementById('myModal');
modal.setAttribute('tabindex', '-1');
modal.focus(); // Фокус установлен, но Tab с этого элемента перейдёт не на modal, а на следующий в естественном порядке.
```

• tabindex="1" или любое положительное целое число**: Элемент получает приоритет в порядке навигации. Навигация начинается с элемента с наименьшим положительным tabindex (например, 1), затем переходит к следующему (2, 3 и т.д.), и только после всех положительных значений — к элементам с tabindex="0" и остальным фокусируемым по умолчанию элементам в их естественном порядке.

    **⚠️ Важное предупреждение**: Использование положительных значений `tabindex` считается **антипаттерном** в современной веб-разработке. Оно ломает логичный, предсказуемый порядок навигации, основанный на структуре DOM, что создаёт серьёзные проблемы для доступности и сопровождаемости кода. Порядок, заданный в разметке, должен соответствовать визуальному и логическому порядку на странице.

Элементы, фокусируемые по умолчанию

Некоторые HTML-элементы являются фокусируемыми по умолчанию (имеют tabindex="0" по умолчанию) и включены в последовательную навигацию без явного указания атрибута:

• Ссылки (<a> с атрибутом href)
• Кнопки (<button>)
• Элементы форм: <input>, <select>, <textarea>
• Элементы с атрибутом contenteditable

Рекомендации по использованию (Best Practices)

1. Избегайте положительных значений tabindex. Они нарушают естественный поток и усложняют поддержку.
2. Используйте tabindex="0", чтобы сделать кастомный интерактивный элемент (например, карточку или виджет) доступным для навигации с клавиатуры. При этом обязательно добавьте соответствующую семантическую роль (role) и обработку событий клавиатуры (например, keydown для Enter и Space).

   <div class="custom-card" tabindex="0" role="article" aria-labelledby="card-title">
     <h3 id="card-title">Заголовок карточки</h3>
     <p>Контент...</p>
   </div>
   

3. Используйте tabindex="-1" для программируемого управления фокусом. Это основной инструмент для сценариев вроде "ловушки фокуса" внутри модального окна.
4. Порядок DOM должен соответствовать логическому порядку навигации. Не исправляйте плохую структуру разметки с помощью tabindex. Переработайте HTML.
5. Всегда обеспечивайте визуальный индикатор фокуса для элементов с tabindex. Убирая стандартный outline с помощью outline: none, обязательно создайте свою альтернативу (например, box-shadow).

   .custom-button:focus {
     /* outline: none; <- Не делайте так без замены! */
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
   }
   

6. Тестируйте навигацию с помощью клавиши Tab. Это самый простой способ убедиться, что порядок логичен и все интерактивные элементы доступны.

Итог

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