Tab, Shift+Tab, Enter, Space: основные клавиши
Как пользователи клавиатуры перемещаются по элементам управления и активируют их
«Tab, Shift+Tab, Enter, Space: основные клавиши» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Нет мыши — не проблема
Многие люди никогда не пользуются мышью. Они управляют всем интернетом с помощью клавиатуры, поэтому каждый созданный Вами элемент управления должен работать только с клавишами. ⌨️
Tab перемещает вперёд
Самая важная клавиша — Tab. Каждое нажатие переводит фокус на следующий интерактивный элемент: ссылку, кнопку или поле формы.
Shift+Tab перемещает назад
Нажали что-то слишком быстро? Клавиша Shift+Tab перемещает фокус назад, к предыдущему элементу управления, поэтому пользователь всегда может вернуться туда, откуда пришёл.
Enter открывает ссылку
Когда фокус оказывается на ссылке, клавиша Enter активирует её. Это клавиатурный эквивалент щелчка по этой ссылке для перехода в новое место.
Кнопки принимают Enter и пробел
Настоящая кнопка особенна: она срабатывает и при нажатии Enter, и при нажатии пробела. Эта поддержка двух клавиш предоставляется встроенным элементом автоматически.
<button type="button">Save changes</button>Пробел переключает флажки
Для флажка или переключателя пробел служит клавишей переключения. Перейдите к нему с помощью Tab, нажмите пробел — и состояние отметки изменится.
<input type="checkbox" id="news"> <label for="news">Email me</label>Встроенные элементы работают сразу
Вот в чём преимущество: встроенные ссылки, кнопки и поля ввода автоматически реагируют на эти клавиши. Вам не нужно настраивать это самостоятельно.
Элемент div не получает фокус
Создайте поддельную кнопку из div — и Tab просто пропустит её. Обычные div и span невидимы для пользователей клавиатуры.
<div class="btn" onclick="save()">Save</div>Попробуйте прямо сейчас
Откройте любую страницу и несколько раз нажмите Tab. Проследите, как подсветка переходит от одного элемента управления к другому. Именно таким маршрутом следует пользователь клавиатуры.
Стрелки перемещают внутри группы
В группе переключателей клавиши со стрелками перемещают между вариантами, а Tab перескакивает через всю группу. Разные клавиши — разные задачи.
Клавиши должны работать ожидаемым образом
Пользователи привыкли к этим правилам повсюду, поэтому соблюдайте их. Элемент управления, который игнорирует Enter или пробел, кажется пользователю клавиатуры просто неработающим.
Быстрая проверка
Подумайте, как каждая клавиша работает со встроенным элементом управления.
Итоги: основные клавиши
Вы изучили основы работы с клавиатурой: Tab и Shift+Tab перемещают фокус, Enter открывает ссылки, а Enter или пробел активируют кнопки. Встроенные элементы предоставляют всё это автоматически. ✅
Часто задаваемые вопросы
Урок «Tab, Shift+Tab, Enter, Space: основные клавиши» бесплатный?
Да — полный текст урока «Tab, Shift+Tab, Enter, Space: основные клавиши» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Tab, Shift+Tab, Enter, Space: основные клавиши»?
Как пользователи клавиатуры перемещаются по элементам управления и активируют их Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Tab, Shift+Tab, Enter, Space: основные клавиши»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Tab, Shift+Tab, Enter, Space: основные клавиши
- Видимый фокус: никогда не скрывайте контур
- Логичный порядок Tab следует за содержимым
- Поиск клавиатурных ловушек