Чаму даступнасць і згода цяпер перасякаюцца

GDPR патрабуе, каб згоду можна было атрымаць ад кожнага карыстальніка, а не толькі ад тых, хто можа бачыць і націскаць банер. Еўрапейскі савет па абароне даных растлумачыў, што калі суб'ект даных не можа асэнсавана ўзаемадзейнічаць з інтэрфейсам згоды — з-за інваліднасці, якую сайт не ўлічыў, — згода не атрымана належным чынам. Гэта значыць, што cookie ўвогуле не павінны былі загружацца.

Са боку даступнасці Еўрапейскі акт аб даступнасці (EAA), перанесены ў нацыянальнае заканадаўства дзяржаў — членаў ЕС, робіць WCAG 2.1 AA мінімумам для прыватных вэб-сайтаў і дадаткаў, якія прапануюць спажывецкія паслугі. Рэжым штрафаў вар'іруецца па краінах, але звычайна складае ад 50 000 да 500 000 еўра за парушэнне, плюс загады аб выманні з рынку пры стойкім неадпаведнасці.

Асноўныя патрабаванні WCAG да банераў cookie

Кіравальнасць з клавіятуры

Кожны элемент кіравання банерам — «Прыняць», «Адхіліць», «Кіраваць наладамі», «Закрыць» — павінен быць дасягальным і кіравальным толькі з клавіятуры. Карыстальнікі павінны мець магчымасць пераходзіць паміж кнопкамі клавішай 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 забяспечвае даступнасць