Меню документації
Доступність (WCAG)
Доступність банера CookieHug: семантика діалогу, керування з клавіатури, робота з фокусом, зчитувачі екрана та зменшений рух.
Доступність банера (WCAG)
Банер згоди часто є першим інтерактивним елементом, з яким стикається відвідувач — зокрема ті, хто користується клавіатурою або зчитувачем екрана. Банер CookieHug спроєктовано так, щоб відповідати критеріям WCAG 2.1 AA, і ним можна повністю користуватися без миші, без жодних додаткових налаштувань з вашого боку.
Семантика для допоміжних технологій
- Банер — це діалог (
role="dialog") з пов'язаними заголовком і описом (aria-labelledby/aria-describedby) — зчитувачі екрана коректно оголошують його під час відкриття. - У розташуванні по центру (з затемненим тлом) банер позначено як модальний (
aria-modal="true"). - Перемикачі категорій — це справжні елементи
checkboxз підписами, тож зчитувачі екрана називають категорію та її стан. - Розгортні секції (категорії, деталі cookie) мають
aria-expandedіaria-controls, тому згорнутий стан завжди озвучується. - Декоративні елементи (іконка cookie, стрілки) приховані від зчитувачів екрана (
aria-hidden). - Сповіщення Global Privacy Control має роль
status— його текст озвучується, не забираючи фокус.
Керування з клавіатури й фокус
| Клавіша | Дія |
|---|---|
| Tab / Shift+Tab | Переміщує між усіма елементами банера (кнопки, перемикачі, розгортні секції); у модальному режимі фокус циркулює всередині діалогу (пастка фокуса) |
| Enter / Пробіл | Активує кнопки, перемикає категорії, розгортає секції та деталі cookie |
| Escape | Закриває немодальний банер (рішення можна ухвалити пізніше через плаваючу іконку) |
Фокусом керує сам банер: коли відвідувач його відкриває, фокус переходить у діалог, а після закриття повертається туди, звідки прийшов. Коли немодальний банер з'являється автоматично, фокус зі сторінки не забирається. Кожен елемент має видимий індикатор фокуса (:focus-visible). Плаваюча іконка повторного відкриття — теж кнопка, доступна з клавіатури.
Зменшений рух
Коли система відвідувача повідомляє про налаштування prefers-reduced-motion, анімації та переходи банера вимикаються.
Що залишається на вашому боці
- Контраст кольорів — кольори банера налаштовуєте ви; тримайте контраст тексту й тла щонайменше 4,5:1 (WCAG 1.4.3). Вбудовані шаблони стилів відповідають цьому порогу.
- Проста мова — якщо ви замінюєте тексти банера, робіть їх зрозумілими й без жаргону.
- Мова банера має відповідати мові сторінки — SDK визначає її автоматично з атрибута
lang, але замінені тексти мають бути написані правильною мовою.