Представьте: покупатель выбирает куртку в вашем магазине, не касаясь мыши. Через Tab добирается до выбора размера, но непонятно, какой вариант сейчас в фокусе. Enter открывает мини-корзину. Дальше тупик: выбраться из нее и перейти к оформлению заказа не выходит.
Покупка сорвалась. Клиенту не должны требоваться мышь, идеальное зрение или догадки, чтобы вам заплатить.
Я бы включал такую проверку в задание на разработку магазина WooCommerce вместе с настройкой доставки и оплаты. Начинать стоит с простого: человек вообще может купить товар?
Что охватывает Европейский акт о доступности
Европейский акт о доступности, Директива (ЕС) 2019/882, применяется с 28 июня 2025 года. Он охватывает определенные товары и услуги, включая электронную торговлю для потребителей. В Эстонии его требования закреплены в Законе о доступности товаров и услуг и постановлениях № 45 и № 46. Разъяснения дает TTJA.
Речь не только о главной странице. TTJA описывает весь путь: выбор товара, регистрацию, оплату, письма с подтверждением покупки, информацию о возврате или обмене.
Есть ли исключение для маленького магазина?
Да, для услуг это существенная оговорка. Статья 4(5) освобождает микропредприятия, оказывающие услуги. Определение требует менее 10 человек И при этом либо годовой оборот не выше 2 млн евро, ЛИБО итог годового баланса не выше 2 млн евро.
Важны обе части. Ровно 10 человек - условие по численности уже не выполнено. Ровно 2 млн евро укладываются в соответствующий финансовый предел. При численности менее 10 достаточно одного из двух финансовых показателей.
Продажи исключительно другим компаниям, то есть настоящий B2B, не входят в это определение потребительской электронной торговли. Но поле «Название компании» не превращает магазин для обычных покупателей в B2B.
И еще: исключение касается услуг, а не всех микропредприятий, выпускающих охваченные директивой товары. У освобожденного магазина могут оставаться другие юридические обязанности. Старый договор на разработку тоже не дает автоматической отсрочки до 2030 года: переходные положения узкие. Это практические ориентиры, не юридическая консультация.
На какой стандарт ориентироваться
В рекомендациях TTJA указан EN 301 549 V3.2.1, опирающийся на WCAG 2.1 AA. В обновлении AccessibleEU за сентябрь 2026 года сообщается о публикации V4.1.1 с WCAG 2.2. По тому же сообщению, официальная ссылка на эту версию в Официальном журнале ЕС еще ожидается.
Для разработки я бы выбрал WCAG 2.2 AA. Но это ориентир, не сертификат. EN 301 549 охватывает больше, чем веб-критерии WCAG. Одни проверки WCAG не подтверждают полное соответствие EAA.
Не путайте ссылку на стандарт для госсектора с автоматической юридической гарантией соответствия EAA. Сама публикация новой версии не устанавливает новый срок выполнения требований.
Первая проверка магазина за десять минут
Работайте на тестовой копии сайта с тестовым платежным шлюзом. Никаких настоящих заказов и платежей. Этот проход опирается на проверки W3C WAI и рекомендации WooCommerce: он помогает найти очевидные препятствия, но не все проблемы доступности.
- Отложите мышь. Перемещайтесь через Tab и Shift+Tab. Enter открывает ссылки и активирует кнопки, пробел подходит, например, для флажков. Проверьте видимый фокус и рабочую ссылку пропуска повторяющейся навигации. Заметная рамка здесь очень кстати.
- Выберите вариант товара. Задайте размер и цвет куртки только клавиатурой. Проверьте выпадающие списки и нестандартные цветовые образцы. Понятно ли, что выбрано и какие сочетания недоступны?
- Откройте меню и мини-корзину. Проверьте закрытие и логичное перемещение фокуса. Измените количество товара. Озвучивает ли сайт обновления, придется отдельно проверить скринридером: глазами этого не установить.
- Ошибитесь при оформлении. На тестовой копии введите некорректный email. Каждому полю нужна полноценная подпись, не только подсказка внутри. Ошибка должна объяснять исправление и быть связана с нужным полем. Одна красная рамка ничего толком не объясняет.
- Проверьте контраст и цвет. WCAG AA от W3C требует контраст не ниже 4,5:1 для обычного текста и 3:1 для крупного. Проверьте реальные пары цветов калькулятором контраста. Наличие товара и ошибки нельзя обозначать одним цветом.
- Просмотрите альтернативные описания изображений. Alt товара должен передавать полезные визуальные детали, например скручивающийся верх рюкзака. Декоративным изображениям нужен пустой alt. Не забивайте каждую картинку поисковыми ключами.
- Увеличьте масштаб. Попробуйте 200% и 400% в браузере, затем узкую мобильную верстку. Убедитесь что суммы, подписи полей и кнопки оплаты остаются читаемыми и рабочими, не перекрываются и не исчезают.
- Откройте всплывающие окна. Проверьте рекламные окна и cookie-баннер. Получается закрыть их и продолжить без ловушки фокуса? Саму настройку согласия разбирает отдельная статья про Consent Mode v2 и аналитику WooCommerce.
- Пройдите оплату и доставку. В песочницах проверьте платежные iframe, аутентификацию, выбор банка и виджеты постаматов. Не проводите настоящий платеж ради завершения проверки. Запишите, какие сценарии провайдера проверить не удалось.
- Запустите видео о товаре. Проверьте субтитры для речи и значимых звуков. Для важной визуальной информации нужна текстовая альтернатива. Например, если сборку показывают без голосовых пояснений.
Десять минут - это первичный отсев проблем. Даже хороший результат не заменяет более долгого тестирования с NVDA или VoiceOver, включая динамические объявления и реалистичные сценарии оплаты.
Где WooCommerce обычно спотыкается
В документации WooCommerce описана поддержка клавиатуры, фокуса, скринридеров, подписей полей и сообщений об ошибках с совместимыми темами. Но это не гарантия для конкретно вашего магазина.
Конструктор страниц может убрать оформление фокуса. Нестандартные образцы вариантов товара - игнорировать клавиатуру. У кнопок-иконок порой нет доступного имени, а расширение оформления заказа заменяет рабочие поля проблемными. Старые блоки, выведенные из употребления, тоже могут иметь ограниченную поддержку.
По разъяснениям TTJA, за услугу отвечает продавец, включая выбранные платные решения для оплаты и доставки. Просите у поставщиков подтверждения и доступ для тестирования. Значка на сайте мало.
Проверьте и действия после покупки. Если внедряете кнопку отказа от договора в WooCommerce, она тоже должна работать с клавиатуры. Сам EAA не вводит требование о такой кнопке.
Сначала исправьте то, что мешает купить
Я бы занялся ловушкой на странице оплаты раньше декоративного недочета на главной. Подписи, контраст и полезные alt часто исправляются быстро. Но они не компенсируют неработающую оплату.
Сначала сделайте бэкап. Меняйте сайт на тестовой копии, затем повторно проверяйте весь путь покупки на новые поломки. Точечная доработка существующего сайта поможет исправить тему или расширения без полной переделки. После этого организуйте полный ручной аудит со специалистом по доступности и пользователями с инвалидностью. Включите реалистичные сценарии со скринридером и оплатой.
Эстонскому поставщику услуг, подпадающему под требования, также нужна доступная информация о соответствии. Ее нужно предоставлять в доступных письменной и устной формах и поддерживать актуальной весь срок оказания услуги. Описывайте проверенный объем без приукрашивания. Результат сканера - не основание заявлять о сертификации.
Сегодня откройте тестовую копию и выберите один вариативный товар. Отложите мышь. Получится добраться до кнопки тестовой оплаты?