Доступність інтернет-магазину означає, що всі покупці — включаючи людей з порушеннями зору, слуху, моторики та когнітивними особливостями — можуть повноцінно переглядати товари, додавати їх до кошика і завершувати покупку. Саме e-commerce стало однією з головних цільових галузей European Accessibility Act (EAA), що набув чинності у червні 2025 року.
Ключовий факт: 71% покупців з інвалідністю залишають інтернет-магазин якщо він недоступний. Для українського e-commerce це означає відмову від понад 500 тисяч потенційних покупців.
Чому e-commerce під особливою увагою?
Інтернет-магазини виокремлені в EAA тому що:
- Покупки онлайн — часто єдина доступна альтернатива для людей з інвалідністю, яким важко відвідати фізичний магазин
- Фінансові транзакції — критично важливо, щоб людина могла безпечно і самостійно здійснити оплату
- Складні UX-патерни — фільтри, сортування, каруселі, popup — у e-commerce їх особливо багато, і всі вони є потенційними бар'єрами
- Кількість гравців — десятки тисяч онлайн-магазинів, що продають у ЄС
Факт: за даними реєстру ЦМЦІ (липень 2026), середня оцінка доступності 1 600+ українських інтернет-магазинів — лише 33 зі 100, а 81% не дотягують навіть до 50 балів.
Вимоги EAA до інтернет-магазинів
European Accessibility Act визначає конкретні вимоги для e-commerce:
Технічна основа: WCAG 2.1 AA (і актуально WCAG 2.2 AA)
Спеціальні вимоги для онлайн-торгівлі:
- Процес оформлення замовлення (checkout) має бути повністю доступним — від кошика до підтвердження
- Платіжні форми — доступні для навігації клавіатурою і скрін-рідерами
- Опис товарів — текстова інформація про характеристики (не лише зображення)
- Повідомлення про наявність, ціни, знижки — доступні програмно (не лише кольором)
- Підтвердження замовлення — доступне для зчитування скрін-рідером
Чеклист доступності для e-commerce
Загальна структура:
Зображення товарів:
Кнопки та посилання:
Форми (реєстрація, замовлення):
Доступний процес оформлення замовлення
Checkout — найкритичніша частина e-commerce з точки зору доступності. Будь-яка проблема тут — пряма втрата конверсії.
Кошик:
<!-- ❌ Погано — незрозуміла кнопка видалення -->
<button class="delete-btn">×</button>
<!-- ✅ Добре — описова кнопка -->
<button aria-label="Видалити Куртка чоловіча XL чорна з кошика">
<span aria-hidden="true">×</span>
</button>
Оновлення кількості:
<label for="qty-12345">Кількість: Куртка чоловіча</label>
<input
type="number"
id="qty-12345"
value="1"
min="1"
max="10"
aria-label="Кількість товару Куртка чоловіча"
/>
Прогрес оформлення:
<nav aria-label="Кроки оформлення замовлення">
<ol>
<li aria-current="step">Адреса доставки</li>
<li>Оплата</li>
<li>Підтвердження</li>
</ol>
</nav>
Успішне замовлення:
<!-- Статус повинен бути оголошений скрін-рідером -->
<div role="alert" aria-live="assertive">
<h1>Замовлення №12345 успішно оформлено!</h1>
<p>Підтвердження надіслано на [email protected]</p>
</div>
А як ваш сайт виконує ці вимоги? Перевірте безкоштовно — кількість порушень за критичністю та інструкції з виправлення.
Доступний пошук та фільтри
Пошук і фільтри — друга за складністю область для доступності в e-commerce.
Пошукове поле:
<form role="search" aria-label="Пошук товарів">
<label for="search-input">Пошук товарів</label>
<input
type="search"
id="search-input"
name="q"
autocomplete="off"
aria-autocomplete="list"
aria-controls="search-suggestions"
/>
<button type="submit">
<span class="sr-only">Знайти</span>
<svg aria-hidden="true">...</svg>
</button>
</form>
<!-- Підказки автодоповнення -->
<ul id="search-suggestions" role="listbox" aria-label="Пропозиції пошуку">
<li role="option" aria-selected="false">куртка чоловіча</li>
<li role="option" aria-selected="false">куртка жіноча зимова</li>
</ul>
Фільтри:
<aside aria-label="Фільтри товарів">
<h2>Фільтрувати</h2>
<fieldset>
<legend>Розмір</legend>
<label> <input type="checkbox" name="size" value="XS" /> XS </label>
<label> <input type="checkbox" name="size" value="S" /> S </label>
<!-- ... -->
</fieldset>
<fieldset>
<legend>Колір</legend>
<label>
<input type="checkbox" name="color" value="black" />
<span
class="color-swatch"
style="background:#000"
aria-hidden="true"
></span>
Чорний
</label>
<!-- Колір + назва, не тільки кружечок -->
</fieldset>
</aside>
Доступні картки товарів
Картки товарів у каталозі — найбільш повторюваний компонент.
<article aria-label="Куртка чоловіча зимова, XL, Чорна, 2 890 грн">
<a href="/product/12345">
<img src="jacket.jpg" alt="Куртка чоловіча зимова чорна, вид спереду" />
<h2>Куртка чоловіча зимова</h2>
</a>
<!-- Ціна — програмно, не лише візуально -->
<p>
<span class="sr-only">Ціна:</span>
<span class="price">2 890 грн</span>
<!-- Якщо є стара ціна -->
<del>
<span class="sr-only">Стара ціна:</span>
3 500 грн
</del>
</p>
<!-- Рейтинг — зрозумілий текстово -->
<p aria-label="Рейтинг: 4.5 з 5 зірок, 128 відгуків">
<span aria-hidden="true">★★★★½</span>
<span class="sr-only">4.5 з 5, 128 відгуків</span>
</p>
<button aria-label="Додати до кошика: Куртка чоловіча зимова, XL, Чорна">
В кошик
</button>
</article>