Dialogy pro odsouhlasení cookies – Jak na přístupnost

Nutnost vyjádření souhlasu s cookies uživatelem je ve státech Evropské unie již řadu let povinností všech webů, které tato drobná data ve webových prohlížečích ukládají. Konkrétně v českém prostředí je od roku 2022 třeba, aby uživatelé vyjádřili souhlas výslovnou akcí, čili nestačí na webu zmínit jen informaci typu „Pokračováním v prohlížení webu souhlasíte s ukládáním cookies ve vašem prohlížeči“, ale je nutné souhlas udělit například aktivací patřičného tlačítka v dialogu před samotným uložením jakýchkoliv cookies. (Podrobnosti najdete v otázkách a odpovědích ke cookies na webu Úřadu pro ochranu osobních údajů.)

Vzhledem k rozšířenosti dialogů vyžadujících od uživatelů odsouhlasení cookies je tak na místě si ujasnit, jaká úskalí mohou tyto dialogy znamenat pro uživatele s nějakou formou znevýhodnění, především uživatelům s kognitivním postižením nebo uživatelům využívajícím asistivní technologie, a jak tedy tyto dialogy realizovat co nejvíce přístupně. Cookies dialog by měl být první věcí, na kterou uživatel dotčeného webu narazí, a tak může při špatné implementaci znamenat znepřístupnění dokonce celého webu.

Forma a stylistické požadavky cookies dialogů

Dialogy pro odsouhlasení cookies by měly obsahovat přiměřené množství informací, tedy ani příliš mnoho, ani příliš málo.
Jazyk použitý v textu dialogu by měl být srozumitelný co největší šíři uživatelů. Doporučujeme se tak vyhnout právnickým pojmům a obratům nebo je alespoň vždy jednoduše vysvětlit před prvním použitím.
Informace v dialogu by měly seznamovat uživatele transparentně s tím, pro co všechno se cookies na webu používají.
Dialog by měl obsahovat tři jasná tlačítka „Přijmout vše“, „Zamítnout vše“ a „Podrobné nastavení“.
Podrobné nastavení by mělo obsahovat zaškrtávací pole pro jednotlivé skupiny funkcionalit, pro které lze souhlas udělit. Jestliže je vyžadováno bližší vysvětlení nějakého jednotlivého nastavení, tak by u příslušného políčka mělo být rozbalovací tlačítko pro zobrazení či skrytí tohoto podrobného vysvětlení.
Nastavení souhlasu s cookies by mělo být možné kdykoliv změnit. Doporučujeme do patičky stránky umístit tlačítko pojmenované „Změna souhlasu s cookies“ nebo podobně.

Vizuální podoba cookies dialogů

Doporučujeme, aby cookies dialog nezakrýval celou stránku nacházející se v pozadí dialogu. Důvěru uživatelů totiž zvýší, jestliže je pod dialogem vidět část stránky, aby uživatelé zhruba věděli, pro jaký web souhlas udělují.

Implementace cookies dialogů z hlediska HTML kódu

HTML element obalující cookies dialog by měl splňovat následující:

Měl by mít nastaven atribut role="dialog". Tím bude uživateli odečítače obrazovky indikováno, že vstupuje právě do dialogu.
Měl by být modální čili dialog by neměl dovolit interakci s ostatním obsahem na stránce. To pro uživatele ovládající počítač jen pomocí klávesnice konkrétně znamená, že navigace přes tabulátor nebo Shift + tabulátor by neměla umožnit přesunutí fokusu mimo dialog. Dále obsah mimo dialog by měl mít nastaven atribut aria-hidden="true", což pohyb v dialogu pomocí odečítače obrazovky omezí pouze na samotný dialog. Dialog by měl mít nastaven také atribut aria-modal="true".
Na samotném začátku dialogu by měl být umístěn nadpis <h1> s textem „Souhlas s používáním cookies“ nebo podobným.
Dialog by měl být pojmenován pomocí atributu aria-label s textem „Souhlas s používáním cookies“ či podobným nebo pomocí atributu aria-labelledby odkazujícího na id zmíněného nadpisu s patřičným pojmenováním. Toto pojmenování dialogu bude přečteno odečítačem obrazovky při vstupu do dialogu.
Dialog by dále měl mít nastaven atribut aria-describedby, který by měl odkazovat na id elementu s textovým obsahem dialogu. Toto zaručí, že v momentě vstupu do dialogu odečítač obrazovky začne sám předčítat textový obsah dialogu.
Po zobrazení dialogu by se fokus klávesnice měl nacházet na prvním aktivním prvku dialogu. Jestliže dialog obsahuje pouze tlačítka pro odsouhlasení všech, zamítnutí všech a podrobné nastavení cookies, tak by fokus měl být nastaven na tlačítko pro odsouhlasení všech cookies.

Rozhraní pro podrobné nastavení cookies by mělo splňovat následující:

Zaškrtávací pole pro udělení jednotlivých souhlasů by měla být přístupně implementována, ideálně pomocí standardních elementů <input type="checkbox">. Tato zaškrtávací pole by měla být pojmenována pomocí elementu <label> nebo atributu aria-label či aria-labelledby.
Případná rozbalovací tlačítka pro zobrazení a skrytí podrobných vysvětlení jednotlivých nastavení by měla být implementována pomocí elementů <button> či elementů s atributem role="button" a tabindex="0". Tato tlačítka by dále měla mít nastaven atribut aria-expanded s hodnotou true při rozbaleném stavu nebo false při stavu sbaleném.

Jako vzor pro implementaci cookies dialogu lze následovat tuto vzorovou implementaci obecného modálního dialogu od W3C.

Zdroje informací

Mnoho z výše popsaných poznatků čerpá z reportu výzkumu provedeného norskou organizací Funka Foundation z roku 2024 zaměřeného na obecnou přístupnost cookie bannerů. Shrnutí vycházející z tohoto výzkumu je možné zhlédnout také v tomto návazném webináři.

Související kritéria úspěšnosti standardu WCAG

Výše zmíněná doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

Autor: Adam Samec

Štítky

přístupnost

Jak na přístupnost