Дизайн — статьи о сайтах
Клиент шиномонтажа часто открывает сайт на улице, с телефона, при ярком солнце и одной рукой. Если серый мелкий текст не читается, а ссылка «Подробнее» ничего не объясняет, он закроет страницу и позвонит конкурентам. Значительную часть проверки можно сделать самому, без специальных навыков.
Что именно проверяем на сайте шиномонтажа
Нужно ответить на четыре вопроса. Достаточно ли контрастен и крупен текст? Понятна ли каждая ссылка без соседних слов? Можно ли дойти до записи с клавиатуры? Что «услышит» человек, который пользуется программой экранного доступа? Ориентиром служат международные рекомендации WCAG 2.1 уровня AA. Это рабочая рамка для технических решений, а не юридическое заключение.
Условный пример: страница «Сезонная замена колёс»
Представим типовой фрагмент страницы:
- абзац светло-серым цветом #9a9a9a на белом фоне: «Запись на будни и выходные, работаем до 20:00»;
- три карточки «Легковые», «Внедорожники», «Грузовые», в каждой ссылка «Подробнее»;
- иконка телефона без подписи, которая ведёт на звонок;
- фраза «Прайс — нажмите здесь» со ссылкой на файл;
- форма записи, где подсказки лежат внутри полей, а ошибка отмечена только красной рамкой.
Проблем здесь пять. У серого текста контраст ниже требуемых 4,5:1. Три одинаковые ссылки неразличимы в списке ссылок. У иконки нет текстовой подписи. «Нажмите здесь» не называет цель. Ошибку в форме не увидит тот, кто плохо различает цвета.
Контраст и размер текста: проверка за десять минут
В браузере откройте инструменты разработчика, выберите элемент с текстом и посмотрите на цвет: рядом с образцом обычно показан коэффициент контраста. Тот же отчёт есть в Lighthouse, а расширения вроде axe или WAVE подсвечивают проблемные места. Для обычного текста нужно не менее 4,5:1, для крупного (от 24 px или от 18,5 px жирным) не менее 3:1.
Отдельно проверьте места, которые забывают:
- текст поверх фотографии на баннере с акцией;
- подсказки в полях формы;
- надписи на кнопках, в том числе при наведении;
- время работы и адрес в подвале сайта.
Затем увеличьте масштаб страницы до 200%. Текст не должен налезать на соседние блоки, а кнопка «Записаться» не должна уходить за край экрана. Основной текст удобнее делать от 16 px.
Ссылки и кнопки: понятны ли они без окружения
Программы экранного доступа умеют выводить список всех ссылок страницы. Три «Подробнее» в таком списке не отличить друг от друга. Замените их на «Замена колёс на легковом авто», «Шиномонтаж внедорожников» и так далее. Если по дизайну нужна короткая надпись, дополните её скрытым для глаз текстом или атрибутом aria-label.
- Телефон оформляйте ссылкой tel: и пишите номер текстом, а не только иконкой.
- Вместо «нажмите здесь» пишите «Скачать прайс-лист (PDF)» и указывайте формат файла.
- Ссылки внутри абзацев отличайте от текста не только цветом, но и подчёркиванием.
- Если карта или мессенджер открываются в новой вкладке, скажите об этом в подписи.
Клавиатура и экранный диктор: быстрый тест без мыши
Отложите мышь и пройдите страницу клавишей Tab. Должна быть видна рамка фокуса, порядок должен совпадать с визуальным, а до кнопки записи нужно добраться за разумное число нажатий. Проверьте, что меню и выбор даты не «ловят» фокус и что из них можно выйти клавишей Esc. В форме у каждого поля должна быть видимая подпись, а об ошибке нужно сообщать текстом: «Укажите номер телефона».
Затем включите бесплатный NVDA на Windows, VoiceOver на iPhone или TalkBack на Android. Откройте список заголовков и список ссылок. Если по ним можно понять структуру страницы и найти запись, значит, разметка в порядке.
Проверочный список перед публикацией страницы
- Контраст основного текста не ниже 4,5:1, включая подвал и баннеры.
- Размер основного текста от 16 px, при масштабе 200% ничего не теряется.
- Нет ссылок «Подробнее», «Здесь», «Далее» без уточнения.
- Телефон, адрес и кнопка записи доступны текстом, а не только картинкой.
- Фокус виден, и вся страница проходится клавишей Tab.
- У полей формы есть подписи, а ошибки описаны словами.
- У файлов указан формат, у внешних ссылок понятно, куда они ведут.
- Заголовки идут по порядку: один h1, затем h2 для разделов.
Распечатайте этот список и передайте разработчику как часть задания на новые страницы. Тогда такие проверки войдут в обычный порядок приёмки, и сайт не придётся переделывать после запуска.
