Сайт детского сада чаще всего открывают с телефона, в перерыве или вечером. Нужно быстро найти режим работы, меню, расписание или документы для зачисления. Если текст бледный, а ссылки подписаны словом «здесь», часть посетителей не найдёт нужное. Основную проверку владелец может сделать сам, без специальных знаний.
Кто спотыкается на сайте детского сада
Сайт читают родители разных возрастов, бабушки и дедушки, люди с пониженным зрением и те, кто держит ребёнка за руку и листает страницу одним пальцем. Кто-то пользуется программой чтения с экрана, а кто-то просто стоит на улице при ярком солнце. Информация здесь нужна срочно: изменился график, появилось объявление, обновился список документов. Поэтому нечитаемый текст или непонятная ссылка означают потерянное сообщение.
Условный пример: страница «Документы для родителей»
Вот выдуманный фрагмент страницы и типичные проблемы в нём:
- Название раздела набрано крупным жирным шрифтом, но в коде это обычный блок, а не заголовок. Программа чтения не увидит в нём раздел.
- Текст светло-серый (#9A9A9A) на белом фоне, размер 13 px. Контраст около 2,8:1, а для обычного текста WCAG 2.1 рекомендует не менее 4,5:1.
- Пять ссылок подряд подписаны «Скачать». Если открыть список ссылок страницы, получится «Скачать, скачать, скачать…».
- Ссылка выделена только цветом, подчёркивания нет.
- Файл «Приказ.pdf» оказался сканом без текстового слоя, а размер файла не указан.
Лучше подписать ссылку так: «Правила приёма в детский сад (PDF, 2 МБ)». Тогда понятно, что это за документ, в каком он формате и стоит ли скачивать его по мобильному интернету.
Как проверить текст: масштаб, контраст, структура
- Масштаб. Увеличьте страницу в браузере до 200% (Ctrl и +). Текст не должен перекрываться, а горизонтальной прокрутки быть не должно. На телефоне увеличьте размер шрифта в системных настройках и откройте сайт снова.
- Контраст. Возьмите цвета текста и фона из стилей и проверьте их программой вроде Colour Contrast Analyser или онлайн-калькулятором. Особое внимание уделите подписям под фото, серым примечаниям и тексту на цветных плашках.
- Размер. Для основного текста ориентир — от 16 px. Это рекомендация, а не жёсткое правило, но 13–14 px на телефоне читаются плохо.
- Заголовки. На странице один главный заголовок, внутри него идут разделы. Порядок можно посмотреть в расширениях для браузера, которые показывают структуру заголовков.
- Текст на картинках. Расписание занятий или меню в виде фотографии нельзя увеличить без потери качества, выделить и прочитать программой. Такие данные лучше оформить обычной таблицей.
Как проверить ссылки: клавиатура, названия, файлы
Отложите мышь и пройдите по странице клавишей Tab. Рамка фокуса должна быть видна на каждой ссылке и кнопке. Порядок перехода должен совпадать с порядком на экране, а меню должно открываться и закрываться с клавиатуры. Если фокус пропадает или «застревает» во всплывающем окне, посетитель без мыши дальше не пройдёт.
Затем прочитайте тексты ссылок отдельно от окружения. Подписи «Подробнее», «Здесь», «Скачать» без пояснений не годятся: каждая ссылка должна быть понятна сама по себе. Проверьте и остальные детали:
- ссылка отличается от обычного текста не только цветом: есть подчёркивание или другой явный признак;
- телефон оформлен как ссылка для звонка, а кнопки мессенджеров не мелкие и не стоят вплотную друг к другу;
- рядом с файлом указаны формат и размер;
- PDF можно выделить курсором, значит, это не скан без текста;
- ссылки, которые открываются в новой вкладке, об этом предупреждают;
- по каждой ссылке на странице можно перейти, и она не ведёт на удалённый файл.
Проверочный список на 15 минут для одной страницы
- При увеличении до 200% ничего не обрезано и не наезжает друг на друга.
- Контраст основного текста не ниже 4,5:1.
- Есть один главный заголовок, разделы выделены заголовками, а не только жирным шрифтом.
- Важные сведения (расписание, меню, контакты) даны текстом или таблицей, не картинкой.
- По странице можно пройти клавишей Tab, и фокус везде виден.
- Нет ссылок «здесь» и «скачать» без пояснения.
- У файлов указаны формат и размер, а PDF содержит текстовый слой.
- Все ссылки работают.
Что делать с результатами проверки
Начните с страниц, которые родители открывают чаще всего: контакты, режим работы, документы, расписание, объявления. Для разработчика формулируйте задачи конкретно, например: «поднять контраст текста до 4,5:1», «переименовать ссылки в разделе документов», «заменить фото меню таблицей». Автоматические проверки вроде Lighthouse в браузере Chrome или WAVE помогут найти часть ошибок, но не оценят, понятны ли названия ссылок. Отдельная версия для слабовидящих не заменяет доступный основной сайт, поэтому лучше исправить сам текст и разметку.
