10 найчастіших помилок доступності в Shopify і WooCommerce

Десять найчастіших помилок доступності в Shopify і WooCommerce повторюються від магазину до магазину: недостатній контраст, зображення товарів без alt, поля форм без підписів, кнопки й посилання без назви, хаос у заголовках, неправильна мова сторінки, невидимий фокус, меню і спливаючі вікна, з яких не вийти клавіатурою, дрібні кнопки та каруселі, що крутяться самі. Більшість із них виправляються в налаштуваннях теми або в її шаблонах, без переписування магазину. Нижче — кожна помилка, що вона означає для покупця і що з нею робити.

Ми не наводимо тут відсотків чи рейтингів: список складено з типових правил axe-core і критеріїв WCAG 2.2 AA, які найчастіше стосуються вітрини, картки товару, кошика й оформлення замовлення.

10 найчастіших помилок доступності в Shopify і WooCommerce

1. Недостатній контраст тексту

Сірий текст на білому тлі, біла ціна на світлому банері, бліді підказки в полях. Людям зі слабким зором і всім, хто дивиться на телефон на сонці, такий текст важко прочитати. WCAG вимагає контраст щонайменше 4,5:1 для звичайного тексту і 3:1 для великого.

Що зробити: у Shopify змініть кольорову схему в редакторі теми; у WooCommerce — у налаштуваннях теми або в CSS дочірньої теми. Перевіряйте не лише основний текст, а й ціни зі знижкою, бейджі «Розпродаж» і текст на кнопках.

2. Зображення товарів без alt

Скринрідер на місці фото товару озвучує назву файлу або нічого. Покупець, який не бачить зображення, не знає, що на ньому.

Що зробити: у Shopify заповніть альтернативний текст для медіафайлів товару в адмінці; у WooCommerce — поле «Альтернативний текст» у бібліотеці медіа. Опишіть, що видно на фото: колір, ракурс, деталь. Декоративні зображення мають порожній alt (alt=""), щоб скринрідер їх пропускав.

3. Поля форм без підписів

Плейсхолдер «Email» усередині поля — не підпис: він зникає, коли людина починає вводити текст, і не завжди озвучується. Найболючіше це в оформленні замовлення і формі підписки.

Що зробити: у кожного поля має бути пов'язаний <label> або доступна назва. У WooCommerce перевірте форми плагінів і власні поля оформлення замовлення; у Shopify — форму підписки, пошук і форми в розділах теми.

4. Кнопки й посилання без назви

Іконка кошика, лупа пошуку, хрестик закриття, сердечко «в обране», стрілки слайдера. Візуально зрозуміло, але скринрідер озвучує лише «кнопка» або «посилання».

Що зробити: додайте текст для скринрідерів (візуально прихований) або атрибут aria-label з назвою дії: «Відкрити кошик», «Шукати», «Закрити».

5. Неправильна структура заголовків

Назва товару оформлена не як заголовок, а h4 стоїть одразу після h1, бо «так гарніше». Користувачі скринрідерів переміщуються сторінкою по заголовках, і пропущені рівні їх плутають.

Що зробити: один h1 на сторінці (у картці товару — назва товару), далі h2 для розділів без пропусків. Розмір тексту змінюйте стилями, а не рівнем заголовка.

6. Відсутня або неправильна мова сторінки

Магазин німецькою, а в коді lang="en" або атрибута немає зовсім. Скринрідер читає німецький текст з англійською вимовою.

Що зробити: перевірте атрибут lang у шаблоні та в мовних версіях. У багатомовних магазинах він має змінюватися разом із мовою.

7. Невидимий фокус

Дизайнер прибрав обведення фокусу (outline: none), бо воно «некрасиве». Людина, яка користується клавіатурою, не бачить, де вона на сторінці.

Що зробити: поверніть видимий індикатор фокусу через :focus-visible з достатнім контрастом. Перевірте, що фокус не ховається під липкою шапкою чи банером cookie (новий критерій WCAG 2.2, див. що змінилося у WCAG 2.2).

8. Меню і спливаючі вікна, з яких не вийти клавіатурою

Мегаменю відкривається лише при наведенні мишею, спливаюче вікно підписки не закривається клавішею Esc, а фокус «тікає» на сторінку за вікном або застрягає в ньому.

Що зробити: меню має відкриватися і з клавіатури; у модальному вікні фокус переходить усередину, Esc закриває вікно, після закриття фокус повертається на кнопку, яка його відкрила. Особливо перевірте вікна з плагінів та застосунків.

9. Дрібні кнопки

Кнопки «+» і «−» біля кількості, хрестик видалення з кошика, кружечки вибору кольору. На телефоні в них важко влучити, особливо людям із тремором.

Що зробити: зробіть зону натискання щонайменше 24×24 CSS-пікселі або залиште достатній відступ між цілями (критерій WCAG 2.2 «Розмір цілі»). Іконка може залишатися маленькою, якщо збільшено padding.

10. Каруселі, які крутяться самі

Банер на головній змінює слайди кожні кілька секунд, і немає кнопки паузи. Людина не встигає прочитати, а рух відволікає.

Що зробити: додайте кнопку паузи або вимкніть автопрокрутку; дайте кнопки «назад» і «вперед» з назвами; поважайте налаштування prefers-reduced-motion.

Що знаходить автоматика, а що ні

Тобто автоматична перевірка добре ловить половину списку і пропускає іншу. Наш сервіс робить автоматичну перевірку, а не повний аудит, і не дає юридичних консультацій. Звіт показує, що знайдено, що виправити першим і як це зробити саме на вашій платформі; решту варто доповнити ручним проходом клавіатурою. Як влаштовано звіт, читайте на сторінці як це працює, а повний перелік для самоперевірки — у чек-листі WCAG 2.2.

Чому не віджет доступності

У Shopify App Store і каталогах плагінів WordPress багато віджетів, які обіцяють «зробити сайт доступним одним рядком коду». Вони не виправляють жодної помилки з цього списку в самому коді теми: alt не з'являється, підписи полів не додаються, фокус не повертається. Детально — у статті чому оверлеї не працюють.

З чого почати

1. Перевірте сторінку оформлення замовлення: там помилки коштують продажів.
2. Виправте те, що можна змінити в адмінці: alt, кольори, тексти посилань.
3. Передайте розробнику або студії те, що живе в шаблонах: підписи полів, фокус, меню, модальні вікна.
4. Перевіряйте сайт регулярно: нова версія теми чи плагіна може повернути старі помилки.

Якщо ваш магазин продає споживачам у ЄС, дізнайтеся, чи стосується вас EAA: закон стосується B2C-послуг у визначених секторах і не поширюється на мікропідприємства.

Відповіді на часті питання

Які помилки найчастіші? Контраст, alt, підписи полів, кнопки без назви, заголовки, фокус і меню, яке не працює з клавіатури.

Чи можна виправити без зміни теми? Частину — так, через адмінку й налаштування теми; підписи, фокус і меню зазвичай виправляють у шаблонах.

Чи знайде автоматика все? Ні, приблизно половину списку треба перевіряти вручну.

Почніть із безкоштовної перевірки однієї сторінки свого магазину.

Джерела

• WCAG 2.2, W3C
• Understanding WCAG 2.2, W3C WAI