Атрибут tabindex тега <h3>

Описание

Атрибут tabindex определяет порядок перехода между элементами при навигации с клавиатуры (клавиша Tab). Для заголовков <h1>-<h6> обычно не используется, но может применяться в особых случаях.

Пример использования:
<h1 tabindex="0">Заголовок с фокусом</h1> <h2 tabindex="1">Первый в порядке табуляции</h2> <h3 tabindex="-1">Недоступный для табуляции</h3> <h4>Обычный заголовок (без tabindex)</h4>

Особенности работы:

Значение Описание Поведение
0 Включает элемент в естественный порядок табуляции Фокусируемый в обычном потоке
-1 Делает элемент фокусируемым, но не в табуляции Фокус только программно (JS .focus())
Положительное число Задает явный порядок табуляции (1, 2, 3...) Не рекомендуется (нарушает естественный поток)

Динамическое управление:

<h1 id="focusable-heading">Программно фокусируемый заголовок</h1> <button onclick="focusHeading()">Фокус на заголовок</button> <script> function focusHeading() { const heading = document.getElementById('focusable-heading'); heading.tabIndex = 0; // Делаем фокусируемым heading.focus(); // Устанавливаем фокус heading.style.outline = '2px solid blue'; } </script>

Рекомендации по использованию:

  • Для заголовков используйте только в особых случаях (например, интерактивные заголовки)
  • Значение 0 - для включения в естественный поток навигации
  • Значение -1 - когда нужен программный фокус
  • Избегайте положительных чисел (нарушают логику доступности)
  • Всегда добавляйте визуальные стили для фокуса

Пример с CSS для фокуса:

<style> h1[tabindex]:focus { outline: 3px dashed #4CAF50; background-color: #f8f9fa; padding: 5px; } </style> <h1 tabindex="0">Заголовок с визуальным фокусом</h1>

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • Важно для доступности (WCAG)
  • Не влияет на SEO
  • Может нарушить естественный поток навигации при неправильном использовании

Примечание: В большинстве случаев заголовкам не нужен tabindex. Используйте его осознанно, только когда необходимо включить заголовок в навигацию (например, в аккордеонах или интерактивных виджетах). Для обычных текстовых заголовков он избыточен.