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:

• 1.3.1 – Info and Relationships.

• 2.1.1 – Keyboard.

• 2.1.2 – No Keyboard Trap.

• 2.4.6 – Headings and Labels.

• 3.3.2 – Labels or Instructions.

• 4.1.2 – Name, Role, Value.

Autor: Adam Samec