Дизайн — статьи о сайтах
Сайт поставщика стройматериалов читают в разных условиях. Прораб открывает каталог с телефона на объекте при ярком солнце, снабженец ищет в таблице нужную марку цемента, а кто-то пользуется крупным шрифтом или управляет страницей с клавиатуры. Если текст бледный, а ссылки называются «Подробнее» и «Скачать», найти товар и прайс становится сложно. Базовую проверку можно провести за час, технических знаний для этого почти не нужно.
Какие страницы проверять в первую очередь
Не нужно проверять весь сайт сразу. Начните с мест, где посетитель принимает решение:
- карточка товара с таблицей характеристик (размер, марка, вес поддона, фасовка);
- каталог с фильтрами и сортировкой;
- ссылки на прайс-листы, сертификаты и технические описания в PDF;
- страница доставки и контактов;
- форма заявки или расчёта.
Пример: карточка газобетонного блока
Условный фрагмент, в котором собраны типичные ошибки:
<p style='color:#aaa'>Блок D500, 600×300×200 мм</p>
<span class='btn' onclick='openPrice()'>Подробнее</span>
<a href='/price.pdf'>Скачать</a>Здесь три проблемы. Светло-серый текст #aaa на белом фоне даёт контраст около 2,3:1, а для обычного текста ориентир по WCAG 2.1 не ниже 4,5:1. «Кнопка» сделана из span с обработчиком клика, поэтому клавиша Tab её пропустит, а программа экранного чтения не назовёт её ссылкой или кнопкой. Ссылка «Скачать» не говорит, что именно скачивается, в каком формате и какого размера файл. Исправленный вариант:
<p style='color:#555'>Блок D500, 600×300×200 мм</p>
<a href='/catalog/block-d500/'>Характеристики блока D500</a>
<a href='/price-blocks.pdf'>Прайс-лист на блоки, PDF, 1,2 МБ</a>Размер файла в примере условный, на своём сайте указывайте реальный.
Как проверить контраст и размер текста
Откройте страницу в Chrome, нажмите F12 и выберите текст в инспекторе. В панели стилей при выборе цвета браузер покажет коэффициент контраста. Проверьте серые подписи к ценам, примечания под таблицами, текст на фоновых фото и надписи на баннерах акций. Затем увеличьте масштаб страницы до 200% (Ctrl и +). Проверьте, что:
- таблица характеристик не обрезается, а прокручивается или перестраивается;
- цена не налезает на кнопку заказа;
- меню каталога остаётся доступным.
Отдельно откройте сайт на телефоне. Основной текст не должен быть мельче примерно 16 пикселей, а ссылки в списках не должны стоять так тесно, что палец попадает в соседнюю.
Проверка с клавиатуры
Уберите мышь и пройдите страницу клавишей Tab. Shift+Tab возвращает назад, Enter активирует ссылку. Смотрите на следующее:
- виден ли выделенный элемент (рамка фокуса не должна быть скрыта в CSS);
- идёт ли порядок логично: шапка, каталог, карточка, а не прыжки по странице;
- открывается ли с клавиатуры подменю каталога и работают ли фильтры;
- закрывается ли окно выбора города клавишей Esc и не уходит ли фокус за него;
- есть ли в начале страницы ссылка «Перейти к содержимому», чтобы не проходить Tab-ом всё меню.
Понятны ли ссылки вне контекста
Программы экранного чтения умеют выводить список всех ссылок страницы. Если в каталоге сорок раз подряд написано «Подробнее», такой список бесполезен. Чтобы понять, какие ссылки нужно переписать, представьте, что видите только их текст. Правила простые:
- название ссылки отражает цель: «Доставка по области», а не «Здесь»;
- у файлов указан формат, а при желании и актуальность: «Прайс-лист, PDF»;
- ссылки, открывающиеся в новой вкладке, об этом предупреждают;
- телефон оформлен как ссылка tel:, адрес почты как mailto:, чтобы звонок с мобильного был в одно касание;
- ссылки внутри абзацев отличаются не только цветом, например подчёркиванием.
Чем проверить и что оставить на ручную проверку
Автоматические инструменты быстро находят часть проблем. Это вкладка Lighthouse в Chrome, расширения WAVE и axe. Они покажут слабый контраст, пустые ссылки и кнопки без названия. Но они не поймут, что «Скачать» нечего не говорит, или что порядок табуляции нелогичен. Поэтому добавьте десять минут с бесплатной программой NVDA для Windows или VoiceOver на iPhone: попробуйте найти на странице товар и прайс только на слух.
Короткий чек-лист для задачи разработчику
- Контраст основного текста, цен и подписей не ниже 4,5:1.
- При масштабе 200% таблицы и цены читаемы и не перекрываются.
- Все ссылки и кнопки доступны по Tab, фокус виден.
- Интерактивные элементы сделаны тегами a и button, а не span и div.
- Нет ссылок «Подробнее» и «Скачать» без пояснения.
- У файлов указан формат, у телефона и почты рабочие ссылки.
- Окна и выпадающие меню закрываются с клавиатуры.
Распечатайте этот список, пройдите по нему на трёх-четырёх ключевых страницах и передайте результаты разработчику с конкретными адресами страниц. Так правки удастся оценить и проверить повторно.
