Атрибут tabindex тега <tr>
Описание
Атрибут tabindex для тега <tr> определяет, может ли строка таблицы получать фокус при навигации с клавиатуры (Tab) и её порядок в последовательности перехода. По умолчанию строки таблицы не участвуют в навигации.
<table>
<tr tabindex="0">
<td>Фокусируемая строка</td>
<td>Нажмите Tab</td>
</tr>
<tr>
<td>Обычная строка</td>
<td>Не получает фокус</td>
</tr>
</table>
Значения атрибута:
| Значение | Описание | Использование |
|---|---|---|
-1 |
Элемент может получить фокус программно, но не через Tab | Для управляемых JavaScript строк |
0 |
Элемент включается в естественную последовательность табуляции | Для интерактивных строк |
1+ |
Определяет явный порядок табуляции (не рекомендуется) | Особые случаи навигации |
Практическое применение:
<style>
tr:focus {
outline: 2px solid #0066cc;
background-color: #f0f7ff;
}
</style>
<table>
<tr tabindex="0">
<td>Нажмите Tab</td>
<td>Строка получит фокус</td>
</tr>
<tr tabindex="-1" id="programmatic-focus">
<td>Фокус только из JS</td>
<td>Нажмите кнопку</td>
</tr>
</table>
<button onclick="document.getElementById('programmatic-focus').focus()">
Сфокусировать строку
</button>
Рекомендации по доступности:
- Добавляйте визуальные стили для состояния :focus
- Используйте tabindex="0" только для интерактивных строк
- Избегайте положительных значений tabindex
- Сочетайте с ARIA-ролями для интерактивных таблиц
Ограничения и предупреждения:
- Фокусировка строки не фокусирует ячейки
- Может нарушить естественный поток навигации
- Требует дополнительной обработки клавиатурных событий
- Не заменяет семантические интерактивные элементы
Лучшие практики:
- Для кликабельных строк используйте
<button>внутри ячеек - Для сложной интерактивности применяйте JavaScript-библиотеки
- Тестируйте навигацию с клавиатуры
- Учитывайте мобильные устройства
Примечание: В большинстве случаев лучше сделать фокусируемыми конкретные интерактивные элементы внутри таблицы, а не целые строки.