Атрибут tabindex тега <li>
Описание
Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для элемента <li> он позволяет сделать пункт списка фокусируемым.
<ul>
<li tabindex="0">Фокусируемый пункт (в порядке DOM)</li>
<li tabindex="1">Первым в таб-последовательности</li>
<li tabindex="-1">Не фокусируется через Tab, но доступен из JS</li>
</ul>
Значения атрибута:
| Значение | Описание | Использование |
|---|---|---|
0 |
Включает элемент в естественную последовательность табуляции | Для доступных интерактивных элементов |
-1 |
Удаляет из последовательности табуляции, но позволяет фокусироваться программно | Для элементов, управляемых скриптами |
| Положительное число | Определяет явный порядок (1 → 2 → 3 и т.д.) | Не рекомендуется (нарушает естественный поток) |
Доступность и фокусировка:
<ul>
<li tabindex="0" style="outline: 2px solid #4CAF50;">
Этот пункт можно выделить Tab'ом
</li>
<li tabindex="-1" id="programmatic-focus">
Этот пункт можно выделить только через JS
</li>
</ul>
<button onclick="focusItem()">Фокусировать второй пункт</button>
<script>
function focusItem() {
document.getElementById('programmatic-focus').focus();
}
</script>
Рекомендации по использованию:
- Используйте
tabindex="0"для интерактивных элементов списка tabindex="-1"полезен для элементов, управляемых клавиатурными событиями- Избегайте положительных значений - нарушают логику навигации
- Всегда добавляйте визуальные стили для фокусированного состояния
Стилизация фокуса:
<style>
li:focus {
background-color: #e3f2fd;
box-shadow: 0 0 0 2px #2196F3;
outline: none;
}
</style>
<ul>
<li tabindex="0">Пункт с красивым выделением при фокусе</li>
<li tabindex="0">Ещё один фокусируемый элемент</li>
</ul>
Особенности доступности:
- Добавляет элемент в последовательность навигации по странице
- Без tabindex элементы <li> обычно не фокусируются
- Сочетайте с ARIA-ролями для сложных интерактивных компонентов
- Проверяйте порядок табуляции в браузере
Примечание: Правильное использование tabindex критически важно для доступности веб-приложений. Для сложных списковых интерфейсов (например, кастомных dropdown'ов) рассмотрите использование ARIA-роли option вместе с tabindex.