E-commerce Accessibility: 20-Point Checklist for Online Stores

В Україні понад 2,7 мільйона людей живуть з інвалідністю — і значна частина з них щодня намагається зробити покупки онлайн. Якщо ваш інтернет-магазин не відповідає базовим вимогам доступності, ви буквально відштовхуєте цих покупців до конкурентів. Крім того, з 28 червня 2025 року Європейський акт про доступність (EAA) офіційно набуває чинності для е-commerce, що орієнтується на ринок ЄС, — і штрафи за порушення вже цілком реальні.

Але доступність — це не лише юридичний обов'язок. Дослідження WebAIM і Baymard Institute показують: покращення доступності скорочує відмови на кожному кроці воронки, збільшує конверсію серед людей похилого віку та користувачів мобільних пристроїв, а також позитивно впливає на SEO. Тобто інвестиція в доступність буквально окупається.

У цій статті ви знайдете практичний чекліст з 20 пунктів, перелік типових помилок та відповідні WCAG-критерії — щоб ви могли оцінити стан свого магазину вже сьогодні.

Чому e-commerce особливо вразливий до проблем доступності

Інтернет-магазин — один із найскладніших типів вебсайтів з точки зору доступності. На відміну від простого лендингу або блогу, тут є десятки інтерактивних елементів, які мають бездоганно працювати разом:

• Каталог та фільтри — складні мультиселекти, чекбокси, слайдери цін, які мають бути керованими з клавіатури та озвученими скрін-рідером.
• Картка товару — зображення потребують alt-тексту, ціна — програмної розмітки, варіанти (розмір, колір) — доступних селекторів.
• Кошик і оформлення замовлення — багатокроковий процес, де помилки форм мають повідомлятись зрозуміло і своєчасно.
• Оплата — поля кредитної картки, iframe від платіжних провайдерів, inline-валідація — усе це зони підвищеного ризику.
• Динамічний контент — live-регіони для оновлень кошика, спливаючі повідомлення про акції, автозавершення пошуку — усе це потребує ARIA-розмітки.

Дослідження WebAIM показують, що 97,4% топ-сайтів мають помилки доступності на головній сторінці. В e-commerce ситуація гірша: чим більше інтерактивності, тим більше бар'єрів для людей з порушеннями зору, рухових функцій або когнітивними труднощами.

EAA вимоги для e-commerce (з 28.06.2025)

Європейський акт про доступність (EAA, Директива 2019/882/ЄС) — це законодавчий акт ЄС, що встановлює обов'язкові вимоги доступності для широкого кола продуктів і послуг. Для е-commerce він є особливо важливим.

Хто зобов'язаний: усі компанії, які продають товари або надають послуги споживачам у ЄС — незалежно від країни реєстрації. Якщо ваш магазин доставляє до Польщі, Німеччини або будь-якої іншої країни ЄС, вимоги EAA поширюються на вас.

Що означає для онлайн-магазинів:

• Весь вебсайт — від головної до підтвердження замовлення — має відповідати WCAG 2.1 рівень AA.
• Мобільний застосунок магазину підпадає під ті ж самі вимоги.
• Документи (PDF з умовами повернення, договір-оферта) також мають бути доступними.
• Передбачені виключення лише для мікробізнесу (до 10 осіб і річний оборот до 2 млн євро).

Чекліст доступності для e-commerce: 20 пунктів

Перевірте свій магазин за кожним із цих пунктів. Ті, що не виконані, — пріоритети для вашої команди розробки.

Каталог і фільтри

1. 1Фільтри керовані з клавіатури. Кожен чекбокс, радіокнопка та кнопка фільтру досяжні через Tab і активовані через Enter/Space без використання миші.
2. 2Оновлення результатів анонсується скрін-рідеру. Після застосування фільтру ARIA live-регіон повідомляє кількість знайдених товарів.
3. 3Слайдер цін має текстову альтернативу. Поряд зі слайдером є поля введення мінімальної та максимальної ціни.
4. 4Пошуковий рядок з автодоповненням доступний. Список підказок є ARIA-listbox, навігація по ньому — стрілками, вибір — Enter.
5. 5Сортування доступне. Dropdown "Сортувати за" є нативним <select> або коректно реалізованим кастомним компонентом з роллю combobox або listbox.

Картка товару

1. 6Усі зображення товарів мають описовий alt-текст. Наприклад: alt="Кросівки Nike Air Max 270, чорно-білі, вид збоку" — не alt="img_12345" і не порожній атрибут для інформаційних зображень.
2. 7Ціна програмно доступна. Ціна розмічена так, що скрін-рідер озвучує "1 299 гривень", а не просто "1 299" або два окремих елементи без контексту.
3. 8Варіанти товару (розмір, колір) — доступні елементи форми. Кожна група варіантів має видимий <legend>, кожен варіант — <label>. Поточний вибір анонсується.
4. 9Кнопка "Купити" / "Додати до кошика" має доступну назву. Якщо кнопок кілька (для різних товарів у каталозі), кожна з них однозначно ідентифікована: aria-label="Додати до кошика: Nike Air Max 270".

Кошик і оформлення замовлення

1. 10Зміна кількості товарів в кошику доступна з клавіатури. Кнопки "+" і "−" мають мітки типу "Збільшити кількість Nike Air Max 270".
2. 11Усі поля форми мають пов'язані мітки. Кожен <input> має <label for="..."> або aria-label. Placeholder не є заміною мітки.
3. 12Повідомлення про помилки прив'язані до полів форми. Текст помилки пов'язаний через aria-describedby, а поле має aria-invalid="true". Фокус переміщується до першої помилки після спроби відправки.
4. 13Обов'язкові поля позначені доступно. Обов'язковість не передається лише кольором зірочки. Є атрибут required або aria-required="true", а також текстова підказка.
5. 14Кроки оформлення замовлення мають видиму навігацію. Індикатор кроків доступний для скрін-рідера: поточний крок позначений aria-current="step".
6. 15Прапорці та угоди — доступні елементи. Checkbox "Погоджуюсь з умовами" має пов'язану <label>, яка включає текст умов або посилання на них.

Оплата

1. 16iframe платіжного провайдера доступний. Якщо використовуєте LiqPay, Stripe або інший провайдер через iframe — переконайтесь, що iframe має title, а його внутрішні поля доступні. Залежить від провайдера — перевіряйте окремо.
2. 17Помилки оплати зрозуміло повідомляються. "Транзакцію відхилено. Перевірте дані картки або спробуйте інший спосіб оплати" — а не просто "Помилка 403".
3. 18Відсутній таймаут сесії, що не попереджає. Якщо сесія закінчується, користувач отримує попередження заздалегідь і можливість продовжити — відповідно до WCAG 2.2.1.

Підтвердження та email

1. 19Сторінка підтвердження замовлення доступна. Успішне повідомлення анонсується скрін-рідеру (ARIA live-регіон або фокус переміщується на заголовок підтвердження). Номер замовлення легко скопіювати.
2. 20Email-підтвердження доступний. HTML-листи мають семантичну розмітку, зображення — alt-тексти, посилання — описові назви. Текстова версія є резервною.

Типові помилки в e-commerce

Ось п'ять найпоширеніших помилок доступності, які ми бачимо в українських і міжнародних інтернет-магазинах:

WCAG-критерії для e-commerce

Ось ключові критерії WCAG 2.1, які найчастіше порушуються в інтернет-магазинах:

Як перевірити доступність свого магазину

Самостійна перевірка — гарний початок. Пройдіться по чеклісту вище, запустіть Google Lighthouse (вкладка Accessibility у DevTools) і WAVE-розширення для Chrome. Однак пам'ятайте: автоматичні інструменти виявляють лише 30–57% проблем з доступністю.

Для повноцінного аудиту потрібне поєднання автоматичної перевірки, ручного тестування клавіатурою та тестування зі скрін-рідером. InclusiveWeb Audit автоматично перевіряє ваш магазин за 90+ правилами WCAG і дає пріоритезований звіт з конкретними рекомендаціями — від критичних блокерів до покращень рівня AA.