Proč se přístupnost a souhlas nyní překrývají

GDPR vyžaduje, aby souhlas bylo možné získat od každého uživatele, nejen od těch, kteří mohou banner vidět a kliknout na něj. Evropský sbor pro ochranu osobních údajů objasnil, že pokud subjekt údajů nemůže smysluplně interagovat s rozhraním souhlasu — kvůli zdravotnímu postižení, které web nezohlednil — souhlas není platně získán. To znamená, že cookies by vůbec neměly být načteny.

Na straně přístupnosti Evropský zákon o přístupnosti (EAA), transponovaný do národního práva ve všech členských státech EU, stanovuje WCAG 2.1 AA jako minimum pro webové stránky a aplikace soukromého sektoru nabízející spotřebitelské služby. Sankční režim se v jednotlivých zemích liší, ale obvykle se pohybuje od 50 000 do 500 000 eur za přestupek, plus příkazy k stažení z trhu při přetrvávajícím nesouladu.

Základní požadavky WCAG pro bannery cookies

Ovladatelnost klávesnicí

Každý ovládací prvek banneru — Přijmout, Odmítnout, Spravovat předvolby, zavřít — musí být dostupný a ovladatelný pouze pomocí klávesnice. Uživatelé by měli být schopni procházet tlačítky v logickém pořadí pomocí Tab a aktivovat je pomocí Enter nebo Space. Fokus musí být viditelný s minimálním kontrastním poměrem 3:1 vůči pozadí.

Zachycení fokusu v modálních bannerech

Pokud banner blokuje interakci se zbytkem stránky, fokus klávesnice musí být zachycen uvnitř banneru, dokud uživatel neudělá volbu. Uživatelé by neměli být schopni přejít tabelátorem z banneru na posouvání základní stránky. Když byl fokus zachycen a banner se zavře, fokus by se měl vrátit k prvku, který banner spustil, nebo k rozumnému výchozímu nastavení.

Oznámení čtečky obrazovky

Banner musí být oznámen jako dialog s přístupným názvem a rolí. Použijte role="dialog" nebo role="alertdialog" s aria-labelledby odkazujícím na nadpis banneru a aria-describedby odkazujícím na vysvětlující text.

Barevný kontrast

Text těla musí splňovat kontrast 4,5:1 vůči pozadí; velký text (18pt+ nebo 14pt tučný) potřebuje 3:1. Text tlačítek, ikony a indikátory fokusu mají vlastní minimální hodnoty kontrastu. Světle šedé tlačítko „Odmítnout" na bílém pozadí je častým selháním WCAG, které vidíme v auditech.

Žádné podněty pouze pomocí barvy

Nespoléhejte se pouze na barvu pro rozlišení Přijmout od Odmítnout. Používejte odlišné štítky, ikony nebo tvary, aby uživatelé s barvoslepostí mohli tlačítka rozlišit.

Temné vzory a přístupnost

WCAG 2.2 zavádí nová kritéria, která přímo cílí na temné vzory — zvláště relevantní pro souhlas:

• 3.3.8 Přístupná autentizace — zakazuje kognitivní hádanky jako tření souhlasu.
• 3.3.7 Nadbytečný vstup — uživatelé by neměli muset znovu zadávat informace jen proto, aby souhlas odvolali.
• 2.4.11 Fokus není zakryt — samotný banner by neměl zakrývat indikátor fokusu prvků za ním.
• 2.5.7 Pohyby přetahování — pokud váš banner používá interakci přetažení pro přijetí, musí existovat alternativa s jedním ukazatelem.

RTL a internacionalizace

Přístupnost se rozšiřuje na jazyky zprava doleva (arabština, hebrejština, perština, urdština) a na výslovnost čtečky obrazovky:

• Nastavte dir="rtl" na banneru, když je jazyk dokumentu RTL, aby pořadí tlačítek a tok fokusu odpovídaly směru čtení.
• Používejte správné atributy lang u přeloženého textu banneru, aby čtečky obrazovky vyslovovaly slova se správnou fonetikou.
• Zrcadlete ikonografii — šipky, šípy a indikátory průběhu by se měly převrátit pro lokality RTL.

Testování banneru na soulad s WCAG

Nespoléhejte se na jeden nástroj. Kombinujte automatické skenování s reálným testováním pomocné technologie:

• axe DevTools nebo Lighthouse — automaticky zachytí přibližně 30–40 % selhání WCAG.
• NVDA nebo JAWS na Windows, VoiceOver na Mac/iOS, TalkBack na Android — testujte s reálnými čtečkami obrazovky. Může být banner oznámen, navigován a odmítnut pouze pomocí čtečky obrazovky?
• Navigace pouze klávesnicí — odpojte myš. Pokud nemůžete Přijmout, Odmítnout a spravovat předvolby, uživatelé klávesnice také nemohou.
• Simulace barvosleposti — Chrome DevTools má vestavěné simulátory zrakových vad. Zkontrolujte, zda jsou Přijmout a Odmítnout rozlišitelné pod protanopií, deuteranopií a tritanopií.
• Přiblížení na 400 % — WCAG vyžaduje, aby obsah zůstal použitelný při 400% přiblížení bez horizontálního posouvání. Bannery s pevnou polohou tento test často nesplňují.

Běžná selhání přístupnosti, která vidíme

• Odmítnutí skryté za ikonou ozubeného kola — temný vzor plus selhání přístupnosti (žádný přístupný název na tlačítku ikony).
• Fokus nikdy nedosáhne banneru — bannery, které přitahují vizuální pozornost, ale jsou přeskočeny v pořadí Tab.
• Modální banner bez zachycení fokusu — uživatelé mohou přejít tabelátorem na stránku na pozadí, zatímco banner tvrdí, že blokuje interakci.
• Žádný aria-live u změn předvoleb — uživatelé čtečky obrazovky neslyší potvrzení, že jejich volba byla uložena.
• Přeložené bannery bez atributu lang — čtečky obrazovky vyslovují španělský text s anglickou fonetikou.

Jak FlexyConsent zajišťuje přístupnost