Как проверить доступность текста и ссылок на сайте производителя мебели

Каталог мебели строится на мелочах: размеры, оттенок обивки, материал каркаса, цена комплекта. Если эти сведения плохо читаются или к ним нельзя перейти без мыши, часть посетителей не дойдёт до заявки. Проверка занимает около часа, и специальных навыков для неё не нужно.

Где на сайте мебели чаще всего теряется текст и ссылки

В этой отрасли типичные проблемы повторяются:

• светло-серые подписи и цены на бежевом или белом фоне;
• акции и условия доставки, оформленные картинкой-баннером без текстового дубля;
• десятки одинаковых ссылок «Подробнее» в списке товаров;
• цвет ткани обозначен только цветным кружком, без названия;
• размеры вынесены в схему-картинку без текстовой таблицы;
• меню каталога раскрывается только при наведении мыши.

Пример: карточка углового дивана до и после

Условный фрагмент списка товаров. Вариант «до»:

<a href="/catalog/nord/">
  <img src="nord.jpg">
</a>
<span class="price" style="color:#bbb">от 54 900 р.</span>
<span class="dot" style="background:#8a9a5b"></span>
<a href="/catalog/nord/">Подробнее</a>

Здесь у картинки нет описания, цена бледная, цвет передан только заливкой, а ссылка не говорит, куда ведёт. Вариант «после»:

<a href="/catalog/nord/">
  <img src="nord.jpg" alt="Угловой диван «Норд», обивка оливковый велюр">
</a>
<span class="price">от 54 900 р.</span>
<span class="color-name">Оливковый велюр</span>
<a href="/catalog/nord/">Диван «Норд»: размеры и ткани</a>

Цена и цифры в примере условные. Важна структура: у товара есть название, цвет назван словами, а ссылка понятна и вне карточки.

Как проверить текст: контраст, масштаб, картинки

• Контраст. Рекомендации WCAG 2.0 требуют соотношения не ниже 4,5:1 для обычного текста и 3:1 для крупного. Измерить можно бесплатной программой Colour Contrast Analyser, взяв цвет текста и фона пипеткой. Проверьте цены, подписи на фото, текст на кнопках и в неактивных пунктах фильтра.
• Масштаб. Увеличьте страницу в браузере до 200% (Ctrl и +). Текст не должен обрезаться, налезать на фото или прятать кнопку «Заказать».
• Отключённые картинки. Выключите загрузку изображений. Если вместе с ними исчезли условия акции, сроки изготовления или размеры, продублируйте их текстом.
• Мобильный экран. Откройте карточку на телефоне: размер шрифта в таблице характеристик должен читаться без увеличения пальцами.

Как проверить ссылки без мыши

Отложите мышь и пройдите страницу клавишей Tab, а назад возвращайтесь через Shift+Tab. Смотрите на три вещи:

• Виден ли фокус: рамка или подсветка на текущей ссылке. Если в стилях стоит outline: none и замены нет, понять, где вы находитесь, невозможно.
• Логичен ли порядок: меню, каталог, фильтры, карточки, форма заявки, а не прыжки по странице.
• Достижимы ли вложенные разделы: «Мягкая мебель» → «Угловые диваны» должны открываться с клавиатуры, а не только по наведению.

Затем установите бесплатный экранный диктор NVDA и вызовите список ссылок страницы. Если там 24 раза подряд «Подробнее», уточните текст ссылок. Для PDF-каталогов и инструкций по сборке указывайте формат и размер файла: «Инструкция по сборке дивана «Норд» (PDF)». Ссылки в тексте выделяйте не только цветом, а, например, подчёркиванием.

Цвета, размеры и фильтры: что проверить отдельно

• Образцы тканей и отделки подписаны названием или артикулом, выбранный вариант виден не только по цвету рамки.
• Размеры лежат в обычной таблице с заголовками столбцов и строк, а не только на схеме.
• У полей фильтра и формы заказа есть видимые подписи, а не только серый текст внутри поля, который пропадает при вводе.
• Ошибка в форме описана словами: «Укажите телефон», а не просто красной рамкой.

Короткий проверочный список для приёмки страницы

• Контраст текста и фона не ниже 4,5:1 (крупного — 3:1).
• При масштабе 200% ничего не обрезано и не перекрыто.
• Цены, сроки, условия и размеры есть в тексте, а не только на картинке.
• У значимых фото осмысленное описание, у декоративных оно пустое.
• Вся страница проходится клавишей Tab, фокус виден.
• Меню каталога работает без наведения мыши.
• Ссылки понятны вне контекста, у файлов указан формат.
• Цвета и материалы названы словами.
• У полей форм есть подписи и текстовые сообщения об ошибках.

Что поручить разработчику после проверки

Выпишите найденное по шаблонам, а не по отдельным страницам: карточка товара, список каталога, меню, форма заявки. Исправление шаблона сразу улучшает все товары. В задаче для разработчика указывайте проверяемый результат: «цена имеет контраст не ниже 4,5:1», «ссылка в карточке содержит название модели». Так принять работу будет проще, а повторить проверку можно за несколько минут.

Все статьи блога