Доступность начинается с завершения задачи
Календарь, который работает только с мышью, может остановить запись на приём. Поле без подписи затрудняет заполнение формы с экранным диктором. Доступность интерфейса проверяют по тому, удаётся ли человеку закончить задачу с клавиатурой, увеличенным текстом и другими способами взаимодействия.
Пример: выбор времени приёма
Представим вымышленную форму записи. Доступное время показывается цветными кружками без текста, а календарь реагирует только на мышь. Пользователь с клавиатурой доходит до него и застревает. Человек, различающий цвета иначе, видит кружки, но не понимает, какие из них можно выбрать.
Здесь недостаточно добавить общее обещание доступности. Нужны осмысленные названия вариантов, понятное обозначение состояния и управление с клавиатуры. После выбора пользователь должен получить подтверждение конкретной даты и времени. Проверять следует весь путь, включая изменение уже выбранного варианта и возвращение к предыдущему шагу.
Фокус показывает, где находится действие
При работе клавиатурой пользователь перемещается между интерактивными элементами. Положение фокуса должно быть заметным, а порядок переходов — соответствовать смыслу страницы. Если фокус исчезает за открывшимся окном или перескакивает в неожиданное место, человек теряет возможность уверенно продолжать.
Пройдите основной маршрут без мыши: откройте меню, выберите пункт, заполните поля, исправьте ошибку и завершите отправку. Отдельно проверьте закрытие всплывающего окна и возвращение к вызвавшему его элементу. Это практическая проверка поведения, которую полезно выполнять после изменений компонентов интерфейса.
Названия должны объяснять назначение
Подпись «далее» иногда понятна из контекста, но несколько одинаковых кнопок без уточнения могут запутать. Полю нужна связь с его названием, изображению с важным содержанием — подходящая текстовая альтернатива. Декоративная картинка не должна мешать чтению страницы ненужным описанием.
W3C в руководстве по формам обращает внимание на подписи, инструкции, структуру и обратную связь. При проверке полезно попросить человека объяснить назначение элемента до нажатия. Если это возможно только после изучения соседней иллюстрации или догадки о цвете, интерфейс передаёт важный смысл слишком узким способом.
Ошибка должна помогать продолжить
Сообщение «неверные данные» оставляет пользователя один на один с формой. Лучше указать проблемное поле, объяснить ожидаемый формат и сохранить уже введённые сведения. В учебном примере занятое время требует выбора другого интервала, а не повторного ввода имени и контактных данных.
После отправки покажите понятный результат: запись создана, ожидает подтверждения или не завершена. Человек не должен угадывать успех по исчезнувшей кнопке. Проверьте, воспринимается ли сообщение при увеличении текста и с используемой вспомогательной технологией, а также не уезжает ли оно за пределы доступной области.
Автоматическая проверка — часть приёмки
Инструменты способны находить некоторые ошибки разметки и оформления, однако не отвечают полностью на вопрос, понятен ли маршрут. Дополняйте их ручным прохождением и обратной связью людей, использующих разные способы взаимодействия. Проверка одного удачного экрана не переносится автоматически на весь сайт и все состояния формы.