Порядок фокуса в HTML - управление фокусом через tabindex

Введение

Порядок фокуса в HTML определяет, как элементы на странице получают фокус при навигации с клавиатуры, обычно с помощью клавиши Tab. От этого напрямую зависит, насколько удобно пользователю перемещаться по интерфейсу без мыши и насколько ваш сайт доступен для людей с ограниченными возможностями.

Атрибут tabindex позволяет управлять этим порядком, добавлять фокус к элементам, которые по умолчанию его не получают, и даже программно задавать приоритеты. Вместе с этим появляется риск "сломать" естественный порядок, запутать пользователей и нарушить рекомендации по доступности.

Здесь вы разберетесь, как работает tabindex, почему он важен для UX и доступности, какие значения можно задавать, когда лучше вообще его не использовать и как тестировать фокус на странице. Я буду опираться на практические примеры, чтобы вы могли сразу применить знания в работе.

Что такое фокус и как он работает в HTML

Что такое фокус

Фокус в вебе — это состояние элемента, который "активен" для взаимодействия с клавиатурой. Когда элемент в фокусе, нажатия клавиш (Enter, Space, стрелки и т.д.) обрабатываются именно им.

Вы видите это как:

• рамку вокруг кнопки или ссылки;
• подсветку поля ввода;
• иногда изменение фона элемента.

Важно понимать: фокус — это не только визуальный эффект, это часть логики взаимодействия. Если элемент нельзя сфокусировать, до него нельзя "добраться" с клавиатуры.

Какие элементы по умолчанию фокусируемы

Многие элементы HTML без tabindex уже могут получать фокус:

• ссылки с атрибутом href
  <a href="...">...
• кнопки
  <button>, <input type="button|submit|reset">
• поля форм
  <input>, <textarea>, <select>, <option>
• элементы с contenteditable="true"
• элементы с атрибутом tabindex (о нем дальше).

Пример списка элементов, между которыми можно перемещаться клавишей Tab:

<form>
  <!-- Это поле ввода по умолчанию фокусируемо -->
  <input type="text" placeholder="Введите имя" />

  <!-- Кнопка тоже фокусируемая -->
  <button type="submit">
    Отправить
  </button>

  <!-- Ссылка с href участвует в порядке фокуса -->
  <a href="/help">
    Помощь
  </a>
</form>

// Вы можете установить фокус программно
const input = document.querySelector('input');
// Перед тем, как вызвать focus, убедитесь, что элемент видим и доступен
input.focus();

Порядок фокуса без tabindex

Без использования tabindex порядок фокуса строится так:

1. Сначала берутся все элементы, которые могут быть сфокусированы по умолчанию.
2. Порядок соответствует источнику HTML — сверху вниз, слева направо, в том порядке, как элементы идут в DOM.
3. Вложенность не меняет порядок — важна последовательность в дереве.

То есть, если вы просто пишете семантически корректный HTML без tabindex, вы уже получаете адекватный, предсказуемый порядок фокуса. Часто этого достаточно.

Атрибут tabindex: назначение и общий обзор

Атрибут tabindex позволяет:

• включать фокус для элементов, которые его не имеют по умолчанию (например, div);
• исключать элементы из порядка фокуса;
• явно задавать порядок фокусировки с клавиатуры.

Смотрите, я покажу вам простой пример:

<div tabindex="0">
  Я div, но меня можно сфокусировать табом
</div>

<button>
  Обычная кнопка
</button>

<div tabindex="-1">
  Я не попаду в фокус при нажатии Tab,
  но меня можно сфокусировать из JS
</div>

Основные варианты значений tabindex:

• 0 — элемент становится фокусируемым и встраивается в естественный порядок фокуса;
• отрицательное число (обычно -1) — элемент фокусируется только программно, но не через Tab;
• положительное число (> 0) — задает приоритет в порядке фокуса, выводя элемент "вперед" относительно остальных.

Давайте теперь по очереди разберем каждый случай.

tabindex="0" — безопасный и рекомендуемый вариант

Что делает tabindex="0"

Когда вы ставите tabindex="0":

• элемент становится фокусируемым;
• он попадает в общий поток фокуса вместе с остальными элементами;
• его место определяется положением в DOM, а не самим числом 0.

То есть 0 не меняет порядок, он просто "подключает" элемент к уже существующему порядку.

Пример:

<a href="#first">Первая ссылка</a>

<!-- Блок, который без tabindex не был бы в порядке фокуса -->
<div tabindex="0">
  Важный блок, на который нужно уметь перейти клавиатурой
</div>

<button>Кнопка после div</button>

Порядок фокуса будет: ссылка → div с tabindex="0" → кнопка.

Когда использовать tabindex="0"

1. Кастомные элементы управления

Например, если вы делаете самописный выпадающий список на div/span, но хотите, чтобы он вел себя как нормальный контрол:

<div
  class="custom-select"
  tabindex="0"
  aria-haspopup="listbox"
  aria-expanded="false"
>
  <!-- Здесь выводится выбранное значение -->
  Выберите значение
</div>

const select = document.querySelector('.custom-select');

// При нажатии Enter или Space открываем список
select.addEventListener('keydown', (event) => {
  // Здесь мы проверяем код клавиши
  if (event.key === 'Enter' || event.key === ' ') {
    // Открываем (или закрываем) список
    // event.preventDefault нужно, чтобы не прокручивалась страница при Space
    event.preventDefault();
    // Здесь вы реализуете свою логику открытия
  }
});

2. Секции, которые нужно сделать доступными для чтения с клавиатуры

Например, важный блок с результатом вычислений или ошибками:

<div
  tabindex="0"
  aria-live="polite"
>
  <!-- Сообщения об ошибках или результатах -->
  Ошибка при сохранении данных
</div>

3. Внутренние области с прокруткой

Если у вас есть блок с overflow и вы хотите, чтобы пользователь мог прокручивать его с клавиатуры:

<div
  class="scroll-area"
  tabindex="0"
  style="max-height: 200px; overflow: auto;"
>
  <!-- Длинный текст -->
</div>

Практические советы по tabindex="0"

• Используйте его для элементов, которые действительно должны быть интерактивными или важными для навигации.
• Не размечайте tabindex="0" на каждом div подряд — порядок фокуса станет перегруженным.
• Обычно tabindex="0" хорошо сочетается с ARIA-атрибутами и дополнительной обработкой клавиш в JS.

tabindex="-1" — фокус только программно

Что делает tabindex="-1"

Если задать tabindex="-1":

• элемент не будет попадать в порядок фокуса при нажатии Tab;
• его все равно можно сфокусировать программно через element.focus().

Давайте разберемся на примере.

<div
  id="dialog"
  role="dialog"
  aria-modal="true"
  tabindex="-1"
>
  <!-- Содержимое модального окна -->
  <h2>Настройки</h2>
  <p>Текст внутри модального диалога</p>
  <button id="close">
    Закрыть
  </button>
</div>

// Предположим, что вы открываете модальное окно по кнопке
const dialog = document.getElementById('dialog');

// Когда модалка открывается, переводим фокус внутрь
function openDialog() {
  // С помощью focus можно перейти в элемент с tabindex="-1"
  dialog.focus();
}

// При закрытии возвращайте фокус назад
const triggerButton = document.getElementById('open-dialog');

function closeDialog() {
  dialog.style.display = 'none';
  // Возвращаем фокус в кнопку, которая открыла модалку
  triggerButton.focus();
}

Здесь я размещаю пример, чтобы вам было проще понять: tabindex="-1" нужен, когда вы хотите управлять фокусом вручную.

Когда использовать tabindex="-1"

1. Модальные окна и диалоги

Часто сам контейнер диалога фокусируем через tabindex="-1", чтобы сразу переместить фокус внутрь окна.

2. Скрытые области, доступные по горячим клавишам

Например, панель уведомлений, к которой пользователь переходит по Alt+N, а не через Tab.

3. Якорные переходы с установкой фокуса

Иногда вам нужно не только проскроллить к секции, но и сразу отдать ей фокус:

<h2 id="section-title" tabindex="-1">
  Раздел с результатами поиска
</h2>

// После выполнения поиска
const sectionTitle = document.getElementById('section-title');
sectionTitle.focus();

Обратите внимание, как этот фрагмент кода решает задачу: вы не добавляете элемент в порядок Tab, но по определенному событию фокусируете его.

Особенности tabindex="-1"

• Такой элемент не доступен через Tab, но доступен для ассистивных технологий при вызове focus().
• Это удобный способ сделать элемент "получателем" фокуса для скринридеров в нужный момент.
• Не используйте "-1" для кнопок и ссылок, которые должны быть доступны всем пользователям — это ухудшит доступность.

tabindex > 0 — почему это почти всегда плохая идея

Как работает положительный tabindex

Если вы задаете tabindex больше нуля, например 1, 2, 5:

• браузер сначала пройдет по элементам с положительным tabindex в порядке возрастания числа;
• только потом перейдет к остальным элементам в обычном DOM-порядке.

Теперь вы увидите, как это выглядит в коде:

<!-- Этот элемент будет в фокусе первым -->
<button tabindex="1">
  Первая по фокусу
</button>

<!-- Этот — вторым -->
<a href="#" tabindex="2">
  Вторая по фокусу
</a>

<!-- А это обычный input без tabindex -->
<input type="text" placeholder="Я буду после tabindex 1 и 2" />

Проблема в том, что любое изменение разметки, появление новых элементов, перестановки блоков ломают ваш "ручной" порядок.

Почему не рекомендуется использовать положительный tabindex

1. Трудно поддерживать

Каждая новая кнопка, которая вдруг должна стоять "между" существующими по фокусу, требует пересчета tabindex у части элементов.

2. Несоответствие визуальному порядку

Интерфейс может выглядеть в одном порядке, а фокус прыгать в другом, что путает пользователей.

3. Конфликты с динамическими компонентами

Формы, модалки, вкладки, которые добавляются на страницу динамически, часто не учитывают ваши ручные tabindex и начинают вести себя непредсказуемо.

4. Проблемы с доступностью (a11y)

Рекомендации WCAG и WAI-ARIA советуют избегать положительных tabindex и строить порядок фокуса по DOM и семантике.

Когда положительный tabindex все же используют

Есть очень редкие сценарии, например:

• старые легаси-интерфейсы, где порядок уже жёстко прописан;
• встроенные системы, где раскладка элементов не соответствует DOM и нет возможности ее менять.

Но если вы проектируете новую систему, лучше:

• собирать элементы в правильном DOM-порядке;
• использовать tabindex="0" и "-1", а не положительные значения.

Как правильно проектировать порядок фокуса

Следуйте визуальному и логическому порядку

Самое важное правило — фокус должен идти:

1. Слева направо (для языков с таким направлением письма).
2. Сверху вниз.
3. От основного контента к дополнительному.

Если пользователь смотрит на экран и нажимает Tab, он ожидает, что фокус перейдет к "следующему видимому элементу". Если этого не происходит, интерфейс становится трудным для использования.

Используйте семантически правильные элементы

Часто вам вообще не нужно трогать tabindex, если вы:

• используете <button> вместо div для кликабельных кнопок;
• используете <a href="..."> вместо span с обработчиком клика;
• используете <label> и <fieldset> для форм вместо произвольных div.

Такие элементы по умолчанию участвуют в порядке фокуса и правильно описаны для скринридеров.

Пример более семантической разметки вместо ручного tabindex:

<!-- Плохо - div под кнопку -->
<div
  class="btn"
  tabindex="0"
  role="button"
>
  Сохранить
</div>

<!-- Лучше - настоящая кнопка -->
<button class="btn">
  Сохранить
</button>

Во втором случае вы вообще можете не трогать tabindex.

Планирование фокуса для сложных компонентов

Давайте посмотрим, что происходит в следующем примере сложного компонента — например, выпадающего меню.

<nav aria-label="Главная навигация">
  <button
    class="menu-toggle"
    aria-expanded="false"
    aria-controls="main-menu"
  >
    Меню
  </button>

  <ul
    id="main-menu"
    hidden
  >
    <li><a href="/home">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

Здесь:

• кнопка по умолчанию в порядке фокуса;
• ссылки внутри списка — тоже;
• нет ни одного tabindex, но порядок уже логичный и удобный.

Если меню скрыто (через hidden), ссылки не получают фокус. Когда вы показываете меню, они автоматически становятся доступны через Tab. Вам не нужно специально управлять tabindex.

Когда tabindex действительно нужен

Чаще всего:

• для кастомных контролов (кнопки, ссылки, списки на div/span) — tabindex="0";
• для контейнеров модалок и внутренних областей — tabindex="-1";
• для секций, к которым вы "перепрыгиваете" фокусом через JS — tabindex="-1";
• для прокручиваемых областей — tabindex="0", чтобы стрелки и PageUp/PageDown работали внутри.

Визуальное отображение фокуса и outline

Почему нельзя просто убрать outline

Многие дизайнеры не любят стандартную синюю (или пунктирную) рамку вокруг элементов в фокусе и предлагают убрать ее:

button:focus,
a:focus {
  outline: none;
}

Это делает интерфейс практически непригодным для людей, которые пользуются только клавиатурой — они просто не видят, на каком элементе находится фокус.

Если вы хотите кастомизировать стиль, делайте замену, а не полное отключение:

button:focus-visible,
a:focus-visible {
  outline: 2px solid #005fcc; /* Яркая рамка */
  outline-offset: 2px;
}

Комментарий:

/* 
 focus-visible срабатывает, когда фокус получен с клавиатуры,
 но не при клике мышкой в большинстве браузеров.
 Это позволяет не "мигать" рамками при кликах, но сохранять удобство для клавиатурной навигации.
*/

Как связаны tabindex и стили фокуса

Если вы сделали элемент фокусируемым с помощью tabindex, позаботьтесь о стилях:

<div
  class="card"
  tabindex="0"
>
  Кликабельная карточка
</div>

.card {
  border: 1px solid #ccc;
  padding: 16px;
}

/* 
 Здесь мы показываем, что карточка в фокусе.
 Пользователю будет понятно, на чем сейчас находится клавиатура.
*/
.card:focus-visible {
  outline: 2px solid #009688;
  outline-offset: 4px;
}

Как видите, этот код выполняет сразу две задачи: делает блок доступным с клавиатуры и визуально показывает фокус.

Управление фокусом из JavaScript

Основные методы

Доступ к фокусу из JS осуществляется через:

• element.focus() — установить фокус на элемент;
• element.blur() — снять фокус с элемента;
• document.activeElement — посмотреть, какой элемент сейчас в фокусе.

Пример:

// Здесь мы получаем ссылку на кнопку
const button = document.querySelector('button');

// Устанавливаем фокус на кнопку
button.focus();

// Смотрим, какой элемент сейчас в фокусе
console.log(document.activeElement); // Выведет ту же кнопку

Типичные сценарии использования

1. Перемещение фокуса в модальное окно при открытии

const dialog = document.getElementById('dialog');

// Убедитесь, что у диалога есть tabindex="-1"
function openDialog() {
  dialog.removeAttribute('hidden');
  // Сразу переводим фокус в диалог
  dialog.focus();
}

2. Возврат фокуса на вызвавший элемент

let lastFocusedElement = null;

function openDialog(trigger) {
  lastFocusedElement = trigger;
  dialog.removeAttribute('hidden');
  dialog.focus();
}

function closeDialog() {
  dialog.setAttribute('hidden', 'true');
  // Возвращаем фокус туда, откуда диалог был открыт
  if (lastFocusedElement) {
    lastFocusedElement.focus();
  }
}

3. Обработка горячих клавиш в кастомных контролах

const item = document.querySelector('.custom-item');

// Здесь делаем элемент фокусируемым
item.setAttribute('tabindex', '0');

item.addEventListener('keydown', (event) => {
  // Обрабатываем нажатие Enter
  if (event.key === 'Enter') {
    // Здесь ваша логика действия по Enter
  }

  // Обрабатываем пробел
  if (event.key === ' ') {
    event.preventDefault(); // Чтобы страница не прокрутилась
    // Ваша логика действия по Space
  }
});

tabindex и доступность (a11y)

Основные принципы

1. Навигация должна быть возможна полностью с клавиатуры

Пользователь должен иметь возможность:

• перейти ко всем важным интерактивным элементам;
• выполнить основные действия без мыши;
• понимать, где находится фокус.

2. Порядок фокуса должен быть логичным и предсказуемым

Любые неожиданные "прыжки", возвраты или пропуски сильно затрудняют взаимодействие.

3. Семантика и ARIA важны не меньше tabindex

Один лишь атрибут tabindex не сделает интерфейс доступным, если:

• вы используете несемантичные элементы;
• не описываете состояние (открыто, закрыто, выбрано) через ARIA;
• скрываете элементы визуально, но оставляете их в порядке фокуса.

Частые ошибки с tabindex в контексте доступности

1. Присвоение tabindex интерактивным элементам "просто так"

Например:

<button tabindex="5">
  Сохранить
</button>

Кнопке не нужен tabindex, если порядок уже правильный. Это только усложняет поддержку.

2. Удаление фокуса с элемента через tabindex="-1"

<button tabindex="-1">
  Нажми меня
</button>

Такую кнопку невозможно сфокусировать с клавиатуры — это нарушение доступности.

3. Фокус на скрытых элементах

Если элемент визуально скрыт (display none или hidden), он обычно не должен получать фокус.

Следите, чтобы при показе/скрытии не оставалось "висящего" фокуса на невидимых частях интерфейса.

Рекомендации по WCAG и WAI-ARIA

Если обобщить:

• не используйте tabindex > 0, если нет крайней необходимости;
• используйте tabindex="0" для кастомных контролов;
• используйте tabindex="-1" для контейнеров, куда вы специально переводите фокус через JS;
• следите за визуальным отображением фокуса через outline или кастомные стили.

Практические примеры правильного и неправильного использования tabindex

Пример 1. "Сломанный" порядок фокуса с tabindex > 0

<!-- Визуально эта кнопка справа, но по фокусу будет первой -->
<button tabindex="1">
  Отправить
</button>

<!-- Эта ссылка находится выше на экране, но будет второй по фокусу -->
<a href="/help" tabindex="2">
  Нужна помощь
</a>

<!-- Поле формы вообще без tabindex -->
<input type="text" placeholder="Ваш email" />

Здесь пользователь сначала попадет на кнопку "Отправить", хотя логично начать с ввода email. Такое поведение сбивает с толку.

Правильнее:

<!-- Сначала поле ввода -->
<input type="text" placeholder="Ваш email" />

<!-- Потом ссылка -->
<a href="/help">
  Нужна помощь
</a>

<!-- И только потом кнопка -->
<button>
  Отправить
</button>

Без единого tabindex порядок уже более логичный.

Пример 2. Кастомная кнопка на div

Покажу вам, как это реализовано на практике.

<div
  class="btn-primary"
  tabindex="0"
  role="button"
  aria-pressed="false"
>
  Нажмите меня
</div>

const btn = document.querySelector('.btn-primary');

btn.addEventListener('click', () => {
  // Здесь логика по клику мышью
});

btn.addEventListener('keydown', (event) => {
  // Здесь разрешаем активацию по Enter и Space
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    // Вызываем ту же логику, что и по клику
    btn.click();
  }
});

Комментарии:

• tabindex="0" делает div фокусируемым;
• role="button" сообщает ассистивным технологиям, что это кнопка;
• обработчик keydown добавляет поддержку клавиатуры.

Если есть возможность, лучше заменить это на <button> — тогда многие вещи будут работать "из коробки".

Пример 3. Модальное окно с правильным фокусом

<button id="open-settings">
  Открыть настройки
</button>

<div
  id="settings-dialog"
  role="dialog"
  aria-modal="true"
  aria-labelledby="settings-title"
  hidden
  tabindex="-1"
>
  <h2 id="settings-title">
    Настройки
  </h2>

  <label>
    <span>Имя пользователя</span>
    <input type="text" />
  </label>

  <button id="close-settings">
    Закрыть
  </button>
</div>

const openButton = document.getElementById('open-settings');
const closeButton = document.getElementById('close-settings');
const dialog = document.getElementById('settings-dialog');

let lastFocusedElement = null;

openButton.addEventListener('click', () => {
  // Запоминаем, откуда пришли
  lastFocusedElement = document.activeElement;
  dialog.hidden = false;
  // Переводим фокус внутрь диалога
  dialog.focus();
});

closeButton.addEventListener('click', () => {
  dialog.hidden = true;
  // Возвращаем фокус
  if (lastFocusedElement) {
    lastFocusedElement.focus();
  }
});

Здесь tabindex="-1" на контейнере диалога помогает перевести фокус внутрь при открытии, но сам контейнер не мешает навигации Tab, когда диалог закрыт.

Заключение

tabindex — мощный инструмент управления фокусом в HTML, но одновременно источник множества ошибок в интерфейсе. Ключ к его грамотному использованию — понимание базового поведения фокуса и приоритет семантики над ручным вмешательством.

Главные практические выводы:

• Стройте логичный DOM-порядок и используйте семантические элементы — это гораздо важнее, чем расставлять tabindex.
• tabindex="0" применяйте для элементов, которые вы сознательно делаете интерактивными, но которые по умолчанию не фокусируются.
• tabindex="-1" используйте для элементов, куда нужно переводить фокус программно, но не включать их в обычную навигацию Tab.
• Избегайте положительных значений tabindex, чтобы не усложнять поддержку и не ломать доступность.
• Всегда заботьтесь о визуальном отображении фокуса — не отключайте outline без адекватной замены.
• При сложных сценариях (модалки, виджеты, кастомные элементы) комбинируйте tabindex с JavaScript, ARIA-атрибутами и аккуратной логикой управления фокусом.

Если вы начнете относиться к фокусу как к полноценной части UX и заранее продумывать порядок навигации, вам редко понадобится "ломать" естественное поведение браузера, а интерфейсы станут удобнее для всех пользователей.

Частозадаваемые технические вопросы по теме tabindex

Как сделать так, чтобы фокус пропускал определенный элемент

Если у вас есть элемент, который по умолчанию фокусируем (например, кнопка или ссылка), но вы хотите исключить его из навигации с клавиатуры:

<button tabindex="-1">
  Визуально есть, но Tab меня пропустит
</button>

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

Как сделать элемент фокусируемым только с мышью, но не с клавиатуры

Полностью разделить мышь и клавиатуру стандартными средствами нельзя. Но вы можете:

• оставить элемент интерактивным по клику;
• убрать его из порядка фокуса через tabindex="-1".

<button
  tabindex="-1"
  onclick="doSomething()"
>
  Кнопка только для мыши
</button>

Такой подход не рекомендуется для важных действий, потому что пользователи клавиатуры не смогут дойти до этой кнопки.

Можно ли менять tabindex динамически из JavaScript

Да, вы можете управлять tabindex через JS:

const el = document.querySelector('.item');

// Установить tabindex
el.setAttribute('tabindex', '0');

// Удалить tabindex
el.removeAttribute('tabindex');

Обычно это используют для сложных компонентов, например, каруселей, когда активный элемент должен быть фокусируемым, а остальные — нет. Следите, чтобы такие изменения были предсказуемыми для пользователя.

Как запретить фокус внутри определенного контейнера (например, пока он неактивен)

Самый надежный способ — сделать вложенные интерактивные элементы неактивными:

• для элементов формы — disabled;
• для прочих — tabindex="-1" и игнорирование событий.

Пример:

<fieldset disabled>
  <input type="text" />
  <button>Сохранить</button>
</fieldset>

Комментарий:

<!-- disabled на fieldset делает все элементы формы внутри некликабельными и нефокусируемыми -->

Если это не форма, вам придется вручную управлять tabindex и обработчиками событий на дочерних элементах.

Почему скринридер ведет себя странно при использовании tabindex и как это исправить

Если скринридер "прыгает" по странице неожиданным образом:

1. Проверьте, не используете ли вы положительные значения tabindex.
2. Убедитесь, что скрытые элементы (display none, hidden) не остаются фокусируемыми.
3. Проверьте наличие корректных ARIA-ролей и связей (aria-labelledby, aria-controls).
4. Уберите лишние tabindex там, где они не нужны, и положитесь на семантику.

Часто проблемы исчезают, когда вы:

• возвращаете естественный DOM-порядок;
• ограничиваетесь значениями tabindex="0" и "-1";
• проверяете поведение в нескольких скринридерах (NVDA, JAWS, VoiceOver).