Как проверить сайт на доступность для людей с ограничениями зрения

Сайт может выглядеть аккуратно на дизайнерском мониторе и оставаться трудным для человека, который увеличивает текст, использует клавиатуру или экранный диктор. Проверка нужна на реальных страницах и действиях: найти услугу, прочитать условия, отправить заявку. Проверить сайт на доступность для людей с ограничениями зрения можно по последовательному сценарию, начиная с главных страниц. Провести аудит текущего сайта можно на БЕСПЛАТНОЙ КОНСУЛЬТАЦИИ.

В A3 Studio проверяют не только цвет и размер шрифта. Если человек видит кнопку, но не может дойти до неё с клавиатуры или понять ошибку формы, задача остаётся невыполненной.

Начните со страниц, которые приносят обращения: главная, услуга, цена, контакты, форма и подтверждение отправки. Для интернет-магазина добавьте каталог, карточку товара и оформление заказа. Запишите конкретные действия пользователя, чтобы оценивать не абстрактную «удобность», а возможность пройти путь до конца.

Проверьте сайт на телефоне и компьютере. Пользователи увеличивают системный текст, масштаб страницы и иногда меняют цветовые настройки. Не делайте вывод по одному экрану. Если при увеличении важная информация уходит за границы или кнопка перекрывает форму, это уже практическая проблема.

Автоматическая проверка помогает найти часть ошибок, но не отвечает за смысл текста и удобство сценария. Инструмент может заметить отсутствие подписи у поля, однако не решит, понятно ли человеку, что именно туда вводить. Поэтому соединяйте автоматические отчёты с ручным прохождением страниц.

Посмотрите на обычный текст, подписи полей, ссылки, кнопки и сообщения об ошибках. Серый текст на белом фоне часто выглядит изящно в макете, но плохо читается. Контраст измеряют инструментом, а не только на глаз. Для обычного текста часто ориентируются на отношение не ниже 4,5:1, для крупного текста на 3:1 в рамках критериев WCAG уровня AA. Размер и насыщенность шрифта влияют на то, какое правило применяется.

Увеличьте масштаб страницы до 200% и проверьте, можно ли прочитать материал без потери информации. Затем оцените узкое окно или мобильный экран при увеличенном тексте. Заголовки, таблицы, меню и формы должны оставаться доступными. Горизонтальная прокрутка длинной таблицы допустима в некоторых случаях, но основной текст и форма не должны требовать постоянного движения в стороны.

Цвет не должен быть единственным способом передать смысл. Красная рамка поля без текстового пояснения не объясняет ошибку человеку с особенностями восприятия цвета или экранным диктором. Добавьте короткое сообщение рядом с полем: что произошло и как исправить.

Уберите мышь и перемещайтесь клавишей Tab. Видимый фокус должен последовательно переходить по меню, ссылкам, кнопкам и полям. Человек должен понимать, где он находится. Если рамка фокуса полностью скрыта стилями, даже доступная технически кнопка становится трудной в использовании.

Проверьте раскрывающиеся меню, модальные окна и календарь записи. Их должно быть возможно открыть, использовать и закрыть с клавиатуры. Фокус не должен исчезать за всплывающим окном или попадать в элементы, которые сейчас невидимы. После закрытия окна он должен возвращаться в понятное место.

Отдельно пройдите весь путь отправки заявки. Если поле нельзя выбрать без мыши, если подсказка появляется только при наведении курсора или если подтверждение не воспринимается после отправки, сценарий требует исправления.

Откройте страницу с доступным экранным диктором и послушайте, как он читает заголовки, ссылки, кнопки и поля. Заголовки должны описывать содержание разделов и идти в понятном порядке. Нельзя подменять заголовок обычным текстом, которому просто задали крупный шрифт.

Ссылка «Подробнее» без контекста плохо объясняет назначение, особенно в списке ссылок диктора. Назовите действие точнее: «Подробнее о доставке» или «Посмотреть условия записи». У значимых изображений нужен текст, передающий их смысл в контексте страницы. Декоративные картинки не должны засорять чтение повторением очевидного.

Для иконки без текста проверьте, произносит ли диктор понятное название действия. «Кнопка, изображение 12» не помогает отправить запрос или открыть меню. У таблиц с данными должны быть осмысленные заголовки, а сложную информацию лучше продублировать понятным текстом, если таблица плохо воспринимается.

У каждого поля должна быть постоянная подпись. Текст внутри поля, исчезающий при наборе, не заменяет её: человек может забыть формат ввода. Обязательные поля и формат данных объясните заранее. При ошибке покажите конкретное сообщение рядом с нужным полем и сохраните уже введённые данные.

После отправки проверьте, что подтверждение доступно не только визуально. Если страница не перезагружается, экранный диктор должен получить информацию о результате. Если требуется дополнительная проверка от ботов, она не должна оставлять человека без доступного способа завершить форму.

Сделайте тест с несколькими людьми, если это возможно. Реальный пользователь с привычным способом увеличения или чтения экрана заметит проблемы, которые команда не увидит при обычном просмотре. Его обратная связь дополняет, а не заменяет проверку критериев доступности.

Сначала устраняйте препятствия, которые полностью блокируют действие: недоступная кнопка, невидимый фокус, нечитабельная форма, ошибка без объяснения. Затем исправляйте контраст, структуру заголовков, подписи и альтернативные тексты. Для каждого пункта запишите страницу, шаг воспроизведения и ожидаемое поведение.

После исправлений повторите тот же сценарий на телефоне, клавиатуре и с диктором. Оценка одной главной страницы не говорит о доступности всего сайта: шаблоны каталога, всплывающие окна и формы могут вести себя иначе. Если нужна проверка при обновлении сайта, обсудите аудит с A3 Studio. Итогом может стать перечень конкретных проблем и порядок их исправления по влиянию на посетителей.