Перевірка доступності магазину WooCommerce за WCAG
Введіть адресу будь-якої сторінки вашого магазину WooCommerce: ми перевіримо її за WCAG 2.2 рівнів A і AA у справжньому браузері й пояснимо кожну проблему зі способом виправлення для тем WordPress, конструкторів сторінок і плагінів. Безкоштовно, без реєстрації, приблизно за хвилину. Автоматична перевірка, а не повний аудит.
- Без реєстрації
- WCAG 2.2 A і AA
- Виправлення для тем WordPress
Оновлено 14 жовтня 2026
Що перевіряє перевірка доступності WooCommerce
Скан відкриває вашу сторінку в Chromium, запускає axe-core, рушій правил з відкритим кодом, який використовує й Lighthouse, і зіставляє кожну знахідку з критерієм успіху WCAG 2.2 та з EN 301 549, європейським стандартом, на який спирається EAA. Кожну знахідку пояснює картка з нашої бібліотеки правил з окремою приміткою для WooCommerce.
Перевіряйте сторінки, якими користуються ваші покупці: головну, категорію, товар із варіантами, кошик і вхід до облікового запису. Для форми оформлення замовлення потрібен товар у кошику, тож перевіряйте її розширенням для браузера. Магазин у режимі обслуговування або за логіном можна перевірити нашим безкоштовним розширенням для браузера.
Типові проблеми в магазинах WooCommerce
У WordPress розмітка береться з трьох місць: теми, конструктора сторінок і плагінів. Примітки для WooCommerce у наших картках правил вказують, де зазвичай виникає кожна проблема:
| Проблема | Звідки вона зазвичай береться | Як виправити |
|---|---|---|
| Кнопки без назви (критично) | Теми, конструктори сторінок, плагіни кошика й списку бажань | Додайте підписи в шаблонах дочірньої теми або в налаштуваннях плагіна; про кнопки плагіна повідомте його автора |
| Списки, що розкриваються, без підпису (критично) | Вибір варіацій, сортування, віджети плагінів | Додайте підписи в шаблонах дочірньої теми або скористайтеся налаштуваннями плагіна, які виводять правильні підписи |
| Поля форм без підпису (критично) | Форми оформлення замовлення, облікового запису й пошуку; плагіни форм і оформлення замовлення | Додайте підписи в шаблонах дочірньої теми або скористайтеся параметрами плагіна, які виводять справжні елементи <label> |
| Низький контраст тексту (серйозно) | Активна тема або конструктор сторінок | Змініть кольори в конфігураторі чи глобальних стилях або перевизначте їх у CSS дочірньої теми |
| Зображення без альтернативного тексту (серйозно) | Зображення з медіатеки, слайдери, зображення плагінів | Заповніть поле «Альтернативний текст» у медіатеці й перевірте, чи тема його виводить |
| Посилання, з яких не зрозуміло, куди вони ведуть (серйозно) | Іконки в шапці, мінікошик, плагіни іконок соцмереж | Додайте текстові підписи в дочірній темі або оберіть налаштування плагіна, які виводять доступні підписи |
| Приховані елементи, до яких можна дістатися клавіатурою (серйозно) | Мобільні меню, слайдери, плагіни спливних вікон і cookie | Виправте це в коді дочірньої теми або повідомте автора плагіна |
| Рівні заголовків з пропусками (помірно) | Віджети конструктора сторінок, заголовки віджетів теми, назви товарів у списках | Задайте рівень у редакторі блоків або конструкторі (він окремий від розміру); заголовки теми змініть у дочірній темі |
| Замалі цілі для натискання (помірно) | Зразки варіацій, поля кількості, іконки | Збільште розмір або внутрішні відступи в CSS дочірньої теми |
Кнопка кошика не має назви
Що це означає для ваших відвідувачів
Покупець, який користується програмою зчитування з екрана, чує лише «кнопка» і не розуміє, що вона додає товар у кошик.
Як виправити в Shopify
У шаблоні товару додайте до кнопки з іконкою текст «Додати в кошик», видимий або через aria-label.
Елемент: .product-form > button.cart-icon
Правило: button-name · WCAG 4.1.2 Name, Role, Value (A) · EN 301 549 9.4.1.2
Виправляйте так, щоб оновлення не скасували виправлень
- Тема: використовуйте дочірню тему, конфігуратор або глобальні стилі. Зміни, внесені безпосередньо в батьківську тему, зникнуть з наступним оновленням.
- Конструктор сторінок: більшість віджетів заголовків, кнопок і зображень мають налаштування рівня, підпису й альтернативного тексту.
- Плагіни: якщо проблема у вихідному коді плагіна, повідомте про неї автора, додавши знахідку зі звіту, або пошукайте налаштування, що змінює розмітку.
- Вміст: альтернативний текст у медіатеці, тексти посилань і заголовки в описах товарів пишете ви.
Безкоштовний плагін для WordPress
Наш плагін для WordPress працює з WooCommerce. Він показує проблеми біля кожної сторінки, запису й товару в адмінці WordPress, пропонує виправлення, які ви переглядаєте й схвалюєте, перевіряє описи зображень і кольори в редакторі та додає сторінку з інформацією про доступність і форму «Повідомити про бар’єр». Він не додає віджет-оверлей і нічого не змінює в темі самостійно.
Чого перевірка не робить
Вона не змінює ваш магазин і не додає оверлей. Вона знаходить ту частину проблем WCAG, яку може виявити машина; чи можна оформити замовлення з клавіатурою та екранним читачем, чи змістовний альтернативний текст і чи зрозумілі повідомлення про помилки, має оцінити людина. Що перевіряти вручну, перелічено в нашому чек-листі WCAG 2.2.
На платному тарифі ми щотижня перевіряємо кожну сторінку магазину й готуємо звіти для власника сімома мовами; агенції отримують їх під власним брендом. Продаєте споживачам у ЄС? Пройдіть фільтр EAA з трьох запитань, щоб дізнатися, чи поширюється на вас Європейський акт про доступність. Для магазину на Shopify скористайтеся перевіркою доступності Shopify.
Часті запитання
Чи є безкоштовна перевірка доступності для WooCommerce?
Так. Введіть вище адресу сторінки магазину, категорії, товару або кошика. Ми безкоштовно й без облікового запису перевіримо цю одну сторінку за WCAG 2.2 A і AA та покажемо кожну проблему зі способом виправлення у WordPress.
Чи є плагін доступності для WooCommerce?
Так. Наш безкоштовний плагін для WordPress під’єднує сайт до Pandus і показує проблеми біля кожної сторінки, запису й товару в адмінці, пропонує виправлення, які ви схвалюєте, і додає сторінку з інформацією про доступність. Оверлей він не додає.
Навіщо виправляти проблеми в дочірній темі?
Зміни, внесені безпосередньо в тему, зникають після її оновлення. Дочірня тема, конфігуратор (customizer) або глобальні стилі зберігають ваші виправлення після оновлень.
Чи можна перевірити оформлення замовлення у WooCommerce?
Частково. Коли кошик порожній, WooCommerce зазвичай перенаправляє відвідувача з оформлення замовлення назад до кошика, тож онлайн-сканер бачить сторінку кошика. Щоб перевірити форму оформлення замовлення, додайте товар у кошик у власному браузері й запустіть там наше безкоштовне розширення для браузера.
Чи показує результат, що мій магазин відповідає EAA?
Жоден інструмент цього не покаже. Автоматична перевірка знаходить частину проблем WCAG; перевірки з клавіатури, екранним читачем і перевірка вмісту людиною однаково потрібні. Це не юридична консультація.