Перевірка доступності магазину Shopify за WCAG
Введіть адресу будь-якої сторінки вашого магазину Shopify: ми перевіримо її за WCAG 2.2 рівнів A і AA у справжньому браузері й пояснимо кожну проблему зі способом виправлення для тем і застосунків Shopify. Безкоштовно, без реєстрації, приблизно за хвилину. Автоматична перевірка, а не повний аудит.
- Без реєстрації
- WCAG 2.2 A і AA
- Виправлення для тем Shopify
Оновлено 14 жовтня 2026
Що перевіряє перевірка доступності Shopify
Скан відкриває вашу сторінку в Chromium, запускає axe-core — рушій правил з відкритим кодом, який використовує й Lighthouse, — і зіставляє кожну знахідку з критерієм успіху WCAG 2.2 та з EN 301 549, європейським стандартом, на який спирається EAA. Кожну знахідку пояснює картка з нашої бібліотеки правил, і кожна картка має окрему примітку для Shopify.
Перевірити можна будь-яку публічну сторінку: головну, колекцію, сторінку товару з варіантами, кошик, допис у блозі чи сторінку з правилами магазину. Сторінки за паролем (наприклад, магазин, який ще не запущено) можна перевірити нашим безкоштовним розширенням для браузера, яке працює у вашому власному браузері.
Типові проблеми в темах Shopify
Ці дані взято з приміток для Shopify у наших картках правил: там описано, де зазвичай виникає проблема і як її виправити.
| Проблема | Звідки вона зазвичай береться в Shopify | Як виправити |
|---|---|---|
| Кнопки без назви (критично) | Кнопки-іконки в темі: меню, пошук, кількість, закриття; кнопки, які додають застосунки | Додайте підпис у сніпетах Liquid теми; попросіть розробників застосунків виправити кнопки, які додають їхні застосунки |
| Списки, що розкриваються, без підпису (критично) | Вибір варіантів, сортування, вибір валюти й мови | Додайте підписи в сніпетах Liquid теми |
| Поля форм без підпису (критично) | Поля пошуку, підписки, зворотного зв’язку й кількості, форми, які додають застосунки | Додайте підписи в шаблонах Liquid або в налаштуваннях застосунку |
| Низький контраст тексту (серйозно) | Колірна схема теми | Спершу змініть кольори в налаштуваннях кольорів редактора теми, а якщо їх жорстко прописано, то в CSS теми |
| Зображення без альтернативного тексту (серйозно) | Медіафайли товарів і зображення в секціях теми | Заповніть альтернативний текст в адмінці Shopify; якщо він не виводиться, у тегу зображення в шаблоні Liquid бракує атрибута alt |
| Посилання, з яких не зрозуміло, куди вони ведуть (серйозно) | Посилання-іконки в шапці й підвалі | Додайте візуально прихований текст або aria-label у секціях і сніпетах теми |
| Приховані елементи, до яких можна дістатися клавіатурою (серйозно) | Бічні меню, висувні панелі, спливні вікна, каруселі | Виправте логіку приховування в JavaScript або Liquid теми; про віджети застосунків повідомте їхнього розробника |
| Рівні заголовків з пропусками (помірно) | Рівні, жорстко прописані в секціях, наприклад у картках товарів чи заголовках підвалу | Змініть теги у файлах Liquid; налаштування розміру заголовка зазвичай змінює лише вигляд |
| Замалі цілі для натискання (помірно) | Зразки варіантів, кнопки кількості, іконки | Збільште розмір або внутрішні відступи в 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
Тема, застосунки чи вміст: хто що виправляє
- Тема визначає більшу частину розмітки: заголовки, кнопки, меню, форми й кольори. Оновлення теми може виправити проблеми — або повернути їх, тому щотижнева повторна перевірка важлива.
- Застосунки додають власну розмітку: відгуки, списки бажань, спливні вікна, чат і банери cookie. Якщо проблема в самому віджеті застосунку, повідомте про неї розробника застосунку, додавши знахідку зі звіту.
- Вміст — ваш: альтернативний текст для зображень товарів, тексти посилань, заголовки в описах товарів і на сторінках.
- Оформлення замовлення працює на боці Shopify. Продавці не можуть змінити більшу частину його розмітки, тож скан вашого магазину зосереджується на темі та застосунках.
Чого перевірка не робить
Вона не змінює ваш магазин, не встановлює застосунок і не додає віджет-оверлей. Вона знаходить ту частину проблем WCAG, яку може виявити машина; чи змістовний альтернативний текст, чи можна оформити замовлення з клавіатурою та екранним читачем і чи зрозумілі повідомлення про помилки, має оцінити людина. Що перевіряти вручну, перелічено в нашому чек-листі WCAG 2.2.
Від однієї сторінки до всього магазину
На платному тарифі ми щотижня перевіряємо кожну сторінку магазину, показуємо, що з’явилося нового після попередньої перевірки, і готуємо звіт для власника англійською, українською, німецькою, польською, чеською, румунською або російською мовою. Агенції отримують такі самі звіти під власним брендом. Один рядок коду в theme.liquid додає сторінку з інформацією про доступність і форму «Повідомити про бар’єр»: див. код для вбудовування.
Продаєте споживачам у ЄС? Європейський акт про доступність (EAA) може поширюватися на ваш магазин, якщо це не мікропідприємство. Спершу пройдіть фільтр EAA з трьох запитань. Для магазину на WooCommerce скористайтеся перевіркою доступності WooCommerce; як наш підхід відрізняється від застосунків-оверлеїв, дивіться в порівнянні Pandus.
Часті запитання
Чи є безкоштовна перевірка доступності для Shopify?
Так. Введіть вище адресу сторінки товару, колекції або головної сторінки. Ми безкоштовно й без облікового запису перевіримо цю одну сторінку за WCAG 2.2 A і AA та покажемо кожну проблему зі способом виправлення в Shopify.
Чи можна перевірити оформлення замовлення в Shopify?
Лише сторінки, які відвідувач може відкрити без входу й оплати. Саме оформлення замовлення працює на боці Shopify, тож знайдені проблеми зазвичай містяться в темі та застосунках: формах пошуку, підписки й зворотного зв’язку, виборі варіантів, кошиках і спливних вікнах.
Чи потрібен застосунок Shopify, щоб перевірити доступність?
Ні. Наша перевірка працює ззовні, як відвідувач, тож у ваш магазин нічого не встановлюється. Для щотижневих перевірок і сторінки з інформацією про доступність ви додаєте в тему один рядок коду; застосунку Pandus у Shopify App Store поки немає.
Чи робить застосунок доступності магазин Shopify доступним?
Застосунок, який лише додає віджет чи панель інструментів, не змінює код теми, тож бар’єри залишаються. Виправляти треба в темі, у вмісті товарів і в застосунках, які додають свою розмітку.
Чи показує результат, що мій магазин відповідає EAA або ADA?
Жоден інструмент цього не покаже. Автоматична перевірка знаходить частину проблем WCAG; перевірки з клавіатури, екранним читачем і перевірка вмісту людиною однаково потрібні. Це не юридична консультація.