Атрибут tabindex тега <textarea>
Описание
Атрибут tabindex в теге <textarea> определяет порядок перехода между элементами при навигации по странице с помощью клавиши Tab. Он также управляет возможностью получения фокуса элемента.
<textarea tabindex="1" placeholder="Первое поле для ввода"></textarea>
<textarea tabindex="2" placeholder="Второе поле для ввода"></textarea>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
0 |
Элемент включается в естественный порядок табуляции | Для стандартного поведения в потоке документа |
-1 |
Элемент может получить фокус программно, но не через Tab | Для вспомогательных элементов, управляемых JS |
положительное число |
Определяет явный порядок табуляции (1, 2, 3...) | Для кастомных последовательностей навигации |
Особенности работы:
- Элементы с tabindex="0" включаются в естественный порядок
- Элементы с положительным tabindex получают приоритет
- При одинаковых значениях учитывается порядок в DOM
- Поддерживается всеми современными браузерами
Рекомендации:
- Избегайте положительных значений (нарушают естественный поток)
- Используйте tabindex="-1" для элементов, управляемых через JS
- Тестируйте порядок навигации с клавиатуры
- Сочетайте с :focus-visible для стилизации фокуса
Пример доступной навигации:
<style>
textarea:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
</style>
<textarea tabindex="0">Обычное поле (в естественном порядке)</textarea>
<textarea tabindex="-1" id="js-controlled">Управляется JavaScript</textarea>
<script>
document.getElementById('js-controlled').focus();
</script>
Ограничения:
- Положительные значения могут запутать пользователей
- Некорректная реализация нарушает доступность
- Может конфликтовать с нативным поведением браузера
- Требует тестирования в реальных сценариях
Пример плохой практики:
<!-- Путаница в порядке табуляции -->
<textarea tabindex="3">Поле 1</textarea>
<textarea tabindex="1">Поле 2</textarea>
<textarea tabindex="2">Поле 3</textarea>
Советы по доступности:
<div class="form-group">
<label for="comment">Комментарий:</label>
<textarea id="comment" tabindex="0"
aria-describedby="comment-help"></textarea>
<div id="comment-help" class="sr-only">
Это поле участвует в последовательной навигации
</div>
</div>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
Примечание: Для сложных интерфейсов:
- Используйте логический порядок элементов в DOM
- Рассмотрите управление фокусом через JavaScript
- Тестируйте с реальными пользователями клавиатурной навигации
- Следуйте рекомендациям WCAG 2.1