Клавиатурная навигация в веб-интерфейсе — это задача управления качеством решения: сделать все значимые действия доступными без мыши и сохранить понятное положение фокуса. Решение по теме «клавиатурная навигация в веб-интерфейсе» проверяют на сценарии. В артефакте «карта клавиатурного маршрута» спорные предположения помечают заранее. Рабочий результат темы «клавиатурная навигация в веб-интерфейсе» — «карта клавиатурного маршрута». Требования и рекомендации хранятся раздельно.
Проверяемые основания
В контексте темы «клавиатурная навигация в веб-интерфейсе» Критерий WCAG 2.1.1 требует, чтобы функциональность по возможности управлялась через клавиатурный интерфейс. основание
В контексте темы «клавиатурная навигация в веб-интерфейсе» ARIA Authoring Practices описывает модели перемещения фокуса внутри составных виджетов и соглашения для клавиш. основание
В контексте темы «клавиатурная навигация в веб-интерфейсе» GOV.UK публикует правила доступных focus states для компонентов, которые команды расширяют или модифицируют. основание
В контексте темы «клавиатурная навигация в веб-интерфейсе» WCAG 2.2 включает требования к отсутствию клавиатурных ловушек и видимости фокуса в интерактивном контенте. основание
Источники задают границы для «карта клавиатурного маршрута». Порядок темы «клавиатурная навигация в веб-интерфейсе» остаётся редакционной схемой.
Рабочая модель
Порядок фокуса. В артефакте «карта клавиатурного маршрута» блок «Порядок фокуса» описывает последовательность, соответствующая чтению и задаче. Тема «клавиатурная навигация в веб-интерфейсе» требует примера в пользовательском пути. Вывод по «Порядок фокуса» проверяют отдельно.
Видимость. Компонент «Видимость» темы «клавиатурная навигация в веб-интерфейсе» охватывает контрастный индикатор на любых поверхностях. В артефакте «карта клавиатурного маршрута» добавляют контрпример. Границу «Видимость» не оставляют подразумеваемой.
Семантика. Часть «Семантика» для темы «клавиатурная навигация в веб-интерфейсе» фиксирует нативные элементы или корректно реализованные роли. Артефакт «карта клавиатурного маршрута» связывает её с переходом. Ошибку блока «Семантика» описывают конкретно.
Сложные виджеты. При разборе темы «клавиатурная навигация в веб-интерфейсе» раздел «Сложные виджеты» включает внутренняя навигация меню, вкладок, таблиц и списков. Проверку проводят на продукте. В артефакте «карта клавиатурного маршрута» сохраняют открытый вопрос по «Сложные виджеты».
Возврат. Для темы «клавиатурная навигация в веб-интерфейсе» элемент «Возврат» означает предсказуемое положение после диалога или удаления. Артефакт «карта клавиатурного маршрута» связывает его с реальным состоянием. Риск блока «Возврат» получает владельца.
Защита от ловушек. В артефакте «карта клавиатурного маршрута» блок «Защита от ловушек» описывает возможность покинуть каждый интерактивный контур. Тема «клавиатурная навигация в веб-интерфейсе» требует примера в пользовательском пути. Вывод по «Защита от ловушек» проверяют отдельно.
Порядок работы
1. Пройти критический сценарий только клавишей tab. Этап 1 темы «клавиатурная навигация в веб-интерфейсе» предполагает пройти критический сценарий только клавишей Tab. Результат в артефакте «карта клавиатурного маршрута» сверяют с задачей. Ограничение помечают явно.
2. Проверить обратный маршрут shift+tab. В артефакте «карта клавиатурного маршрута» действие 2 формулируют так: проверить обратный маршрут Shift+Tab. Проверка относится к теме «клавиатурная навигация в веб-интерфейсе». Риск остаётся видимым.
3. Зафиксировать управление сложными виджетами. Шаг 3 для темы «клавиатурная навигация в веб-интерфейсе» — зафиксировать управление сложными виджетами. Команда обновляет «карта клавиатурного маршрута». Ссылка на макет не заменяет критерий.
4. Проверить открытие, закрытие и возврат фокуса. В теме «клавиатурная навигация в веб-интерфейсе» шаг 4 требует проверить открытие, закрытие и возврат фокуса. Изменение «карта клавиатурного маршрута» подтверждают примером. Неизвестное условие получает владельца.
5. Испытать длинные страницы и динамические обновления. Для «карта клавиатурного маршрута» шаг 5 означает: испытать длинные страницы и динамические обновления. Его применяют к теме «клавиатурная навигация в веб-интерфейсе». Расхождение записывают отдельно.
6. Добавить клавиатурный сценарий в приёмку. Этап 6 темы «клавиатурная навигация в веб-интерфейсе» предполагает добавить клавиатурный сценарий в приёмку. Результат в артефакте «карта клавиатурного маршрута» сверяют с задачей. Ограничение помечают явно.
Переход к примеру для «карта клавиатурного маршрута» фиксируют отдельной проверкой темы «клавиатурная навигация в веб-интерфейсе».
Практический пример
Редакционный пример для «карта клавиатурного маршрута» в теме «клавиатурная навигация в веб-интерфейсе»: В панели фильтров пользователь открывал всплывающее окно, но после закрытия фокус возвращался в начало страницы. Дизайнер добавил состояние инициатора и правило возврата, а разработчик связал его с реальной кнопкой. Повторный проход клавиатурой перестал требовать десятков лишних переходов.
Пример темы «клавиатурная навигация в веб-интерфейсе» показывает роль «карта клавиатурного маршрута». Для «карта клавиатурного маршрута» перенос вывода требует нового основания.
Разбор «карта клавиатурного маршрута» начинается с элемента «Порядок фокуса»: команда уточняет последовательность, соответствующая чтению и задаче. Затем элемент «Видимость» сопоставляют с условием «контрастный индикатор на любых поверхностях». Эти записи разделяют.
Следующим действием становится «проверить обратный маршрут Shift+Tab». Его результат проверяют критерием «порядок соответствует визуальной и смысловой структуре». Ошибка «менять порядок tabindex положительными числами» рассматривается как отдельный риск темы «клавиатурная навигация в веб-интерфейсе», а ограничение «макет не показывает фактическую семантику DOM» остаётся видимым в итоговом решении. Для «карта клавиатурного маршрута» это сохраняет проверяемость после реализации.
Контрольные вопросы
- Для темы «клавиатурная навигация в веб-интерфейсе» какой пользовательский риск уменьшается? В артефакте «карта клавиатурного маршрута» ответ связывают со сценарием «клавиатурная навигация в веб-интерфейсе». Непроверенное мнение помечают.
- В артефакте «карта клавиатурного маршрута» какие части подтверждены наблюдением? В артефакте «карта клавиатурного маршрута» ответ связывают со сценарием «клавиатурная навигация в веб-интерфейсе». Непроверенное мнение помечают.
- Для решения «клавиатурная навигация в веб-интерфейсе» какое событие требует пересмотра? В артефакте «карта клавиатурного маршрута» ответ связывают со сценарием «клавиатурная навигация в веб-интерфейсе». Непроверенное мнение помечают.
- В артефакте «карта клавиатурного маршрута» кто проверяет результат после разработки? В артефакте «карта клавиатурного маршрута» ответ связывают со сценарием «клавиатурная навигация в веб-интерфейсе». Непроверенное мнение помечают.
Типовые ошибки
- Менять порядок tabindex положительными числами. Тема «клавиатурная навигация в веб-интерфейсе»: ошибка затрагивает «Видимость». В артефакте «карта клавиатурного маршрута» хранят последствие и исправление.
- Рисовать фокус только для некоторых компонентов. Тема «клавиатурная навигация в веб-интерфейсе»: ошибка затрагивает «Семантика». В артефакте «карта клавиатурного маршрута» хранят последствие и исправление.
- Делать div интерактивным без полного поведения. Тема «клавиатурная навигация в веб-интерфейсе»: ошибка затрагивает «Сложные виджеты». В артефакте «карта клавиатурного маршрута» хранят последствие и исправление.
- Перемещать фокус без действия пользователя. Тема «клавиатурная навигация в веб-интерфейсе»: ошибка затрагивает «Возврат». В артефакте «карта клавиатурного маршрута» хранят последствие и исправление.
- Запирать пользователя внутри модального окна после ошибки. Тема «клавиатурная навигация в веб-интерфейсе»: ошибка затрагивает «Защита от ловушек». В артефакте «карта клавиатурного маршрута» хранят последствие и исправление.
Критерии качества
- Каждое действие достижимо с клавиатуры. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «пройти критический сценарий только клавишей Tab». Результат сохраняют в артефакте «карта клавиатурного маршрута».
- Порядок соответствует визуальной и смысловой структуре. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «проверить обратный маршрут Shift+Tab». Результат сохраняют в артефакте «карта клавиатурного маршрута».
- Индикатор фокуса виден на всех темах. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «зафиксировать управление сложными виджетами». Результат сохраняют в артефакте «карта клавиатурного маршрута».
- Виджеты следуют привычной модели клавиш. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «проверить открытие, закрытие и возврат фокуса». Результат сохраняют в артефакте «карта клавиатурного маршрута».
- После закрытия контекста фокус возвращается логично. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «испытать длинные страницы и динамические обновления». Результат сохраняют в артефакте «карта клавиатурного маршрута».
- Ни один сценарий не создаёт клавиатурную ловушку. Тема «клавиатурная навигация в веб-интерфейсе»: проверка следует за шагом «добавить клавиатурный сценарий в приёмку». Результат сохраняют в артефакте «карта клавиатурного маршрута».
Ограничения применимости
- Макет не показывает фактическую семантику dom. Тема «клавиатурная навигация в веб-интерфейсе» ограничена этим условием. В артефакте «карта клавиатурного маршрута» перепроверяют блок «Порядок фокуса».
- Нестандартный виджет требует разработки и тестирования. Тема «клавиатурная навигация в веб-интерфейсе» ограничена этим условием. В артефакте «карта клавиатурного маршрута» перепроверяют блок «Видимость».
- Браузеры и ассистивные технологии различаются. Тема «клавиатурная навигация в веб-интерфейсе» ограничена этим условием. В артефакте «карта клавиатурного маршрута» перепроверяют блок «Семантика».
- Горячие клавиши могут конфликтовать с платформой. Тема «клавиатурная навигация в веб-интерфейсе» ограничена этим условием. В артефакте «карта клавиатурного маршрута» перепроверяют блок «Сложные виджеты».
- Полная проверка возможна только в работающем интерфейсе. Тема «клавиатурная навигация в веб-интерфейсе» ограничена этим условием. В артефакте «карта клавиатурного маршрута» перепроверяют блок «Возврат».
Вывод
Тема «клавиатурная навигация в веб-интерфейсе» использует «карта клавиатурного маршрута». Стартовый блок — «Порядок фокуса». Первое действие: «пройти критический сценарий только клавишей Tab». Результат принимают по критерию «каждое действие достижимо с клавиатуры». Ограничение «макет не показывает фактическую семантику DOM» сохраняют явно.
