Атрибут tabindex тега <b>
Описание
Атрибут tabindex определяет, может ли элемент <b> получать фокус при навигации по странице с помощью клавиши Tab, и в каком порядке. По умолчанию тег <b> не является фокусируемым.
Важно: Использование tabindex с
Пример (не рекомендуется):
<b> противоречит семантике HTML, так как этот тег предназначен только для стилизации текста, а не для интерактивных элементов.
<p>
Нажмите Tab: <b tabindex="0">этот текст</b> получит фокус
</p>
Значения атрибута:
| Значение | Поведение | Рекомендация |
|---|---|---|
-1 |
Элемент не в таб-последовательности, но может получить фокус программно | Допустимо для специальных случаев |
0 |
Элемент включается в естественный порядок табуляции | Не рекомендуется для <b> |
> 0 |
Задает кастомный порядок (нарушает логику документа) | Избегать |
Правильная альтернатива:
<!-- Вместо этого -->
<b tabindex="0">Текст с фокусом</b>
<!-- Используйте семантические элементы -->
<button class="text-button">Интерактивный текст</button>
<a href="#" class="text-link">Текст-ссылка</a>
<style>
.text-button, .text-link {
background: none;
border: none;
font: inherit;
cursor: pointer;
text-decoration: underline;
}
</style>
Когда можно использовать:
- Для временной отладки интерфейса
- В крайне специфических случаях (например, кастомные текстовые редакторы)
- Только с
tabindex="-1"для программного управления фокусом
JavaScript управление фокусом:
// Плохая практика (но технически возможно)
const boldElement = document.querySelector('b[tabindex]');
boldElement.addEventListener('focus', () => {
console.log('Элемент получил фокус');
});
// Программная фокусировка
boldElement.focus();
Проблемы доступности:
- Скринридеры не ожидают фокусируемого
<b> - Отсутствие семантической роли у элемента
- Путаница для пользователей (обычный текст не должен быть фокусируемым)
- Нарушение ожидаемого поведения страницы
Важно: По стандартам ARIA, элементы без семантической роли не должны быть фокусируемыми. Вместо <b tabindex> используйте <button>, <a> или добавьте соответствующую ARIA-роль.
Лучшие практики:
- Избегайте tabindex для чисто стилистических элементов
- Для интерактивного текста используйте семантические теги
- Если необходимо сделать текст фокусируемым, добавьте роль (
role="button") - Всегда тестируйте с клавиатурной навигацией и скринридерами
Примечание: Хотя технически возможно сделать <b> фокусируемым, это противоречит принципам доступности и семантической разметки HTML.