Дизайн — статьи о сайтах
На сайт центра печати приходят с конкретной задачей: узнать цену, проверить формат файла, найти адрес. Часто это происходит с телефона на улице, в спешке или при слабом зрении. Если серый мелкий текст не читается, а ссылка «Подробнее» ничего не объясняет, человек просто позвонит конкурентам. Ниже описано, как проверить текст и ссылки своими силами.
Что на сайте центра печати проверять в первую очередь
Начните с элементов, от которых зависит заказ:
- прайс-лист и таблицы с ценами по форматам и типам бумаги;
- требования к файлам: форматы, разрешение, поля, цветовой режим;
- сроки, адреса, часы работы, телефон;
- ссылки на PDF-файлы, шаблоны и договоры;
- форма загрузки макета и кнопка отправки.
Условный пример: страница «Печать чертежей»
Представим типовой фрагмент. Заголовок «Печать чертежей А0–А1». Под ним абзац светло-серым шрифтом 13 px: «Плоттер, срок от одного часа, сканирование и копирование». Ниже три ссылки: «Подробнее», «Скачать» и «Здесь». Они бледно-голубые, без подчёркивания. Телефон набран текстом, а срочные заказы отмечены красным словом «срочно».
Проблемы очевидны:
- светло-серый текст на белом фоне может не пройти проверку контрастности;
- ссылки отличаются от текста только оттенком;
- «Скачать» не говорит, что именно скачается и в каком формате;
- «Подробнее» и «Здесь» бессмысленны, если читать список ссылок отдельно от страницы;
- телефон нельзя нажать, чтобы позвонить.
Исправленный вариант: тёмно-серый текст не мельче 16 px, ссылки подчёркнуты, тексты ссылок «Прайс на печать чертежей (PDF, 2 МБ)» и «Требования к файлам для плоттера», телефон оформлен ссылкой tel:, а срочность указана словами: «Срочная печать — за дополнительную плату, уточняйте при заказе».
Как проверить читаемость текста
- Контраст. В инструментах разработчика браузера выберите элемент и посмотрите соотношение цветов. Для обычного текста ориентир по WCAG — не ниже 4,5:1, для крупного — 3:1. Проверьте и серые подписи, и текст на фотографиях.
- Увеличение. Включите масштаб 200 %. Текст не должен перекрываться, а таблица цен — обрезаться. Если форма или прайс требуют горизонтальной прокрутки, это повод переделать вёрстку.
- Цвет не единственный признак. Фразы вроде «красным отмечены позиции без скидки» не работают для людей с нарушением цветового восприятия. Добавьте слово или значок с подписью.
- Структура. Заголовки должны идти по порядку: услуги, форматы, сроки. Длинные требования к файлам лучше разбить на списки.
Как проверить ссылки
Скопируйте список всех ссылок страницы (подойдёт расширение браузера или экранный диктор) и прочитайте его без контекста. Каждая должна быть понятна сама по себе.
- Вместо «Подробнее» пишите, о чём страница: «Условия переплёта дипломных работ».
- Для файлов указывайте формат и примерный размер.
- Ссылки с одинаковым текстом не должны вести на разные страницы.
- Ссылка должна отличаться от текста не только цветом: подчёркивание или другой явный признак.
- Если ссылка открывается в новой вкладке, предупредите об этом.
- Телефон и почта оформляются через tel: и mailto:, чтобы с мобильного можно было сразу позвонить или написать.
- Ссылки в соседних строках должны быть достаточно разнесены, чтобы по ним можно было попасть пальцем.
Проверка с клавиатуры за десять минут
Отложите мышь и пройдите страницу клавишей Tab. Назад возвращает Shift+Tab, ссылку открывает Enter. Следите за тремя вещами:
- фокус всегда виден: рамка или подчёркивание, а не только едва заметная смена оттенка;
- порядок перехода совпадает с порядком чтения, меню не «ловит» фокус;
- окно с cookie, чат и всплывающая акция не закрывают форму загрузки и не мешают дойти до кнопки «Отправить».
Отдельно пройдите всю форму: у каждого поля должна быть видимая подпись, а не только серая подсказка внутри, которая исчезает при вводе.
Короткий чек-лист перед публикацией страницы
- Основной текст не мельче 16 px, контраст проверен.
- При масштабе 200 % ничего не обрезается, цены читаются.
- Тексты ссылок понятны вне контекста, нет «здесь» и «подробнее».
- У файлов указаны формат и размер.
- Телефон и почта кликабельны.
- Ссылки заметны без опоры на цвет.
- Все действия доступны с клавиатуры, фокус виден.
- Подписи полей формы остаются на экране.
Автоматические проверки находят лишь часть проблем: например, они не оценят, понятна ли фраза «Скачать». Поэтому после них стоит пройти страницу вручную, лучше с телефона. Пункты чек-листа удобно включить в техническое задание и приёмку, чтобы доступность проверялась при каждом обновлении прайса и шаблонов.
