Дизайн — статьи о сайтах
Сайт поставщика упаковки — это обычно каталог из десятков похожих позиций: коробки, пакеты, гофроящики, плёнка. Покупатель сравнивает размеры, материал и тираж, а потом скачивает шаблон макета или отправляет запрос на расчёт. Если характеристики написаны бледно-серым по белому, а ссылки называются «Подробнее» и «Скачать», часть посетителей не сможет выбрать товар или найти нужный файл. Проверить это можно самостоятельно.
Какие страницы проверять в первую очередь
Начните со страниц, где принимается решение: карточка товара, таблица размеров, раздел «Требования к макетам», форма запроса расчёта и страница контактов. На каждой смотрите на четыре вещи: контраст текста, структуру заголовков, названия ссылок и работу с клавиатуры. Главную страницу оставьте на потом: покупатель упаковки чаще уходит именно из каталога.
Пример: фрагмент карточки коробки и что в нём не так
Ниже условный фрагмент, а не страница реального проекта:
<h2>Коробка самосборная 200×150×80 мм</h2>
<p class="light-grey">Микрогофрокартон, печать 1+0</p>
<img src="box.jpg">
<a href="/boxes/200-150-80/">Подробнее</a>
<a href="/files/t1.pdf">Скачать</a>Проблем здесь несколько. У изображения нет описания, и пользователь программы экранного чтения не узнает, что на фото. Две ссылки не говорят, куда ведут: если вывести список ссылок страницы, останутся «Подробнее» и «Скачать» десять раз подряд. Файл называется t1.pdf, и непонятно, шаблон это или прайс. Класс с «светлым серым» намекает на низкий контраст. Исправленный вариант:
<img src="box.jpg" alt="Самосборная коробка 200×150×80 мм с открытой крышкой">
<a href="/boxes/200-150-80/">Характеристики коробки 200×150×80 мм</a>
<a href="/files/box-200-150-80-template.pdf">Шаблон макета, PDF</a>Как проверить читаемость текста
В руководстве WCAG 2.0 и 2.1 для уровня AA принято соотношение контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного. В инструментах разработчика Chrome при выборе цвета текста показывается рассчитанный коэффициент, так что специальная программа не нужна. Особое внимание уделите местам, где контраст страдает чаще всего:
- серые характеристики товара (плотность, размер, тираж) на белом фоне;
- белый текст поверх фотографии продукции на баннере;
- подсказки внутри полей формы расчёта, которые исчезают при вводе;
- подписи к фильтрам каталога мелким шрифтом.
Затем увеличьте масштаб страницы до 200 %. Таблица размеров не должна обрезаться, а кнопка «Запросить расчёт» не должна уезжать за край экрана. В самой таблице заголовки столбцов («Длина», «Ширина», «Высота») должны быть размечены как заголовки ячеек, иначе скринридер читает просто поток чисел.
Как проверить ссылки и кнопки
Главный вопрос: понятно ли, куда ведёт ссылка, если прочитать только её текст? Для файлов добавляйте тип и, по возможности, размер: «Требования к макетам, PDF». Если ссылка открывается в новом окне, предупредите об этом в тексте. Не выделяйте ссылки только цветом: подчёркивание помогает тем, кто плохо различает оттенки.
Отдельно проверьте клавиатуру. Нажимайте Tab и смотрите, виден ли фокус, то есть рамка вокруг текущей ссылки или кнопки. Дойдите до формы запроса и отправьте её без мыши. Если выпадающий фильтр по материалу или меню каталога с клавиатуры не открывается, это нужно исправлять в первую очередь. Действие должно выполняться элементом, который для этого предназначен: переход — ссылкой, отправка формы — кнопкой, а не оформленным блоком.
Чек-лист на полчаса
- На трёх карточках товара проверен контраст текста характеристик и цен.
- При масштабе 200 % таблица размеров читается, форма доступна.
- У фото продукции есть описание, а у декоративных картинок оно пустое.
- Нет ссылок «Подробнее», «Здесь», «Скачать» без пояснения.
- Файлы макетов названы понятно, формат указан.
- По Tab можно пройти меню, фильтр, форму и отправить её.
- У каждого поля формы есть постоянная подпись, а не только подсказка внутри.
- Сообщение об ошибке в форме указывает, какое поле заполнено неверно.
Что решает редактор, а что разработчик
Тексты ссылок, названия файлов и описания фотографий — задача контент-менеджера, и её можно закрыть за несколько дней. Цвета, видимый фокус, разметка таблиц и работа фильтров требуют правок в шаблонах, их стоит оформить как список задач для разработчиков. Автоматические проверки, например аудит Lighthouse в Chrome, расширения axe и WAVE, находят лишь часть проблем. Осмысленность названия ссылки или удобство прохождения формы они оценить не могут, поэтому ручной проход по списку остаётся обязательным.
