Доступність інтернет-магазину — вимоги EAA та WCAG
Доступність інтернет-магазину означає, що всі покупці — включаючи людей з порушеннями зору, слуху, моторики та когнітивними особливостями — можуть повноцінно переглядати товари, додавати їх до кошика і завершувати покупку. Саме e-commerce стало однією з головних цільових галузей European Accessibility Act (EAA), що набув чинності у червні 2025 року.
Ключовий факт: 71% покупців з інвалідністю залишають інтернет-магазин якщо він недоступний. Для українського e-commerce це означає відмову від понад 500 тисяч потенційних покупців.
Чому e-commerce під особливою увагою?
Інтернет-магазини виокремлені в EAA тому що:
- Покупки онлайн — часто єдина доступна альтернатива для людей з інвалідністю, яким важко відвідати фізичний магазин
- Фінансові транзакції — критично важливо, щоб людина могла безпечно і самостійно здійснити оплату
- Складні UX-патерни — фільтри, сортування, каруселі, popup — у e-commerce їх особливо багато, і всі вони є потенційними бар'єрами
- Кількість гравців — десятки тисяч онлайн-магазинів, що продають у ЄС
Факт: WebAIM перевірив 1 000 найбільших e-commerce сайтів — середній показник доступності становив лише 49 з 100 за Lighthouse. Лише 8% мали прийнятний рівень доступності.
Вимоги EAA до інтернет-магазинів
European Accessibility Act визначає конкретні вимоги для e-commerce:
Технічна основа: WCAG 2.1 AA (і актуально WCAG 2.2 AA)
Спеціальні вимоги для онлайн-торгівлі:
- Процес оформлення замовлення (checkout) має бути повністю доступним — від кошика до підтвердження
- Платіжні форми — доступні для навігації клавіатурою і скрін-рідерами
- Опис товарів — текстова інформація про характеристики (не лише зображення)
- Повідомлення про наявність, ціни, знижки — доступні програмно (не лише кольором)
- Підтвердження замовлення — доступне для зчитування скрін-рідером
Чеклист доступності для e-commerce
Загальна структура:
-
<html lang="uk">встановлено - Один
<h1>на кожній сторінці (назва сторінки/категорії/товару) - Логічна ієрархія заголовків H1→H2→H3
- Skip-link "Перейти до основного контенту" першим елементом
- Landmark-елементи:
<header>,<nav>,<main>,<footer> - Видимий фокус на всіх інтерактивних елементах
Зображення товарів:
- Кожне фото товару має alt-текст з назвою товару та ключовими характеристиками
- Галерея зображень доступна з клавіатури (стрілки, Tab)
- Значки "Акція", "Новинка", "Хіт" мають текстовий еквівалент
- Колірні варіанти товару: не лише колірний кружечок, а й назва кольору
Кнопки та посилання:
- "Купити", "В кошик" — конкретний текст або aria-label з назвою товару
- "Купити" для кожного товару в списку:
aria-label="Купити Куртка чоловіча XL чорна" - Посилання "Читати далі" мають aria-label з назвою товару
- Іконки соціальних мереж мають aria-label
Форми (реєстрація, замовлення):
- Всі поля мають
<label>або aria-label - Обов'язкові поля позначені текстом (не лише *),
aria-required="true" - Помилки при валідації: текстовий опис + асоційований з полем
-
autocompleteатрибути на полях (name, email, tel, address) - Поля кредитної картки: autocomplete для cc-number, cc-exp, cc-csc
Доступний процес оформлення замовлення
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>
Корисні посилання
Чи була ця стаття корисною?