Osvědčené postupy pro návrh cookie lišty

Cookie lišta je jednou z prvních věcí, kterou návštěvník uvidí. Utváří jeho vnímání vaší značky, důvěru ve vaši firmu a — což je zásadní — určuje, zda je jeho souhlas právně platný. Dobře navržená lišta zajistí soulad s předpisy bez zbytečného tření. Špatně navržená lišta buď uživatele odradí, nebo vyprodukuje souhlas, který neobstojí při kontrole ze strany regulátorů.

Tento průvodce se věnuje principům návrhu, UX vzorcům a požadavkům na přístupnost, které odlišují cookie lištu, jež je v souladu s předpisy a přívětivá k uživatelům, od té, která představuje riziko.

Na prvním dojmu záleží

Výzkumy opakovaně ukazují, že se uživatelé rozhodují o cookie lištách během dvou až tří sekund. Většina uživatelů si celý text nepřečte. Rychle hledají známé vzorce — tlačítka, přepínače, důvěrně známý jazyk — a jednají instinktivně. To znamená, že vizuální návrh vaší lišty má stejnou váhu jako její právní obsah.

Cílem je, aby byla správná akce zřejmá a dostupné volby jasné na první pohled. Pokud musí uživatel přemýšlet, co má udělat, váš návrh selhal.

Klíčové zásady pro první dojem:

• Srozumitelnost před nápaditostí. Cookie lišta není místem pro kreativní copywriting nebo nekonvenční uživatelské rozhraní. Používejte známé vzorce, které uživatelé rozpoznají.
• Vizuální hierarchie. Nejdůležitější prvky — popis účelu a akční tlačítka — by měly být nejnápadnější. Sekundární prvky (odkaz na nastavení, odkaz na zásady) mohou být méně nápadné, ale stále musí být viditelné.
• Bílé místo. Přeplněná lišta působí zahlcujícím dojmem. Dopřejte prvkům prostor. Odsazení a mezery signalizují profesionalitu a usnadňují rychlé přehlédnutí obsahu.

Hierarchie tlačítek a vizuální váha

Právě zde většina cookie lišt selhává v souladu s předpisy — a právě zde jsou udělovány nejvyšší pokuty.

Pokyny EDPB 05/2020 o souhlasu a řada donucovacích opatření ze strany CNIL, italského úřadu Garante a dánského úřadu Datatilsynet stanovily jasnou zásadu: možnost odmítnout cookies musí být prezentována se stejnou nápadností jako možnost je přijmout.

Co to znamená v praxi:

• Tlačítka pro přijetí a odmítnutí musí mít stejnou velikost. Tlačítko „Přijmout vše" široké 200 pixelů vedle textového odkazu „Odmítnout" není stejná nápadnost. Obě musí být vykreslena jako tlačítka srovnatelných rozměrů.
• Obě tlačítka musí používat srovnatelnou vizuální váhu. Pokud je vaše tlačítko pro přijetí plné, vysoce kontrastní tlačítko, musí být i vaše tlačítko pro odmítnutí plným tlačítkem — nikoli obrysovým, průhledným nebo pouze textovým prvkem. CNIL v roce 2022 udělil společnosti Google pokutu 150 milionů EUR částečně proto, že možnost odmítnutí vyžadovala více úsilí než přijetí.
• Barva nesmí manipulovat. Jasně zelené tlačítko „Přijmout" vedle šedého tlačítka „Odmítnout" je dark pattern. Použijte primární barvu vaší značky pro obě, nebo neutrální barvy pro obě. Vizuální signál nesmí uživatele směrovat k jedné z voleb.
• Na pořadí tlačítek záleží méně, než si myslíte. Zda je první přijetí nebo odmítnutí, není hlavní starostí — tou je vizuální váha. To řečeno, umístění tlačítka pro odmítnutí vlevo (jako první v pořadí čtení) může signalizovat neutralitu.

Doporučený vzorec tlačítek

Lišta, která je v souladu s předpisy a přívětivá k uživatelům, obvykle používá tři akce:

1. Odmítnout vše — plné tlačítko
2. Přijmout vše — plné tlačítko o stejné velikosti a vizuální váze
3. Spravovat předvolby — sekundární tlačítko nebo odkaz (může být méně nápadné, protože vede k druhé vrstvě)

Barva a kontrast

Volba barev v cookie lištách slouží dvěma účelům: konzistenci značky a čitelnosti. Z hlediska souladu s předpisy jsou klíčové tyto požadavky:

• Kontrast textu. Veškerý text v liště musí splňovat požadavky WCAG 2.1 AA na kontrast: minimální kontrastní poměr 4,5:1 pro běžný text a 3:1 pro velký text. To platí pro popis účelu, popisky tlačítek a odkazy.
• Kontrast tlačítek. Pozadí tlačítek musí mít dostatečný kontrast vůči pozadí lišty a text tlačítka musí mít dostatečný kontrast vůči pozadí tlačítka. Zkontrolujte obě vrstvy.
• Viditelnost odkazů. Odkazy na vaše zásady používání cookies a zásady ochrany osobních údajů musí být vizuálně odlišitelné od okolního textu — obvykle prostřednictvím barvy a podtržení.
• Pozadí. Pozadí lišty musí poskytovat dostatečný kontrast vůči svému okolí. Pokud vaše lišta překrývá obsah stránky, zajistěte, aby překryv byl dostatečně neprůhledný, aby byl text lišty čitelný bez ohledu na obsah stránky pod ním.

Běžným přístupem je použití bílého nebo velmi světlého pozadí lišty, tmavého textu pro čitelnost a primární barvy vaší značky pro tlačítka. To obvykle vytváří silné kontrastní poměry a čistý, profesionální vzhled.

Text a mikrotexty

Text vaší cookie lišty musí být právně dostatečný, ale musí být také čitelný pro laické publikum. Bod odůvodnění 39 GDPR výslovně vyžaduje, aby informace o zpracování údajů byly poskytovány „jasným a jednoduchým jazykem".

Nadpis

Udržujte jej jednoduchý a přímý. Účinné příklady:

• „Používáme cookies"
• „Předvolby cookies"
• „Vaše volby ochrany soukromí"

Vyhněte se vágnímu nebo vyhýbavému jazyku jako „Vážíme si vašeho soukromí" — to uživateli neříká nic konkrétního.

Popis účelu

V jedné až třech větách vysvětlete, jaké cookies používáte a proč. Buďte konkrétní:

„Používáme nezbytné cookies, aby tento web fungoval. Rádi bychom také používali analytické cookies, abychom porozuměli tomu, jak náš web používáte, a marketingové cookies, abychom vám zobrazovali relevantní obsah. Můžete přijmout vše, odmítnout vše nebo spravovat své předvolby."

To je stručné, konkrétní a použitelné. Porovnejte to s bohužel běžným:

„Tento web používá cookies, aby vám zajistil ten nejlepší zážitek. Pokračováním v používání tohoto webu souhlasíte s naším používáním cookies."

Druhý příklad není v souladu s předpisy: naznačuje souhlas prostřednictvím pokračujícího prohlížení (což podle GDPR není platné), neuvádí účely a nenabízí volbu.

Popisky tlačítek

Popisky tlačítek by měly být jednoznačné:

• „Přijmout vše" a „Odmítnout vše" — jasný, souběžný jazyk
• „Spravovat předvolby" nebo „Přizpůsobit" — pro možnost nastavení
• Vyhněte se: „OK", „Rozumím", „Pokračovat", „Beru na vědomí" — tyto výrazy jsou nejednoznačné a nepředstavují konkrétní souhlas

Návrh s prioritou mobilních zařízení

Přes 60 % webového provozu tvoří mobilní zařízení. Vaše cookie lišta bude viditelná na obrazovkách širokých pouhých 320 pixelů. Pokud navrhujete nejprve pro počítač a přizpůsobujete pro mobil, téměř jistě skončíte s přeplněným, nepoužitelným mobilním zážitkem.

Hlediska návrhu pro mobil:

• Skládejte tlačítka vertikálně. Vodorovné řady tlačítek, které fungují na počítači, se na mobilu stávají nečitelnými. Skládejte tlačítka pro přijetí, odmítnutí a nastavení vertikálně s rozvržením na celou šířku.
• Dotykové cíle. Tlačítka musí mít alespoň 44×44 pixelů (WCAG 2.5.5, úroveň AAA) nebo minimálně 24×24 pixelů (WCAG 2.5.8, úroveň AA). Na mobilu je větší vždy lepší — usilujte o výšku 48 pixelů nebo více.
• Pokrytí obrazovky. Na mobilu může cookie lišta snadno zabírat 60–80 % zobrazované plochy. To je u úvodní výzvy přijatelné, ale lišta nesmí učinit web zcela nepoužitelným. Pokud používáte modální překryv, zajistěte, aby uživatelé stále dokázali rozpoznat, že jsou na správném webu.
• Velikost textu. Nikdy neklesejte pod 14 pixelů u hlavního textu ani pod 12 pixelů u sekundárního textu na mobilu. Uživatelé by neměli potřebovat přiblížení, aby si vaši lištu přečetli.
• Chování při rolování. Pokud obsah vaší lišty na mobilu přesahuje výšku obrazovky (zejména panel předvoleb), musí být rolovatelný v rámci lišty. Nedopusťte, aby obsah lišty přesahoval obrazovku bez možnosti dostat se k tlačítkům pro přijetí/odmítnutí.

UX přepínačů kategorií

Panel předvoleb — druhá vrstva vrstvené lišty — je místem, kde uživatelé provádějí podrobné volby. Standardní vzorec používá přepínače kategorií: jeden přepínač na kategorii cookies (nezbytné, analytické, marketingové, předvolby), každý s popiskem a popisem.

Zásady návrhu pro přepínače:

• Vizuální stavy musí být jednoznačné. Zapnuto (souhlas udělen) a vypnuto (souhlas odepřen) musí být jasně odlišitelné barvou, polohou a ideálně popiskem („Zapnuto" / „Vypnuto" nebo zatržítko / křížek). Nespoléhejte se pouze na barvu — to selhává u barvoslepých uživatelů.
• Nezbytné cookies by měly být zapnuté a zakázané. Kategorie „Nezbytně nutné" by měla být zapnutá s vizuálně zakázaným přepínačem (zašedlým nebo s ikonou zámku) a s poznámkou vysvětlující, že tyto cookies nelze vypnout, protože jsou nezbytné pro fungování webu.
• Výchozí stav pro nepodstatné kategorie musí být vypnuto. Předem zaškrtnuté přepínače představují předvolený souhlas, který je výslovně zakázán rozsudkem SDEU ve věci Planet49.
• Popisy kategorií by měly být srozumitelné pro lidi. „Analytické cookies" je popisek. „Pomáhají nám porozumět tomu, jak návštěvníci interagují s naším webem, sběrem anonymních údajů o používání" je popis. Uveďte oboje.
• Rozbalitelné seznamy cookies. V rámci každé kategorie poskytněte rozbalitelnou sekci, která uvádí jednotlivé cookies: název, poskytovatele, účel a dobu trvání. Tuto úroveň transparentnosti stále více očekávají úřady pro ochranu osobních údajů.

Návrh panelu nastavení/předvoleb

Panel předvoleb je kritickou součástí. Když uživatel klikne na „Spravovat předvolby", aktivně se zabývá svými volbami ochrany soukromí — to je uživatel, s nímž chcete zacházet s největší úctou.

• Jasné záhlaví. „Předvolby cookies" nebo „Spravovat vaše soukromí" — dejte jasně najevo, k čemu tento panel slouží.
• Tlačítko pro uložení. Nápadné tlačítko „Uložit předvolby", které potvrzuje podrobné volby uživatele. Toto tlačítko musí být snadno dostupné bez nadměrného rolování.
• Možnosti Přijmout vše a Odmítnout vše by měly zůstat dostupné. I v panelu předvoleb poskytněte zkratková tlačítka pro přijetí nebo odmítnutí všeho. Někteří uživatelé otevírají panel ze zvědavosti, ale přesto chtějí rychlou akci.
• Chování při zavření. Pokud uživatel zavře panel předvoleb bez uložení, považujte to za neudělení souhlasu — nenastavujte nepodstatné cookies. Nevězte uživatele v panelu.

Přizpůsobení značce při zachování souladu s předpisy

Vaše cookie lišta by měla působit jako součást vašeho webu, nikoli jako vniknutí třetí strany. Většina platforem pro správu souhlasu umožňuje přizpůsobení barev, písem, umístění loga a textu. Využijte toho k sladění lišty s identitou vaší značky.

Přizpůsobení značce však nesmí ohrozit soulad s předpisy:

• Můžete použít barvy své značky, ale tlačítka musí stále mít stejnou vizuální váhu.
• Můžete použít písmo své značky, ale text musí být stále čitelný v použitých velikostech.
• Můžete přidat své logo, ale nesmí odsunout kritický obsah (popis účelu, tlačítka) pod viditelnou část stránky.
• Můžete přizpůsobit text, ale musí zůstat konkrétní, přesný a úplný.

Požadavky na přístupnost cookie lišt

Cookie lišta, která není přístupná, není v souladu s předpisy — jak podle právních předpisů o ochraně soukromí (uživatel nemohl udělit informovaný souhlas, pokud nemohl lištu vnímat nebo ovládat), tak podle právních předpisů o přístupnosti (Evropský akt o přístupnosti a vnitrostátní zákony o zákazu diskriminace osob se zdravotním postižením).

Požadavky WCAG AA

• Ovládání klávesnicí. Každý interaktivní prvek — tlačítka, přepínače, odkazy, ikony pro zavření — musí být dosažitelný a ovladatelný pomocí klávesnice. Pořadí procházení tabulátorem musí být logické (obvykle: text účelu, poté odmítnout, poté přijmout, poté spravovat předvolby).
• Správa fokusu. Když se lišta objeví, fokus by se na ni měl přesunout (nebo by měla být ohlášena). Když je lišta zavřena, fokus by se měl vrátit na hlavní obsah. Indikátory fokusu musí být viditelné.
• Podpora čteček obrazovky. Lišta musí používat vhodné role a popisky ARIA. Pro kontejner lišty použijte role="dialog" a aria-label="Cookie consent". Tlačítka musí mít přístupné názvy. Stavy přepínačů musí být ohlašovány (aria-checked).
• Kontrast barev. Veškerý text a interaktivní prvky musí splňovat kontrastní poměry WCAG 2.1 AA (4,5:1 pro běžný text, 3:1 pro velký text a prvky uživatelského rozhraní).
• Žádné klávesnicové pasti. Uživatelé se musí být schopni od lišty odejít. Ačkoli modální překryv může omezit fokus na lištu (zachycení fokusu u modálních oken je uznávaný vzorec), vždy musí existovat způsob, jak lištu zavřít a dostat se k obsahu stránky.
• Pohyb. Pokud lišta používá animace (vysunutí, prolínání), respektujte mediální dotaz prefers-reduced-motion a poskytněte alternativu s omezeným nebo žádným pohybem.

Testování přístupnosti vaší lišty

1. Projděte celou lištu pouze pomocí klávesnice (Tab, Enter, mezerník, Escape).
2. Otestujte ji pomocí čtečky obrazovky (VoiceOver na macOS, NVDA na Windows).
3. Ověřte kontrast barev pomocí nástroje, jako je WebAIM Contrast Checker.
4. Otestujte při 200% přiblížení — lišta by měla zůstat použitelná.
5. Otestujte na mobilu se zapnutým VoiceOver nebo TalkBack.

Testování a iterace

Cookie lišta není prvek typu „nastav a zapomeň". Chování uživatelů, předpisy i používání cookies na vašem webu se v průběhu času mění. Počítejte s průběžným testováním:

• Míry souhlasu. Sledujte, jaké procento uživatelů přijímá, odmítá nebo přizpůsobuje. Pokud je vaše míra odmítnutí podezřele nízká (pod 10 %), vaše lišta možná používá dark patterns — ať už úmyslně, či nikoli.
• Míry interakce. Sledujte, kolik uživatelů interaguje s panelem předvoleb. Nízká míra zapojení může naznačovat, že možnost „Spravovat předvolby" není dostatečně viditelná.
• A/B testování. Testujte různé texty, popisky tlačítek a rozvržení. Cílem není maximalizovat míru souhlasu — je to maximalizovat míru informovaného souhlasu. Lišta, s níž interaguje více uživatelů, je lepší lišta.
• Regulatorní aktualizace. Sledujte pokyny od příslušných úřadů pro ochranu osobních údajů. Výklady při vymáhání se vyvíjejí a vaše lišta by se měla vyvíjet spolu s nimi.
• Audity cookies. Pravidelně skenujte svůj web na nové cookies. Pokud přidáte nový analytický nástroj nebo marketingový pixel, musí být kategorie vaší lišty aktualizovány, aby jej zohlednily.

Passiro poskytuje automatizované skenování cookies a analytiku míry souhlasu, aby vám pomohl udržet lištu přesnou a účinnou. Zjistěte více o správě souhlasu od Passiro.