Zašto se pristupačnost i pristanak sada preklapaju

GDPR zahtijeva da se pristanak može dobiti od svakog korisnika, ne samo od onih koji mogu vidjeti i kliknuti na banner. Europski odbor za zaštitu podataka pojasnio je da ako ispitanik ne može smisleno komunicirati sa sučeljem za pristanak — zbog invaliditeta koji stranica nije prilagodila — pristanak nije valjano dobiven. To znači da se kolačići nikada nisu trebali učitati.

Na strani pristupačnosti, Europski zakon o pristupačnosti (EAA), prenesen u nacionalno zakonodavstvo u svim državama članicama EU, čini WCAG 2.1 AA minimalnim standardom za web stranice i aplikacije privatnog sektora koje nude potrošačke usluge. Sustav sankcija razlikuje se prema državi, ali obično se kreće od 50.000 do 500.000 eura po prekršaju, uz naloge za povlačenje s tržišta za trajnu neusklađenost.

Temeljni WCAG zahtjevi za bannere za kolačiće

Upravljanje tipkovnicom

Svaka kontrola bannera — Prihvati, Odbij, Upravljaj preferencijama, zatvori — mora biti dostupna i operativna samo s tipkovnicom. Korisnici moraju moći navigirati kroz gumbe logičnim redoslijedom pomoću Tab i aktivirati ih tipkama Enter ili Space. Fokus mora biti vidljiv s minimalnim omjerom kontrasta 3:1 u odnosu na pozadinu.

Hvatanje fokusa u modalnim bannerima

Ako banner blokira interakciju s ostatkom stranice, fokus tipkovnice mora biti zarobljen unutar bannera dok korisnik ne napravi izbor. Korisnici ne smiju moći izaći tipkom Tab iz bannera kako bi pomicali podređenu stranicu. Kad je fokus bio zarobljen i banner se zatvori, fokus bi se trebao vratiti na element koji je pokrenuo banner ili na razumnu zadanu vrijednost.

Najave čitača zaslona

Banner mora biti najavljen kao dijaloški okvir s dostupnim imenom i ulogom. Koristite `role="dialog"` ili `role="alertdialog"` s `aria-labelledby` koji pokazuje na naslov bannera i `aria-describedby` koji pokazuje na pojašnjavajući tekst.

Kontrast boja

Tekst tijela mora ispunjavati kontrast 4,5:1 u odnosu na pozadinu; veliki tekst (18pt+ ili 14pt podebljano) zahtijeva 3:1. Tekst gumba, ikone i pokazatelji fokusa imaju vlastite minimalne zahtjeve kontrasta. Svijetlosivi gumb "Odbij" na bijeloj pozadini čest je WCAG propust koji viđamo u revizijama.

Bez naznaka temeljenih isključivo na boji

Ne oslanjajte se isključivo na boju za razlikovanje Prihvati od Odbij. Koristite različite oznake, ikone ili oblike kako bi korisnici s poremećajem raspoznavanja boja mogli razlikovati gumbe.

Tamni uzorci i pristupačnost

WCAG 2.2 uvodi nove kriterije koji izravno ciljaju tamne uzorke — posebno relevantno za pristanak:

• 3.3.8 Pristupačna autentikacija — zabranjuje kognitivne zagonetke kao frikciju pristanka.
• 3.3.7 Redundantni unos — korisnici ne bi trebali morati ponovo unositi informacije samo da bi povukli pristanak.
• 2.4.11 Fokus nije skriven — sam banner ne smije zaklanjati pokazatelj fokusa elemenata iza njega.
• 2.5.7 Pokreti povlačenjem — ako vaš banner koristi interakciju povuci-za-prihvati, mora postojati alternativa s jednim pokazivačem.

RTL i internacionalizacija

Pristupačnost se proteže na jezike s desna na lijevo (arapski, hebrejski, perzijski, urdu) i na izgovor čitača zaslona:

• Postavite `dir="rtl"` na banner kada je jezik dokumenta RTL kako bi redoslijed gumba i tijek fokusa odgovarali smjeru čitanja.
• Koristite ispravne atribute `lang` na prevedenom sadržaju bannera kako bi čitači zaslona izgovarali riječi ispravnom fonetikom.
• Zrcalite ikonografiju — strelice i pokazatelji napretka trebaju se preokrenuti za RTL lokalizacije.

Testiranje bannera za usklađenost s WCAG-om

Ne oslanjajte se na jedan alat. Kombinirajte automatizirano skeniranje s testiranjem stvarnih pomoćnih tehnologija:

• axe DevTools ili Lighthouse — automatski otkriva otprilike 30-40% WCAG propusta.
• NVDA ili JAWS na Windows, VoiceOver na Mac/iOS, TalkBack na Android — testirajte sa stvarnim čitačima zaslona. Može li se banner najaviti, navigirati i odbaciti koristeći samo čitač zaslona?
• Navigacija samo tipkovnicom — iskopčajte miš. Ako ne možete Prihvatiti, Odbiti i upravljati preferencijama, ni korisnici tipkovnice ne mogu.
• Simulacija sljepoće za boje — Chrome DevTools ima ugrađene simulatore nedostataka vida. Provjerite da se Prihvati i Odbij mogu razlikovati u uvjetima protanopije, deuteranopije i tritanopije.
• Zum na 400% — WCAG zahtijeva da sadržaj ostane upotrebljiv pri zumiranaju od 400% bez horizontalnog pomicanja. Banneri s fiksnim položajem često ne prolaze ovaj test.

Uobičajeni WCAG propusti koje viđamo

• Odbij skriven iza ikone zupčanika — tamni uzorak uz propust pristupačnosti (gumb ikone nema dostupno ime).
• Fokus nikada ne dostiže banner — banneri koji privlače vizualnu pažnju, ali se preskaču u Tab redoslijedu.
• Modalni banner bez hvatanja fokusa — korisnici mogu tabom doći do pozadinske stranice dok banner tvrdi da blokira interakciju.
• Nema `aria-live` na promjenama preferencija — korisnici čitača zaslona ne čuju potvrdu da je njihov izbor pohranjen.
• Prevedeni banneri bez atributa `lang` — čitači zaslona izgovaraju španjolski sadržaj engleskom fonetikom.

Kako FlexyConsent pruža pristupačnost