Сайт ремонтной бригады открывают с телефона в магазине стройматериалов, на ярком солнце, одной рукой. Его читают люди с плохим зрением и те, кто не пользуется мышью. Если серый текст сливается с фоном, а ссылка называется «Подробнее», обращение можно потерять и не узнать об этом. Базовую проверку вы можете сделать сами примерно за час.
Где на сайте бригады чаще всего возникают проблемы
В этой отрасли ошибки повторяются:
- прайс-лист выложен картинкой или сканом, и текст нельзя ни увеличить, ни прочитать программой чтения с экрана;
- телефон вставлен в баннер или набран обычным текстом, и на смартфоне по нему нельзя нажать;
- подписи к работам набраны светло-серым мелким шрифтом;
- во всех карточках услуг одинаковые ссылки «Подробнее»;
- у фотографий «до и после» нет текстового описания;
- в форме заявки вместо подписей полей остались подсказки внутри них, которые исчезают при вводе.
Условный пример: фрагмент страницы «Ремонт ванной комнаты»
Фрагмент придуман для разбора и не относится к реальной компании:
<p style='color:#aaa;font-size:12px'>Гарантия на работы — по договору</p>
<a href='/vannaya'>Подробнее</a>
<a href='/price'>Нажмите здесь</a>
<img src='price.jpg'>
<span onclick='call()'>Позвонить</span>Что здесь не так:
- Светло-серый текст размером 12 пикселей на белом фоне заметно не дотягивает до контраста 4,5:1, который рекомендует WCAG 2.0 для обычного текста.
- Ссылки «Подробнее» и «Нажмите здесь» ничего не говорят вне контекста. Человек с программой чтения часто просматривает список ссылок отдельно, и там будет только набор одинаковых слов.
- У картинки с прайсом нет атрибута alt, а сам прайс не продублирован текстом или таблицей.
- «Позвонить» сделано элементом span с обработчиком. Он не получает фокус клавиатурой и не считается ссылкой.
Исправленный вариант: тёмно-серый текст не менее 16 пикселей, ссылки «Ремонт ванной: состав работ» и «Прайс-лист на ремонт ванной», прайс таблицей, телефон ссылкой вида <a href='tel:+7XXXXXXXXXX'> с видимым номером в тексте.
Как проверить контраст и размер текста
Возьмите бесплатный инструмент вроде WebAIM Contrast Checker и введите цвет текста и фона. Для обычного текста ориентир по WCAG 2.0 — 4,5:1, для крупного — 3:1. Особенно проверяйте подписи к фото, цены, текст на кнопках и текст поверх фотографий объектов: фон там неоднороден, и читаемость меняется от места к месту.
Затем увеличьте страницу в браузере до 200%. Текст должен остаться читаемым, ничего не должно перекрываться, а кнопка «Заказать расчёт» должна по-прежнему нажиматься. На телефоне посмотрите страницу на улице при дневном свете: проблемы с контрастом так видны сразу.
Как проверить ссылки и кнопки без мыши
Отложите мышь и пройдите страницу клавишей Tab, назад — Shift+Tab, переход по ссылке — Enter. Обратите внимание на три вещи:
- Фокус виден: у ссылки или кнопки есть заметная рамка или подчёркивание. Если стили её убрали, пользователь теряется.
- Порядок логичен: фокус идёт сверху вниз, а не прыгает между шапкой и подвалом.
- Всё нужное доступно: меню, телефон, кнопка заявки и поля формы выбираются клавишей Tab.
Потом выпишите тексты всех ссылок на странице. Если по списку непонятно, куда они ведут, переименуйте их. Хорошая ссылка называет назначение: «Скачать смету на ремонт кухни», «Рассчитать стоимость отделки».
Проверочный список для владельца
- Основной текст не мельче 16 пикселей, контраст не ниже 4,5:1.
- Прайс, перечень работ и условия гарантии есть текстом, а не только в картинке или PDF-скане.
- У значимых фотографий есть краткое описание: что за работа и какое помещение.
- Нет ссылок «Подробнее», «Здесь», «Далее» без уточнения.
- Телефон и почта — настоящие ссылки, номер виден текстом.
- У каждого поля формы есть постоянная подпись, а сообщение об ошибке говорит, что исправить.
- Страница работает при увеличении до 200% и при управлении с клавиатуры.
- Информация не передаётся одним цветом: пометка «обязательное поле» не только красная.
Что поручить разработчику после проверки
Составьте список по страницам: что найдено, где и как это воспроизвести. Например: «Страница ремонта ванной, блок цен, контраст подписей ниже нормы». Такие формулировки сокращают время правки и позволяют принять работу по тому же чек-листу. После любых изменений дизайна, например при добавлении нового баннера или каталога услуг, повторите проверку: именно тогда доступность чаще всего ухудшается.
