Первичная проверка интерфейса: клавиатура, видимый фокус, увеличение текста, подписи полей и понятные сообщения формы.
Человек может пользоваться сайтом без мыши, увеличивать текст, читать с маленького экрана или применять вспомогательные технологии. Поэтому удобство интерфейса нельзя оценивать только по привычному устройству команды разработки.
Начальные проверки помогают заметить очевидные препятствия. Они не заменяют полноценную оценку доступности, но дают конкретный список для исправлений и более подробного исследования.
1Пройдите сценарий с клавиатурой
Откройте страницу и переходите между элементами клавишей Tab. Посмотрите, понятно ли, где вы находитесь, и можно ли открыть меню, воспользоваться формой и продолжить движение. Обратный переход проверяется сочетанием Shift и Tab.
Если фокус исчезает или попадает в скрытый блок, запишите адрес и последовательность действий. Не нужно исправлять проблему отключением видимого выделения: именно оно помогает человеку ориентироваться.
2Проверьте увеличение текста
Увеличьте масштаб браузера и посмотрите на заголовки, поля, кнопки и раскрывающиеся блоки. Текст не должен превращаться в обрезанные фрагменты, а важные действия — исчезать за пределами контейнера.
На телефоне проверьте также длинные подписи и открытое меню. Красивый короткий пример не показывает, как интерфейс работает с реальным содержанием. Обнаруженные места фиксируйте отдельно для каждого сценария.
3Сделайте названия действий понятными
Кнопка с одной иконкой может быть очевидна не всем. Элементу нужно доступное название, а ссылки должны объяснять направление перехода. Несколько одинаковых «Подробнее» без контекста затрудняют понимание.
Для формы сохраняйте видимые подписи полей. Подсказка внутри поля исчезает после ввода и не заменяет его постоянное название. Ошибка должна говорить, что исправить, а подтверждение — что действие завершилось.
4Не используйте только цвет
Красная рамка сама по себе не объясняет ошибку. Добавьте текст рядом с соответствующим полем. Аналогично статус и выбранное состояние должны различаться не только оттенком, когда это важно для действия.
Проверьте читаемость текста на фоне и влияние фотографий. Лаймовый или фиолетовый цвет бренда не обязан использоваться одинаково во всех элементах. Оформление следует выбирать с учётом функции и контраста.
5Оцените смысл изображений
Если фотография или схема сообщает важную информацию, продумайте текстовое описание этой роли. Декоративный объект не нужно описывать так, будто он содержит обязательные сведения о продукте.
Это различие помогает избежать лишнего шума и сохранить полезный смысл. Для сложной информации может понадобиться отдельное текстовое объяснение рядом с изображением, а не длинная подпись одного поля.
6Записывайте препятствия по сценарию
Удобный отчёт содержит страницу, действие, ожидаемый результат и проблему. «Меню неудобное» трудно воспроизвести. «После открытия меню клавиатурой нельзя перейти к ссылке услуги» уже подсказывает проверку.
В материалах W3C для первичной оценки рассматриваются, в частности, фокус, масштаб, подписи и альтернативный текст. Эти простые проверки не подтверждают соответствие всем требованиям доступности: для полной оценки нужен более широкий процесс.
7Начните с критических действий
- Открыть меню и выбрать раздел.
- Прочитать предложение при увеличении.
- Заполнить форму и исправить ошибку.
- Получить понятное подтверждение.
- Продолжить движение без мыши.
Сначала исправляйте то, что препятствует основному действию посетителя. Общий сценарий формы разобран в статье о первом контакте и брифе. Если нужна проверка интерфейса, опишите страницы и важные действия — составим предметный список работ.
