Қолжетімділік пен келісім неліктен қазір қабаттасады

GDPR барлық пайдаланушылардан, тек баннерді көре алатын және басып шыға алатындардан ғана емес, келісім алынуы мүмкін болуын талап етеді. Еуропалық деректерді қорғау кеңесі деректер субъектісі сайттың мүмкіндіктер бермеген мүгедектігіне байланысты келісім интерфейсімен мағыналы өзара әрекет ете алмаса, келісім жарамды түрде алынбайтынын нақтылады. Бұл cookie-лер мүлде жүктелмеуі тиіс болғанын білдіреді.

Қолжетімділік жағынан, ЕО мүше мемлекеттерінің ұлттық заңнамасына енгізілген Еуропалық қолжетімділік заңы (EAA) тұтынушылық қызметтер ұсынатын жеке сектор веб-сайттары мен қосымшалары үшін WCAG 2.1 AA деңгейін ең аз талап етеді. Санкциялар режимі елге байланысты әртүрлі, бірақ әдетте бұзушылық үшін €50 000-нан €500 000-ға дейін, сонымен қатар ұзаққа созылған сәйкессіздік үшін нарықтан шығару бұйрықтары шығарылады.

Cookie баннерлеріне арналған WCAG негізгі талаптары

Пернетақта арқылы жұмыс жасау

Баннердің барлық элементтері — Қабылдау, Бас тарту, Параметрлерді басқару, жабу — тек пернетақтамен жетіп және жұмыс жасауға болатын болуы керек. Пайдаланушылар Tab арқылы батырмалар бойынша логикалық ретпен жылжи алуы және Enter немесе Space арқылы іске қоса алуы тиіс. Фокус фонға қатысты кемінде 3:1 контраст қатынасымен көрінетін болуы керек.

Модальдық баннерлердегі фокус тұзағы

Егер баннер беттің қалған бөлігімен өзара әрекетті блоктайтын болса, пернетақта фокусы пайдаланушы таңдау жасағанша баннер ішінде тұйықтануы тиіс. Пайдаланушылар Tab арқылы баннерден шығып, негізгі бетті айналдыра алмауы керек. Фокус тұйықталып, баннер жабылғанда, фокус баннерді іске қосқан элементке немесе парасатты әдепкіге оралуы керек.

Экран оқырманының хабарландырулары

Баннер қолжетімді атау мен рөлі бар диалог ретінде жариялануы тиіс. Баннер тақырыбына `aria-labelledby` және түсіндірмелі мәтінге `aria-describedby` бар `role="dialog"` немесе `role="alertdialog"` пайдаланыңыз.

Түс контрасты

Негізгі мәтін фонға қатысты 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 — WCAG сәтсіздіктерінің шамамен 30-40% автоматты түрде анықтайды.
• Windows-тағы NVDA немесе JAWS, Mac/iOS-тағы VoiceOver, Android-тағы TalkBack — нақты экран оқырмандарымен тестілеңіз. Баннерді тек экран оқырманын пайдалана отырып жариялауға, шарлауға және жабуға болады ма?
• Тек пернетақта навигациясы — тінтуірді ажыратыңыз. Егер Қабылдай, Бас тарта және параметрлерді басқара алмасаңыз, пернетақта пайдаланушылары да алмайды.
• Түс соқырлығын имитациялау — Chrome DevTools-та кіріктірілген көру кемістігі имитаторлары бар. Протанопия, дейтеранопия және тританопия жағдайында Қабылдау мен Бас тартудың ажыратылатынын тексеріңіз.
• 400%-ке дейін ұлғайту — WCAG горизонталь айналдырусыз 400% ұлғайтуда контенттің пайдаланылуын талап етеді. Тіркелген позициялы баннерлер бұл тестте жиі сәтсіздікке ұшырайды.

Жиі кездесетін қолжетімділік сәтсіздіктері

• Бас тарту тісті дөңгелек белгішесінің артына жасырылған — қара үлгі плюс қолжетімділік сәтсіздігі (белгіше батырмасында қолжетімді атау жоқ).
• Фокус ешқашан баннерге жетпейді — визуалды назарды ұрлайтын, бірақ Tab тәртібінде өткізіп жіберілетін баннерлер.
• Фокус тұзағысыз модальдық баннер — баннер өзара әрекетті блоктайтынын айтқанда пайдаланушылар фон бетіне Tab арқылы өте алады.
• Параметрлер өзгерістерінде `aria-live` жоқ — экран оқырманы пайдаланушылары таңдауы сақталғаны туралы растауды ести алмайды.
• `lang` атрибутынсыз аударылған баннерлер — экран оқырмандары испан тілінің мәтінін ағылшын фонетикасымен айтады.

FlexyConsent қолжетімділікті қалай қамтамасыз етеді