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

В магазине запчастей текст и ссылки нужны для работы: по ним покупатель сверяет артикул, применимость к автомобилю, наличие и способ получения. Если артикул набран бледно-серым, десятки ссылок называются «Подробнее», а статус «в наличии» передан только цветом, часть посетителей не завершит подбор. К таким посетителям относятся люди со слабым зрением и те, кто пользуется клавиатурой или экранным диктором. Сюда же попадает человек, который смотрит каталог на телефоне на ярком солнце в гараже. Ниже описано, как проверить сайт своими силами.

Что проверять в первую очередь

Ориентир для проверки — международные рекомендации WCAG 2.1 уровня AA. Для каталога из них важны пять вещей: контраст текста с фоном, увеличение масштаба, понятные названия ссылок, видимый фокус при работе с клавиатурой и корректная разметка таблиц. Начните с шаблонов, а не с отдельных страниц: карточка товара, листинг категории, форма подбора по автомобилю или VIN, корзина, оформление заказа.

Контраст и размер шрифта в карточке товара

Чаще всего слабый контраст встречается там, где дизайнер хотел «приглушить» второстепенное: артикул и OEM-номер, старая цена, подсказка в поле поиска по номеру, надпись «Нет в наличии», текст поверх фотографии на баннере акции. Для обычного текста нужно соотношение не ниже 4,5:1, для крупного (от 24 px или от 18,66 px жирным) — не ниже 3:1.

Проверить просто: в инструментах разработчика браузера откройте выбор цвета у текстового элемента, там указан коэффициент контраста. Общую картину даст отчёт Lighthouse в Chrome. Затем увеличьте масштаб страницы до 200%. Цена, кнопка покупки и артикул не должны перекрываться или пропадать. На ширине около 320 px текст должен переноситься без горизонтальной прокрутки. Для широких таблиц характеристик прокрутка допустима, но сама таблица должна оставаться читаемой.

Пример: как выглядит карточка в листинге и что в ней исправить

Типичный условный фрагмент, который трудно использовать:

<div class='item'>
  <img src='oc001.jpg'>
  <span class='dot green'></span>
  <a href='/p/101'>Подробнее</a>
  <a href='/cart/add/101'><img src='cart.svg'></a>
</div>

Здесь у фото нет описания, наличие показано зелёной точкой, а обе ссылки вне контекста ничего не объясняют. Диктор прочитает «Подробнее, ссылка» и «ссылка», и покупатель не поймёт, к какому товару они относятся. Исправленный вариант:

<article class='item'>
  <img src='oc001.jpg' alt='Масляный фильтр Example OC-001'>
  <h3><a href='/catalog/maslyanye-filtry/example-oc-001'>Масляный фильтр Example OC-001</a></h3>
  <p>Артикул: OC-001</p>
  <p class='stock'>В наличии: 5 шт.</p>
  <button type='button'>В корзину<span class='visually-hidden'>: масляный фильтр Example OC-001</span></button>
</article>

Название товара стало ссылкой, наличие описано словами, а у кнопки есть скрытое для глаз, но доступное диктору уточнение. Если нужна отдельная ссылка «Подробнее», добавьте к ней такое же уточнение.

Ссылки: понятные названия и отличие от обычного текста

• Название ссылки должно быть понятно без окружения. Вместо «Здесь» и «Читать далее» напишите «Таблица совместимости тормозных колодок».
• Ссылка-картинка (логотип бренда, значок корзины) должна иметь текстовое описание, например «Каталог Example».
• Ссылки внутри абзацев не должны отличаться от текста только цветом: оставьте подчёркивание или другой явный признак.
• Для файлов (PDF с каталогом, схемы) укажите формат. Если ссылка открывается в новой вкладке, предупредите об этом в тексте.
• Пункты «Телефон» и «Почта» лучше оформить ссылками tel: и mailto:, а текст ссылки сделать совпадающим с номером или адресом.

Проверка с клавиатуры и экранным диктором

Уберите мышь и пройдите путь «выбрать автомобиль — найти фильтр — добавить в корзину — перейти к оформлению» клавишами Tab, Shift+Tab, Enter и пробел. Смотрите, виден ли фокус на каждом элементе, не перескакивает ли он по странице хаотично, закрываются ли всплывающие окна выбора марки и региона. Отдельно проверьте выпадающие списки «марка — модель — год» и фильтры в боковой колонке: многие самописные виджеты клавиатуре не подчиняются.

Затем включите NVDA (бесплатный диктор для Windows) или VoiceOver на iPhone и откройте список заголовков и ссылок. Если там десять одинаковых «Подробнее» и нет заголовков у блоков, структуру нужно исправлять. Таблицу применимости («подходит к автомобилям») размечайте как настоящую таблицу: с подписью caption и заголовками столбцов th, иначе диктор прочитает набор ячеек без связи с маркой и годом выпуска.

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