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

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

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

Подготовьте страницы и сценарии проверки

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

Выберите страницы с разными элементами:

• Главную страницу с меню и поиском.
• Каталог или список услуг с фильтрами.
• Карточку товара или страницу услуги.
• Форму заявки, регистрации или заказа.
• Страницу с длинным текстом, таблицей или документами.
• Всплывающее окно и сообщения об ошибках.

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

Подготовьте браузер, клавиатуру и программу экранного доступа. Так называют средство, которое озвучивает текст, названия кнопок, поля и другие элементы интерфейса. Примеры — NVDA для Windows и VoiceOver на устройствах Apple. Для первого прохода достаточно одного доступного вам сочетания браузера и программы, но результат записывайте вместе с названием среды.

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

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

Шаг 1. Проверьте страницу при увеличении

Увеличьте масштаб и повторите обычные действия

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

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

Типичные препятствия: текст обрезается внутри карточки, подпись исчезает за полем, меню выходит за границы окна, кнопка отправки оказывается под закреплённой панелью. Записывайте конкретный результат: «При увеличении кнопка закрытия окна скрыта, добраться до неё не получается».

Проверьте перенос текста и узкое окно

Уменьшите ширину окна браузера и снова увеличьте страницу. Содержимое должно оставаться читаемым, а важные действия — доступными. Постоянное перемещение страницы вправо и влево для чтения каждого предложения создаёт препятствие.

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

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

Проверьте закреплённые элементы

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

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

Шаг 2. Пройдите сайт только клавиатурой

Проследите за перемещением фокуса

Отложите мышь. Нажимайте Tab для перехода между доступными элементами и Shift + Tab для движения назад. Фокус — это элемент, который сейчас принимает команды клавиатуры. Обычно его обозначает рамка или другое видимое выделение.

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

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

Проверьте управление элементами

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

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

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

Проверьте окна и возврат к странице

Откройте всплывающую форму. Фокус должен перейти в понятное место внутри неё. Во время работы с модальным окном — окном, которое временно блокирует основную страницу, — переходы клавиатурой должны оставаться внутри него.

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

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

Шаг 3. Проверьте чтение программой озвучивания

Оцените структуру страницы

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

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

Проверьте порядок чтения. Цена должна восприниматься рядом с соответствующим товаром, а пояснение — рядом с нужным полем. Если программа сначала читает все названия, затем все цены, связь между ними может потеряться.

Прослушайте ссылки и кнопки

Перейдите по ссылкам и элементам управления. Название должно объяснять действие без необходимости видеть иконку. Например, «Открыть корзину» понятнее, чем просто «Кнопка». У нескольких одинаковых ссылок «Подробнее» должно быть достаточно контекста, чтобы различить их назначение.

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

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

Проверьте изображения и сведения внутри них

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

Декоративный фон или разделитель обычно не должен прерывать чтение ненужным описанием. Цель проверки — понять, получает ли человек смысл страницы, а не заставить программу произносить название каждого изображения.

Особое внимание уделите баннерам с условиями акции, изображению прайс-листа и графикам. Важная информация должна быть доступна без рассматривания картинки. Для графика полезнее объяснить вывод и привести необходимые значения, чем ограничиться подписью «График продаж».

Шаг 4. Заполните форму и проверьте ошибки

Пройдите форму сначала клавиатурой, затем с озвучиванием. У каждого поля должна быть понятная подпись: «Телефон», «Электронная почта», «Адрес доставки». Текст внутри пустого поля, исчезающий при вводе, не заменяет постоянную подпись.

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

Намеренно оставьте обязательное поле пустым или введите неподходящее значение. После отправки оцените результат:

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

Красная рамка без пояснения не сообщает, что произошло. Сообщение «Ошибка» тоже мало помогает. Более полезный вариант: «Введите электронную почту в формате имя@домен» рядом с соответствующим полем, доступный программе озвучивания.

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

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

Шаг 5. Оцените различимость текста и элементов

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

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

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

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

Как превратить находки в задачи для исправления

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

Поле задачи	Пример заполнения
Место	Форма заявки на странице услуги
Условия	Браузер, операционная система, управление клавиатурой
Шаги	Открыть форму и пройти поля клавишей Tab
Проблема	Фокус не попадает на кнопку отправки
Последствие	Посетитель не может завершить заявку
Ожидаемый результат	Кнопка доступна, выделяется и активируется клавиатурой

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

Владельцу бизнеса необязательно выбирать техническую реализацию. Его задача — описать поведение, которое нужно получить. Разработчик определит, как обеспечить правильные подписи, структуру, порядок фокуса и уведомления.

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

Что дают автоматические проверки и где их недостаточно

Автоматические инструменты помогают находить отдельные проблемы: отсутствующие подписи, некоторые ошибки структуры и неудачные сочетания цветов. Их удобно использовать как дополнение к ручному проходу.

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

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

Частые вопросы

Достаточно ли добавить версию для слабовидящих?

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

Нужно ли проверять мобильный сайт?

Да. На телефоне проверьте увеличение, чтение встроенной программой экранного доступа и основные действия. Компактное меню, закреплённые кнопки и выбор вариантов могут вести себя иначе, чем на компьютере, поэтому проверка настольной версии не заменяет мобильную.

Можно ли проверить только главную страницу?

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

Практический результат проверки — перечень воспроизводимых препятствий с понятными условиями исправления. Сохраните сценарии чтения, выбора и отправки формы: по ним можно проверить внесённые изменения и новые версии страниц.

Проверить сайт бесплатно