Доступность магазина на WooCommerce Ядро подтянули — ломаются тема, расширения и путь к оплате

Что уже исправили в самом WooCommerce

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

• Модальные окна удерживают и возвращают фокус, а их появление объявляется
• Поля в оформлении заказа, входе и личном кабинете подписаны, ошибки связаны с полями
• Изменение корзины и выбор варианта товара объявляются экранному диктору
• У вкладок, аккордеонов и фильтров заданы роли
• У кнопок убрали неоднозначные и пустые подписи
• Поправлена структура заголовков в шаблонах товара, оформления, личного кабинета и мини-корзины
• Клавиатура в фильтрах товаров, отзывах и мини-корзине — ловушки фокуса и порядок перехода

Почему это не доходит до вашего магазина

1. 01

   Старая версия

   Исправления живут в новых выпусках. Магазин, который не обновляли год-два, их просто не получил — и первое, что мы проверяем, это версия WooCommerce и WordPress.

2. 02

   Тема держит свои копии шаблонов

   Темы часто кладут к себе копии шаблонов WooCommerce, чтобы изменить вёрстку. Такая копия застывает в том виде, в каком её сделали: улучшения ядра до неё не доходят. В разделе «Состояние» WooCommerce такие шаблоны помечены как устаревшие — это первое место, куда мы смотрим.

3. 03

   Расширения

   Свотчи вариантов, фильтры, конструкторы доставки, виджеты отзывов и чаты рисуют свою разметку. Про доступность ядра они не знают, и их надо проверять по одному.

4. 04

   Настройки и содержимое

   Описания товаров, названия вариантов, тексты кнопок и картинки с текстом внутри — это ваш контент. Ни одно обновление его не исправит.

Что ломается в магазине чаще всего

1. 01

   Кнопки «В корзину» в каталоге

   На странице категории двадцать одинаковых кнопок. Экранный диктор перечисляет «в корзину, в корзину, в корзину» — какой товар он кладёт, человек не знает. Лечится добавлением названия товара в доступное имя кнопки.

2. 02

   Выбор варианта

   Цвет и размер часто делают квадратиками-картинками без имени и без состояния «выбрано». С клавиатуры по ним не пройти, а диктор не говорит, что именно выбрано сейчас.

3. 03

   Поле количества

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

4. 04

   Фильтры

   Ползунок цены почти всегда недоступен с клавиатуры, а результат фильтрации подгружается молча: страница обновилась, но диктор об этом не сказал.

5. 05

   Галерея и увеличение

   Лупа и слайдер фотографий — частый источник ловушек фокуса. Отдельная беда — характеристики, вшитые в картинку: для диктора их не существует.

6. 06

   Оформление заказа

   Самое дорогое место: ошибки оплаты показываются цветом без текста, поля адреса подписаны подсказкой внутри, а шаг доставки обновляется без объявления. Человек не понимает, почему заказ не уходит.

Что делаем мы

1. 01

   Проходим весь путь покупки

   Не одну страницу, а сценарий: каталог → карточка → корзина → оформление → письмо о заказе. Только с клавиатуры и с экранным диктором. Большая часть находок в магазине живёт именно между страницами.

2. 02

   Разбираемся с темой

   Смотрим, какие шаблоны тема переопределила и насколько они устарели. Часто правильный ответ — не чинить копию, а убрать её и вернуться к шаблону ядра, где всё уже исправлено.

3. 03

   Чиним остальное в дочерней теме

   Имена кнопок с названием товара, подписи полей количества, состояние у свотчей, объявления при изменении корзины. Правки идут в дочернюю тему, чтобы обновление их не стёрло.

4. 04

   Проверяем расширения

   Каждое по отдельности. Если фильтр или виджет отзывов недоступен и разработчик не отвечает — предлагаем замену и говорим, во что это обойдётся.

5. 05

   Готовим декларацию

   Пишем текст декларации доступности и ставим отдельной страницей со ссылкой в подвале. Оставшиеся ограничения перечисляем в ней честно.

Чего мы не делаем

• Не ставим виджет доступности вместо работы над магазином
• Не обещаем «полного соответствия»: даже разработчики WooCommerce его не заявляют
• Не трогаем приём платежей без согласования: любая правка на шаге оплаты проверяется тестовым заказом
• Не меняем дизайн карточки и каталога — работаем с кодом, а не с макетом

Проверьте свой магазин

Бесплатная проверка смотрит одну страницу, адрес которой вы ввели. Для магазина этого мало: проверьте по очереди главную, страницу категории и карточку товара — результаты обычно разные, и хуже всего бывает как раз карточка.