Ресурсы · 57
Диалоги и клавиатуры: проверка пути фокусировки
Проверяйте открытие, перемещение, закрытие и восстановление контекста в интерфейсах, прерывающих задачу.
Обновлено · 3 min
Чего помогает достичь это руководство
- Выбор правильного компонента
- Размещение понятного фокуса
- Разрешение закрытия
- Восстановление контекста
Быстрая проверка
- Необходимо ли модальное окно?
- Куда попадает фокус при открытии?
- Действительно ли фон инертен?
- Можно ли закрыть диалоговое окно с помощью клавиатуры?
- Куда возвращается фокус, если триггер исчезает?
Пошаговый метод
- 1
Выбор прерывания
Решение о том, нужна ли информация в модальном окне или она может оставаться на странице. Разделение модальных диалоговых окон, панелей и меню. Предпочтение отдается соответствующим нативным элементам и проверяется поведение; роль ARIA не создает взаимодействия автоматически.
Результат: выбор компонента и обоснование.
- 2
Имя и открытие
Привяжите доступное имя к видимому заголовку. Расположите фокус соответствующим образом: в начале структурированного контента, в полезном поле или в безопасном действии в зависимости от задачи. Открытие не должно прокручивать начало за пределы видимости.
Результат: протестированное открытие.
- 3
Навигация с помощью клавиатуры
В соответствии с шаблоном модального диалога W3C, клавиши Tab и Shift+Tab остаются внутри, а содержимое вне диалога инертно. Проверьте видимый фокус, логический порядок и отсутствие ловушек во вложенных элементах управления.
Результат: навигация вперед и назад.
- 4
Закрытие и восстановление
Обеспечьте видимое закрытие и ожидаемое поведение при выходе из диалога. Верните фокус к триггеру или логическому шагу, если триггер больше не существует. После отправки пользователи должны видеть, что изменилось и что может произойти дальше.
Результат: восстановленный фокус и контекст.
- 5
Тестирование ошибок и пространства
Включение длинных сообщений, недопустимых полей, мобильных клавиатур и масштабирования. Прокрутка не должна навсегда скрывать действия или заголовки. Ошибки должны быть понятными и доступными без потери введенных значений.
Результат: граничные случаи для узких экранов.
- 6
Проверка на странице
Тестирование интегрированного компонента с клавиатурой и вспомогательными технологиями, а не только в изолированной демонстрации. Проверка дублирования открытия и фокуса после многократного закрытия. Локальная приемка сама по себе не является подтверждением сертификации WCAG.
Результат: протокол приемки и известные пределы.
Многоразовый рабочий лист
Заполните ваши авторизованные наблюдения. Эти поля являются рабочим шаблоном, а не наблюдаемыми результатами.
| Поле | Информация для записи |
|---|---|
| Открытие | Триггер, заголовок и начальный фокус |
| Путешествие | Tab, Shift+Tab, инертный фон и видимый фокус |
| Закрытие | Escape, кнопка и логический возврат |
| Ограничения | Протестировано масштабирование, длинный контент, ошибки и помощь |
Вымышленный пример
Иллюстративная ситуация
Вымышленный пример: диалоговое окно подтверждает удаление строки, и его кнопка открытия исчезает.
Решение и ожидаемые доказательства
После подтверждения фокус возвращается к логическому следующему элементу или заголовку списка с объявленным результатом и видимым следующим шагом.
Различение механизмов
| Механизм | Назначение | Проверка или ограничение |
|---|---|---|
| Модальное диалоговое окно | Прерывание для ограниченной задачи | Инертный фон и ограниченный фокус |
| Немодальная панель | Сохранение доступного контекста | Согласованное перемещение фокуса |
| Раздел страницы | Отображение текущей информации | Часто проще для просмотра |
Показатели управления
| Показатель | Что он измеряет | Первое действие |
|---|---|---|
| Завершенные действия клавиатуры | Задачи, выполняемые без указателя | Исправление блокирующих факторов |
| Коррекция возврата фокуса | Закрытия, восстанавливающие полезный контекст | Обработка отсутствующих триггеров |
| Протестированы состояния краев | Масштабирование, ошибки и длинный контент | Пропуски документов |
Распространенные ошибки
- Добавление aria-modal без инертного контента
- Потеря фокуса после закрытия
- Блокирующий выход без четкого выхода
- Тестирование только мыши Открытие
Часто задаваемые вопросы
Достаточно ли нативного диалогового окна?
Оно обеспечивает полезное поведение, но именование, начальный фокус, содержимое, ошибки и интеграция все еще требуют тестирования.
Должна ли первая кнопка получать фокус?
Не всегда. Подходящая точка зависит от содержимого и задачи, особенно для необратимых решений.
Может ли автоматизация проверить ход выполнения?
Она обнаруживает некоторые дефекты, но понимание, полезный порядок и восстановленный контекст требуют ручного подтверждения.
Официальные ссылки
Ссылки подтверждают метод. Адаптируйте проверки к вашему контексту; они не являются сертификацией. Оригинальные названия ссылок и исходные документы могут быть на другом языке.
Источники проверены .
