Сайт онлайн-школы держится на тексте и ссылках: программа, даты потока, условия, кнопка «Записаться», вход в кабинет, ссылка на урок. Если человек не может прочитать бледный шрифт, не доходит до кнопки с клавиатуры или не понимает, куда ведёт ссылка «Подробнее», он не купит курс или не попадёт на занятие. Ниже описана проверка, которую владелец может провести сам, а потом передать результаты разработчику.
С какого пути по сайту начать проверку
Не проверяйте всё подряд. Пройдите путь ученика: главная, страница курса, форма заявки или оплаты, вход в личный кабинет, страница урока с материалами. На каждом шаге смотрите на две вещи: можно ли прочитать текст и можно ли выполнить действие по ссылке или кнопке без мыши и с увеличенным шрифтом. Эти страницы приносят заявки и обеспечивают обучение, поэтому исправлять их нужно в первую очередь.
Пример: что не так в карточке курса
Возьмём условный фрагмент страницы курса «Английский для работы».
- Дата старта набрана светло-серым цветом #999999 на белом фоне.
- Под описанием стоят две ссылки «Подробнее». Первая ведёт на программу, вторая на договор-оферту.
- Кнопка «Записаться» сделана картинкой без текстовой альтернативы.
- Ссылка «Скачать» открывает PDF с расписанием, но формат и содержание в тексте не указаны.
Что исправить: сделать текст темнее, дать ссылкам уникальные названия и оформить кнопку как настоящий элемент с текстом. Например:
<a href="/courses/english/program">Программа курса «Английский для работы»</a>
<a href="/courses/english/schedule.pdf">Расписание занятий (PDF)</a>
<button type="submit">Записаться на курс</button>Как проверить контраст и увеличение текста
Руководство WCAG 2.1 для уровня AA ориентируется на контраст не ниже 4,5 к 1 для обычного текста и 3 к 1 для крупного. Проверить это можно без программирования: откройте инструменты разработчика в браузере, выберите текст и посмотрите значение контраста в подсказке к цвету. Либо воспользуйтесь любым онлайн-калькулятором контраста и введите два цвета.
Затем увеличьте масштаб страницы до 200% (Ctrl и «+»). Текст не должен перекрываться, пропадать за краем экрана, а таблица расписания не должна ломаться. Отдельно найдите важную информацию, вшитую в картинки: даты старта на баннере, условия акции. Такой текст нельзя увеличить, выделить и прочитать программой для слепых, поэтому дублируйте его обычным текстом.
Как пройти по ссылкам и кнопкам только с клавиатуры
Уберите мышь и нажимайте Tab, а возвращайтесь назад через Shift+Tab. Проверьте:
- виден ли фокус, то есть рамка или подсветка на текущем элементе;
- идёт ли порядок перехода сверху вниз, а не прыгает по странице;
- срабатывают ли ссылки по Enter, а кнопки по Enter и пробелу;
- закрывается ли окно чата, всплывающая форма или cookie-баннер по Esc, и не остаётся ли фокус за ним;
- можно ли заполнить форму заявки и отправить её без мыши.
Если ссылка открывается в новой вкладке или ведёт на сторонний сервис для вебинаров, это стоит указать в её тексте: «Войти на вебинар (откроется в новой вкладке)».
Что покажет программа чтения с экрана
Бесплатный NVDA для Windows или VoiceOver на устройствах Apple позволяют услышать страницу так, как её слышит человек с нарушением зрения. Достаточно запустить программу и вызвать список ссылок и список заголовков. Если в списке ссылок одни «Подробнее», «Здесь» и «Нажмите», вне контекста они ничего не объясняют. А если заголовки не отражают структуру страницы курса (программа, формат, стоимость, документы), по ней трудно ориентироваться.
Дополнительно проверьте, что у страницы указан язык, у видеоуроков есть субтитры или текстовая расшифровка, а PDF-материалы содержат настоящий текст, а не сканы страниц.
Короткий проверочный список
- Контраст основного текста и ссылок не ниже 4,5 к 1.
- При масштабе 200% нет потери текста и кнопок.
- Даты, цены и условия есть в тексте, а не только на картинках.
- Название каждой ссылки понятно без окружающего текста.
- Все ссылки и кнопки доступны по Tab, фокус виден.
- Форма заявки, оплата и вход проходятся с клавиатуры.
- У страницы один заголовок первого уровня, дальше разделы по порядку.
- У видео есть субтитры или расшифровка, PDF читается как текст.
Как оформить результаты и поставить задачу разработчику
Заведите таблицу из четырёх колонок: страница, шаг проверки, что обнаружено, приоритет. Сначала исправляйте то, что мешает записаться, оплатить и открыть урок. Автоматические проверки вроде Lighthouse в Chrome или расширений для проверки доступности полезны, но находят лишь часть проблем: понятность текста ссылки и логику фокуса они оценить не могут. Поэтому ручной проход обязателен.
Повторяйте его после изменения шаблонов страницы курса, личного кабинета и урока, а также после подключения нового виджета чата или платёжной формы.
