Можно ли сфокусироваться на заголовке?

Можно ли сфокусироваться на заголовке?

Да, можно, но с важными оговорками. В HTML и DOM-модели заголовки (элементы <h1>–<h6>) по умолчанию не являются фокусируемыми элементами. Это означает, что они не могут получить фокус с клавиатуры (через Tab) или программно через метод .focus() без дополнительных манипуляций. Однако эту ситуацию можно и часто нужно изменять, чтобы соответствовать современным стандартам доступности (a11y) и улучшать пользовательский опыт.

Почему заголовки по умолчанию не фокусируемы?

С точки зрения семантики HTML и спецификации WAI-ARIA, заголовки — это структурные элементы, а не интерактивные (в отличие от <button>, <a>, <input>). Их основная роль — организация контента и создание иерархии для скринридеров и поисковых систем. Автоматическое добавление их в порядок табуляции нарушило бы навигацию для пользователей клавиатуры, заставляя их проходить через множество нефункциональных элементов.

Как сделать заголовок фокусируемым?

Чтобы сфокусироваться на заголовке, необходимо явно добавить ему атрибут tabindex. Это главный инструмент управления фокусируемостью в HTML.

Основные подходы:

1. tabindex="0" — Делает элемент фокусируемым и включаемым в естественный порядок табуляции (последовательность навигации по умолчанию). Это наиболее корректный способ для случаев, когда заголовок должен быть доступен для навигации с клавиатуры.

   <h2 tabindex="0">Важный раздел</h2>
   

2. tabindex="-1" — Делает элемент фокусируемым только программно (через JavaScript-метод .focus()), но исключает его из естественного порядка табуляции. Это идеально для управления фокусом в динамических интерфейсах.

   // Пример: фокус на заголовке после модального окна
   const modalHeading = document.getElementById('modal-title');
   modalHeading.setAttribute('tabindex', '-1');
   // ... после закрытия модалки ...
   modalHeading.focus(); // Фокус вернётся на заголовок
   

3. Использование ARIA-ролей — Если заголовок должен вести себя как интерактивный элемент (например, кликабельная панель аккордеона), лучше изменить его семантическую роль и сделать его по-настоящему интерактивным.

   <!-- Не самый лучший, но рабочий подход -->
   <h3 tabindex="0" role="button" aria-expanded="false" onclick="toggleSection()">
     Раздел спойлера
   </h3>
   <!-- Более правильный подход: обернуть в кнопку -->
   <button aria-expanded="false" onclick="toggleSection()">
     <h3 style="display: inline; margin: 0;">Раздел спойлера</h3>
   </button>
   

Зачем это нужно? Практические сценарии и доступность

• Управление фокусом в SPA и динамических UI: При загрузке нового контента (например, в SPA-приложении или после AJAX-запроса) очень важно программно переместить фокус на заголовок нового раздела. Это сообщает пользователям скринридеров и тем, кто navigates с клавиатуры, о смене контекста.

  // После загрузки нового контента
  function loadNewArticle(content) {
      mainContainer.innerHTML = content;
      const newHeading = mainContainer.querySelector('h2');
      newHeading.setAttribute('tabindex', '-1');
      newHeading.focus(); // Фокус перемещается, помогая понять, что контент обновился
  }
  

• Навигация по странице с клавиатуры (нативные "якоря"): Если на странице есть длинный документ с оглавлением, можно сделать заголовки разделов фокусируемыми, чтобы пользователь мог быстро перепрыгивать между ними с помощью клавиатуры. Это альтернатива использованию ссылок с href="#id".

• Интерактивные виджеты (аккордеоны, модальные окна): В соответствии с рекомендациями WAI-ARIA Authoring Practices, фокус должен перемещаться на заголовок (<h1>, <h2>) внутри открывающегося модального окна или раздела аккордеона.

Критические замечания и рекомендации

• Не злоупотребляйте. Добавляйте tabindex к заголовкам только при реальной необходимости для логики работы или доступности. Слишком много фокусируемых элементов ухудшают навигацию.
• Обязательно добавляйте визуальный стиль для состояния фокуса. Если элемент стал фокусируемым, пользователи должны видеть, где находится фокус. Уберите outline: none только если заменили его на другой четко видимый стиль (box-shadow, border).

  h2:focus {
      outline: 3px solid #0056cc;
      outline-offset: 2px;
      background-color: #f0f8ff;
  }
  

• Семантика прежде всего. Если заголовок выполняет действие (например, открывает/закрывает), рассмотрите возможность использования семантической кнопки (<button>) с заголовком внутри, а не заголовка с ролью кнопки. Это более надёжно для старых ассистивных технологий.

Вывод: Сфокусироваться на заголовке технически возможно и иногда необходимо, особенно для улучшения доступности (a11y) и управления пользовательским вниманием в динамических веб-приложениях. Ключевой инструмент — атрибут tabindex. Однако его применение должно быть осознанным и оправданным конкретными задачами навигации или интерактивности, всегда с учётом конечного пользователя и стандартов веб-разработки.