10 частых ошибок доступности на сайтах интернет-магазинов
· 5 мин чтения
Чаще всего на сайтах интернет-магазинов встречаются одни и те же ошибки доступности: низкий контраст текста, картинки без альтернативного текста, поля форм без подписей, кнопки-иконки без названий и невидимый фокус клавиатуры. Большинство из них исправляется в шаблоне темы, а не на каждой странице отдельно. Ниже — десять типичных ошибок, что они значат для покупателей и как их исправить.
Для каждой ошибки указан критерий WCAG и то, находит ли её автоматическая проверка.
1. Низкий контраст текста
Что это. Светло-серый текст на белом фоне, белый текст на светлом баннере, бледные цены и подписи.
Что значит для покупателя. Людям со слабым зрением и всем, кто смотрит на телефон на солнце, трудно прочитать цену или условия доставки.
Как исправить. Контраст обычного текста — не ниже 4,5:1, крупного — 3:1 (WCAG 1.4.3). Поправьте цвета в настройках темы. Автоматика находит.
2. Картинки товаров без альтернативного текста
Что это. У изображения нет атрибута alt или в нём имя файла вроде «IMG_2034.jpg».
Что значит для покупателя. Экранный диктор не может рассказать, что изображено, — покупатель не знает, как выглядит товар.
Как исправить. Заполните поле «альтернативный текст» в карточке товара: коротко, что на фото (WCAG 1.1.1). На Shopify и WooCommerce это поле есть у каждого изображения. Автоматика находит отсутствие alt, смысл проверяет человек.
3. Поля формы без подписей
Что это. В оформлении заказа вместо подписи только серый текст-подсказка внутри поля, который исчезает при вводе.
Что значит для покупателя. Экранный диктор озвучивает просто «поле ввода», а человек с нарушениями памяти забывает, что вводить.
Как исправить. У каждого поля должна быть видимая подпись, связанная с ним в коде (WCAG 1.3.1, 4.1.2). Автоматика находит.
4. Кнопки-иконки без названия
Что это. Кнопки «корзина», «поиск», «меню», «закрыть», «удалить товар» сделаны иконкой без текста.
Что значит для покупателя. Экранный диктор говорит только «кнопка», и непонятно, что она делает.
Как исправить. Добавьте доступное название, например через aria-label="Корзина" или скрытый текст (WCAG 4.1.2). Автоматика находит.
5. Ссылки без понятного текста
Что это. Ссылки «подробнее», «здесь», иконки соцсетей без названия.
Что значит для покупателя. Пользователь экранного диктора часто просматривает список ссылок, и десять одинаковых «подробнее» ничего не говорят.
Как исправить. Пишите текст ссылки так, чтобы было понятно, куда она ведёт (WCAG 2.4.4). Автоматика находит пустые ссылки, смысл проверяет человек.
6. Невидимый фокус клавиатуры
Что это. В стилях темы отключена обводка элемента в фокусе (outline: none).
Что значит для покупателя. Тот, кто пользуется клавиатурой, не видит, где он находится на странице.
Как исправить. Верните видимый стиль фокуса для ссылок, кнопок и полей (WCAG 2.4.7). Требует проверки человеком.
7. Элементы, недоступные с клавиатуры
Что это. Выбор размера, выпадающее меню или фильтр каталога работают только по клику мышью.
Что значит для покупателя. Человек, который не может пользоваться мышью, не может выбрать товар.
Как исправить. Используйте настоящие кнопки и поля вместо div с обработчиком клика; проверьте путь до оплаты клавишами Tab, Enter, пробел и Esc (WCAG 2.1.1). Требует проверки человеком.
8. Фокус перекрыт баннером или чатом
Что это. Закреплённая шапка, баннер cookie или кнопка чата закрывают элемент, на котором стоит фокус.
Что значит для покупателя. Пользователь клавиатуры не видит, что выбрал.
Как исправить. Оставьте отступы под закреплённые элементы и следите, чтобы элемент в фокусе прокручивался в видимую область (WCAG 2.4.11, новый в WCAG 2.2). Требует проверки человеком.
9. Не указан язык страницы
Что это. У тега <html> нет атрибута lang, или он не совпадает с языком страницы.
Что значит для покупателя. Экранный диктор читает текст с неправильным произношением.
Как исправить. Укажите правильный lang для каждой языковой версии (WCAG 3.1.1). Автоматика находит отсутствие атрибута.
10. Неправильная разметка ARIA
Что это. Атрибуты ARIA с ошибками: неверная роль, ссылка на несуществующий элемент, aria-hidden на элементе, который можно выбрать клавиатурой.
Что значит для покупателя. Вспомогательная технология получает неверную информацию: элемент «пропадает» или называется не тем, чем является.
Как исправить. Используйте ARIA только там, где нет подходящего HTML-элемента, и проверяйте атрибуты (WCAG 4.1.2). Автоматика находит многие из этих ошибок.
Почему эти ошибки повторяются
Почти все они живут в шаблоне: в теме Shopify, теме WooCommerce, общих компонентах шапки, корзины и оформления заказа. Поэтому ошибка на одной странице обычно означает ошибку на всех похожих страницах, а исправление в шаблоне убирает её везде.
В каком порядке исправлять
Если ошибок много, начните с того, что мешает купить:
- поля и кнопки в оформлении заказа и корзине (пункты 3, 4, 7);
- навигация с клавиатуры и видимый фокус (пункты 6, 8);
- контраст цен, кнопок и условий доставки (пункт 1);
- альтернативный текст фото товаров (пункт 2);
- всё остальное.
Такой порядок даёт быстрый результат для покупателей и для отчёта: критичные ошибки исчезают первыми.
Что не находит автоматика
Пункты 6, 7 и 8 автоматика почти не находит, а у пунктов 2 и 5 проверяет только наличие текста, но не его смысл. Поэтому автоматическая проверка — это не полный аудит. Пройдите ключевой сценарий покупки только с клавиатуры, а полный список проверок возьмите из чек-листа WCAG 2.2.
С чего начать
- Запустите бесплатную проверку одной страницы, например карточки товара или корзины. Это автоматическая проверка, а не полный аудит, и не юридическая консультация.
- Исправьте ошибки, которые она нашла, в шаблоне темы.
- Пройдите оформление заказа только с клавиатуры.
- Если ваш магазин подпадает под EAA, запишите, что осталось, в информацию о доступности.
Не пытайтесь закрыть эти ошибки виджетом-оверлеем: он не исправляет код. Почему — в статье «Почему виджеты доступности не решают проблему».