Зашто се приступачност и пристанак сада преклапају

GDPR захтева да пристанак буде доступан сваком кориснику, а не само онима који могу да виде и кликну на банер. Европски одбор за заштиту података разјаснио је да ако субјект података не може смислено да ступи у интеракцију са интерфејсом за пристанак — због инвалидитета са којим сајт није усклађен — пристанак није ваљано прибављен. То значи да колачићи никада нису требали да буду учитани.

На страни приступачности, Европски закон о приступачности (EAA) уграђен у национално законодавство широм држава чланица ЕУ чини WCAG 2.1 АА минималним за веб-сајтове приватног сектора и апликације које нуде потрошачке услуге. Режим санкција варира по земљама, али обично се креће од 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 има уграђене симулаторе оштећења вида. Проверите да ли су Прихвати и Одбиј разликовљиви при протанопији, deuteranopiji и тританопији.
• Увећање на 400% — WCAG захтева да садржај остане употребљив при увећању 400% без хоризонталног скроловања. Банери са фиксном позицијом често не пролазе овај тест.

Уобичајени неуспеси приступачности које видимо

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

Kako FlexyConsent пружа приступачност