Начните проверку с клавиатуры, масштаба страницы и основных пользовательских сценариев: поиска, навигации, заполнения формы и оформления заказа. Главный критерий прост — посетитель должен понимать содержимое и управлять интерфейсом, даже если не видит часть элементов, не использует мышь или увеличивает текст.
Можно ли управлять сайтом только с клавиатуры?
Все ссылки, кнопки, поля и меню должны быть доступны без мыши. Переходите между элементами клавишей Tab, возвращайтесь сочетанием Shift + Tab, активируйте выбранный объект клавишами Enter или Space.
Фокус должен двигаться в логичном порядке и оставаться заметным. Обычно это рамка, подчёркивание или контрастная подсветка. Если указатель исчезает на светлом фоне, пользователь теряет своё место на странице. Особенно внимательно проверьте выпадающие меню, модальные окна, карусели и элементы, которые появляются после нажатия.
Открытое модальное окно не должно отправлять фокус к содержимому под ним. После закрытия фокус обычно возвращается к кнопке, с которой окно открыли. Такая деталь кажется небольшой, но именно на ней часто ломается последовательная навигация.
Остаётся ли контент понятным при увеличении?
Увеличьте масштаб браузера и проверьте, можно ли читать текст без потери функций. Блоки не должны перекрывать друг друга, кнопки — исчезать за краем экрана, а горизонтальная прокрутка — мешать чтению основного содержимого.
Затем оцените контраст текста, иконок и интерактивных элементов. Светло-серая подпись на белом фоне может выглядеть аккуратно на дизайнерском мониторе, но при ярком дневном свете она почти растворяется. Цвет также не должен быть единственным способом передать состояние: ошибку лучше обозначать не только красной рамкой, но и понятным сообщением.
| Что проверить | Признак проблемы | Практическое исправление |
|---|---|---|
| Текст и фон | Надписи трудно различить | Усилить контраст или изменить фон |
| Масштаб | Контент обрезается или перекрывается | Перестроить адаптивную сетку |
| Фокус | Не видно выбранный элемент | Добавить заметный стиль состояния |
| Цветовые сигналы | Статус понятен только по цвету | Добавить текст, значок или пояснение |
Понятны ли изображения и структура страницы?
Информативным изображениям нужно текстовое описание, передающее их смысл или функцию. Декоративную графику, которая ничего не добавляет к содержанию, обычно исключают из озвучивания вспомогательными технологиями.
Описание зависит от контекста. Для кнопки с лупой важнее действие «Поиск», а не подробный рассказ о форме значка. Для диаграммы потребуется передать вывод и значимые данные, иначе пользователь услышит лишь название файла или бессодержательное слово «картинка».
Заголовки должны образовывать последовательную иерархию. Один главный заголовок обозначает тему страницы, а подзаголовки делят материал на смысловые части. Не следует выбирать уровень заголовка только из-за размера шрифта: внешний вид настраивается стилями, а HTML-разметка описывает структуру.
Можно ли заполнить формы без догадок?
Каждое поле должно иметь постоянную и понятную подпись. Подсказка внутри поля не всегда заменяет её: после ввода текста она исчезает, и назначение поля приходится вспоминать.
Проверьте форму на реальном сценарии, включая намеренные ошибки:
- пройдите все поля с клавиатуры в ожидаемом порядке;
- оставьте обязательное поле пустым и отправьте форму;
- введите данные в неверном формате;
- убедитесь, что сообщение называет ошибку и способ исправления;
- проверьте, сохраняются ли уже введённые корректные данные;
- повторите отправку после устранения ошибок.
Формулировка «Некорректное значение» почти не помогает. Сообщение «Укажите адрес в формате [email protected]» точнее направляет пользователя. Если ошибка появляется только в верхней части длинной страницы, связь с проблемным полем легко пропустить.
Достаточно ли автоматической проверки?
Автоматические инструменты полезны для поиска технических нарушений, но не заменяют ручной просмотр. Они могут обнаружить отсутствующее описание изображения или неподписанное поле, однако не всегда определят, соответствует ли текст реальному смыслу.
После автоматического анализа повторите ключевые действия вручную: откройте меню, найдите материал, заполните форму и закройте всплывающее окно. По возможности проверьте несколько страниц разных типов, а не только главную. Ошибка часто скрывается в шаблоне карточки, поиска или оформления заказа.
Исправления разумно начинать с препятствий, которые полностью блокируют действие: недоступной кнопки, невидимого фокуса, формы без понятных ошибок. Затем можно дорабатывать подписи, структуру и визуальные состояния. Хорошо настроенный интерфейс не требует от посетителя угадывать следующий шаг — путь по странице остаётся видимым даже без курсора мыши.