Навигация с клавиатуры и управление фокусом
Убедитесь, что все интерактивные элементы доступны через Tab, программно управляйте фокусом в диалогах и при маршрутизации и создавайте видимые индикаторы фокуса.
«Навигация с клавиатуры и управление фокусом» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Почему важна навигация с клавиатуры
Многие пользователи не могут работать с мышью: люди с двигательными нарушениями, пользователи программ чтения с экрана и опытные пользователи, предпочитающие клавиатуру. Если по вашему приложению нельзя перемещаться с клавиатуры, оно для них не работает.
Переход вперёд и назад
Tab переводит фокус на следующий интерактивный элемент. Shift+Tab переводит его на предыдущий. По умолчанию порядок соответствует порядку в DOM — не изменяйте это без необходимости, пусть DOM задаёт порядок перехода.
Что получает фокус по умолчанию
Встроенные интерактивные элементы могут получать фокус: a[href], button, input, select, textarea, summary. Для настраиваемых элементов нужен tabindex.
Значения tabindex
tabindex="0": элемент включается в порядок перехода на позиции DOM. tabindex="-1": на элемент можно перевести фокус только с помощью JS (программно, но не клавишей Tab). tabindex=">0": антипаттерн — создаёт запутанный порядок фокуса, никогда его не используйте.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Видимый индикатор фокуса
Никогда не убирайте контур фокуса, не предусмотрев замену. WCAG требует видимого индикатора для каждого элемента, который может получать фокус.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}Видимый фокус с клавиатуры
Псевдокласс :focus-visible срабатывает только тогда, когда фокус получен с клавиатуры, а не после щелчка мышью. Это позволяет сохранить чистое оформление при работе мышью и одновременно показывать фокус клавиатуры.
Ссылка для перехода к содержимому
Первым элементом, который может получать фокус, должна быть ссылка пропуска, чтобы пользователи клавиатуры могли перескочить через навигацию заголовка прямо к основному содержимому.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Ловушка фокуса в модальных окнах
Когда открывается модальное окно, фокус следует удерживать внутри него: переход с последнего элемента по Tab должен вести к первому, а переход с первого по Shift+Tab — к последнему. Нажатие Escape закрывает модальное окно.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Используйте элемент диалога
Встроенный элемент <dialog> в HTML автоматически обрабатывает ловушку фокуса, закрытие по Escape и затемнение фона модального окна.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Управление фокусом после смены маршрута
Одностраничные приложения не перезагружают страницу, поэтому пользователи программ чтения с экрана не получают сигнала о переходе. При смене маршрута переводите фокус на h1 новой страницы или на основной элемент.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();Порядок фокуса должен соответствовать визуальному порядку
Убедитесь, что порядок в DOM соответствует визуальному потоку. Если CSS меняет порядок элементов (порядок во flex, размещение в grid, абсолютное позиционирование), порядок перехода по Tab не совпадёт с ним — это запутает всех пользователей.
Проверьте, убрав мышь
Самая полезная проверка доступности: отключите мышь и попробуйте пользоваться всем приложением с помощью Tab, Shift+Tab, Enter, пробела и клавиш со стрелками. Если вы застряли, ваши пользователи тоже застрянут.
Быстрая проверка
Какой псевдокласс CSS позволяет оформлять контур фокуса только тогда, когда фокус получен с клавиатуры, а не после щелчка мышью?
Повторение: навигация с клавиатуры
Встроенные интерактивные элементы по умолчанию могут получать фокус. Используйте tabindex=0 только для настраиваемых компонентов; никогда не используйте tabindex>0. Всегда показывайте фокус — используйте :focus-visible. Добавляйте ссылку для перехода к содержимому. Удерживайте фокус в модальных окнах и восстанавливайте его после закрытия. По возможности используйте встроенный элемент диалога. При смене маршрута переводите фокус на h1 или основной элемент. Проверяйте интерфейс, убрав мышь.
Часто задаваемые вопросы
Урок «Навигация с клавиатуры и управление фокусом» бесплатный?
Да — полный текст урока «Навигация с клавиатуры и управление фокусом» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Навигация с клавиатуры и управление фокусом»?
Убедитесь, что все интерактивные элементы доступны через Tab, программно управляйте фокусом в диалогах и при маршрутизации и создавайте видимые индикаторы фокуса. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Навигация с клавиатуры и управление фокусом»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Уровни WCAG: A, AA и AAA
- Семантический HTML как основа
- Роли и атрибуты ARIA
- Навигация с клавиатуры и управление фокусом