HTML Academy · Урок

tabindex и accesskey

Управляйте порядком клавиатурной навигации и сочетаниями клавиш

«tabindex и accesskey» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Навигация с клавиатуры

Пользователи без мыши используют клавишу Tab для навигации по интерактивным элементам:

Естественно фокусируемые элементы: <a href>, <button>, <input>, <select>, <textarea>
Неинтерактивные элементы (<div>, <span>) не входят в порядок перехода по Tab
tabindex определяет, будет ли элемент находиться в порядке перехода по Tab и где именно

tabindex="0"

tabindex="0" добавляет неинтерактивный элемент в естественный порядок перехода по Tab:

<div tabindex="0" role="button" onclick="handleClick()">
  Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->

<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>

tabindex="-1"

tabindex="-1" позволяет программно устанавливать фокус на элемент, но исключает его из порядка перехода по Tab:

<div id="modal" tabindex="-1" role="dialog">
  <!-- modal content -->
</div>

<script>
// Open modal and send focus to it:
document.getElementById('modal').focus();
// Modal is now focused but not in the normal tab sequence
</script>

Положительные значения tabindex — избегайте их

Положительные значения tabindex (например, tabindex="3") задают собственный порядок перехода по Tab — избегайте их:

<!-- BAD: positive tabindex creates unpredictable order -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<!-- The tab order becomes: 1, 2, 3, then all tabindex=0 elements -->
<!-- This almost always confuses users and fails WCAG 2.4.3 -->

<!-- Fix the DOM order instead of using positive tabindex -->

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

Одностраничные приложения должны управлять фокусом вручную:

// When navigating to a new route:
document.querySelector('#main-content').focus();

// When opening a modal:
const modal = document.getElementById('modal');
modal.removeAttribute('hidden');
modal.querySelector('[autofocus], button, [tabindex]').focus();

// When closing a modal: return focus to the trigger
document.getElementById('open-btn').focus();

Ловушка фокуса в модальных окнах

Ограничьте фокус открытым модальным окном, чтобы Tab оставался внутри него:

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener('keydown', e => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  });
}

Атрибут accesskey

Атрибут accesskey назначает элементу сочетание клавиш:

<button accesskey="s">Submit</button>
<!-- On Windows: Alt+S focuses/activates the button -->
<!-- On Mac: Control+Option+S -->
<!-- On Firefox: Shift+Alt+S -->

<a href="/" accesskey="h">Home</a>

Ограничения accesskey

У accesskey есть существенные недостатки:

Клавиши активации различаются в разных браузерах и операционных системах
Возникают конфликты с сочетаниями клавиш браузера (например, Alt+F = меню «Файл»)
По умолчанию сочетание не объявляется программами чтения с экрана
На практике используется редко — если вы всё же применяете его, задокументируйте это

Видимые индикаторы фокуса

Никогда не скрывайте контуры фокуса — они необходимы пользователям клавиатуры:

/* BAD: removes focus outline for everyone */
* { outline: none; }

/* Better: style focus outlines, don't remove them */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
  border-radius: 3px;
}

/* :focus-visible only shows outline for keyboard navigation -->
/* Mouse clicks do not trigger :focus-visible in modern browsers */

Шаблон ссылки для пропуска

Такая ссылка позволяет пользователям клавиатуры пропустить повторяющуюся навигацию:

<a href="#main-content" class="skip-link">Skip to main content</a>

<nav>... long navigation ...</nav>

<main id="main-content" tabindex="-1">... content ...</main>

<!-- CSS: -->
<!--
.skip-link {
  position: absolute;
  top: -100%;
}
.skip-link:focus {
  top: 0;
}
-->

Атрибут autofocus

Атрибут autofocus переводит фокус на элемент при загрузке страницы:

<input type="search" autofocus placeholder="Search...">
<!-- Useful on search pages or forms with a single primary field -->
<!-- Use sparingly: it can disrupt users who rely on the page top for orientation -->
<!-- Only one element per page should have autofocus -->

Быстрая проверка

Какое значение tabindex позволяет устанавливать фокус на элемент с помощью JavaScript, но исключает его из обычной навигации клавишей Tab?

Итог: tabindex и accesskey

Основы доступности с клавиатуры:

tabindex="0" — добавляет элемент в естественный порядок перехода по Tab
tabindex="-1" — элемент можно сфокусировать программно, но он не входит в порядок перехода по Tab
Избегайте положительных значений tabindex
Никогда не удаляйте контуры :focus-visible
Добавляйте ссылки для пропуска навигации пользователям клавиатуры
accesskey доступен, но из-за конфликтов редко бывает практичным

Часто задаваемые вопросы

Урок «tabindex и accesskey» бесплатный?

Да — полный текст урока «tabindex и accesskey» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «tabindex и accesskey»?

Управляйте порядком клавиатурной навигации и сочетаниями клавиш Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «tabindex и accesskey»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy