Защо Достъпността и Съгласието Сега Се Припокриват

GDPR изисква съгласието да може да бъде получено от всеки потребител, не само от тези, които могат да видят и кликнат върху банер. Европейският съвет за защита на данните е изяснил, че ако субектът на данни не може смислено да взаимодейства с интерфейса за съгласие — поради увреждане, което сайтът не е взел под внимание — съгласието не е валидно получено. Това означава, че бисквитките изобщо не е трябвало да се зареждат.

По отношение на достъпността, Европейският акт за достъпност (EAA), въведен в националното законодателство в държавите членки на ЕС, прави WCAG 2.1 AA минимум за уебсайтове и приложения от частния сектор, предлагащи потребителски услуги. Санкционният режим варира по страни, но обикновено варира от 50 000 до 500 000 евро на нарушение, плюс заповеди за изтегляне от пазара при продължително несъответствие.

Основните Изисквания на WCAG за Банери за Бисквитки

Управляемост с Клавиатура

Всеки контрол на банера — Приемам, Отхвърлям, Управление на предпочитанията, затваряне — трябва да бъде достъпен и управляем само с клавиатурата. Потребителите трябва да могат да преминават с Tab между бутоните в логически ред и да ги активират с Enter или Space. Фокусът трябва да бъде видим с минимален коефициент на контраст 3:1 спрямо фона.

Улавяне на Фокус в Модални Банери

Ако банерът блокира взаимодействието с останалата част от страницата, фокусът на клавиатурата трябва да бъде уловен в банера, докато потребителят направи избор. Потребителите не трябва да могат да използват Tab извън банера, за да превъртят основната страница. Когато фокусът е бил уловен и банерът се затвори, фокусът трябва да се върне към елемента, задействал банера, или към разумна стойност по подразбиране.

Обявления от Екранен Четец

Банерът трябва да бъде обявен като диалог с достъпно име и роля. Използвайте role="dialog" или role="alertdialog" с aria-labelledby, сочещ към заглавието на банера, и aria-describedby, сочещ към обяснителния текст.

Цветен Контраст

Основният текст трябва да отговаря на контраст 4.5:1 спрямо фона; голям текст (18pt+ или 14pt получер) изисква 3:1. Текстът на бутоните, иконите и индикаторите за фокус имат свои минимуми за контраст. Светлосив бутон „Отхвърлям" върху бял фон е честа грешка по WCAG, която виждаме в одити.

Не Само Цветови Знаци

Не разчитайте единствено на цвят, за да разграничите Приемам от Отхвърлям. Използвайте различни етикети, икони или форми, за да могат потребителите с цветна слепота да различат бутоните.

Тъмни Шаблони и Достъпност

WCAG 2.2 въвежда нови критерии, които пряко насочват към тъмните шаблони — особено значими за съгласието:

• 3.3.8 Достъпна Автентикация — забранява когнитивни пъзели като триене при съгласие.
• 3.3.7 Излишно Въвеждане — потребителите не трябва да се налага да въвеждат повторно информация само за да оттеглят съгласието.
• 2.4.11 Фокусът Не е Скрит — самият банер не трябва да скрива индикатора за фокус на елементите зад него.
• 2.5.7 Движения на Плъзгане — ако банерът използва взаимодействие с плъзгане за приемане, трябва да съществува алтернатива с един показалец.

RTL и Интернационализация

Достъпността се разширява до езиците отдясно наляво (арабски, иврит, персийски, урду) и до произношението на екранния четец:

• Задайте dir="rtl" на банера, когато езикът на документа е RTL, така че редът на бутоните и потокът на фокуса да съответстват на посоката на четене.
• Използвайте правилни атрибути lang върху преведеното съдържание на банера, за да могат екранните четци да произнасят думите с правилната фонетика.
• Огледало на иконографията — шевроните, стрелките и индикаторите за напредък трябва да се обърнат за RTL локали.

Тестване на Банера ви за Съответствие с WCAG

Не разчитайте на един инструмент. Комбинирайте автоматичното сканиране с реално тестване с помощни технологии:

• axe DevTools или Lighthouse — улавя приблизително 30-40% от грешките по WCAG автоматично.
• NVDA или JAWS на Windows, VoiceOver на Mac/iOS, TalkBack на Android — тествайте с реални екранни четци. Може ли банерът да бъде обявен, навигиран и отхвърлен само с екранния четец?
• Навигация само с клавиатура — извадете мишката. Ако не можете да Приемете, Отхвърлите и управлявате предпочитанията, потребителите на клавиатура също не могат.
• Симулация на цветна слепота — Chrome DevTools има вградени симулатори за зрителни дефицити. Проверете дали Приемам и Отхвърлям могат да се различат при протанопия, дейтеранопия и тританопия.
• Мащабиране до 400% — WCAG изисква съдържанието да остане използваемо при 400% мащабиране без хоризонтално превъртане. Банерите с фиксирана позиция често не преминават този тест.

Обичайни Грешки в Достъпността, Които Виждаме

• Скрито Отхвърляне зад икона на зъбно колело — тъмен шаблон плюс грешка в достъпността (няма достъпно наименование на бутона с иконата).
• Фокусът никога не достига до банера — банери, привличащи визуалното внимание, но пропуснати в реда на Tab.
• Модален банер без улавяне на фокус — потребителите могат да превключат с Tab в основната страница, докато банерът претендира да блокира взаимодействието.
• Няма aria-live при промени в предпочитанията — потребителите на екранен четец не чуват потвърждение, че изборът им е запазен.
• Преведени банери без атрибут lang — екранните четци произнасят испански текст с английска фонетика.

Как FlexyConsent Осигурява Достъпност