Vzory

Cookie banner

Umožnite používateľom prijímať alebo odmietať súbory cookie, ktoré nie sú nevyhnutnou podmienkou fungovania služby.

Obsah:

Kedy použiť tento vzor

Cookie banner sa používa, ak služba nastavuje na zariadení používateľa akékoľvek súbory cookie.

Majte na pamäti, že je potrebné:

  • oboznámiť používateľov o súboroch cookie, ktoré služba nastavuje na ich zariadení,
  • umožniť používateľom prijať alebo odmietnuť akékoľvek súbory cookie, ktoré nie sú nevyhnutné pre fungovanie služby.

Medzi nevyhnutné cookies nepatrí:

  • lokálne úložisko HTML5,
  • service workers,
  • akékoľvek ďalšia technológia, ktorá ukladá súbory do zariadenia používateľa.

Banner so súborom cookie a vzor stránky so súbormi cookie sú založené na prístupe k získaniu súhlasu s používaním súborov cookie na webových stránkach verejnej správy Slovenskej republiky.

Táto stránka zobrazuje niekoľko možností použitia cookie banneru podľa typov súborov cookie, ktoré v službe používate.

Predtým ako začnete tento vzor používať

Urobte si audit používaných cookie súborov a kategorizujte ich nasledovne:

  • nevyhnutné cookies - potrebné k fungovanie služby,
  • funčkné cookies - bez nich bude služba fungovať, ale používatelia stratia niektorú funkcionalitu (napr. zachovanie nastavení pri opakovanom použití služby),
  • analytické cookies - zbierané za účelom webovej analýzy pre potreby prevádzkovateľa služby,
  • iný typ cookies - definujte podľa potreby, pokiaľ predošlé kategórie nevyhovujú.

Identifikujte, či je každý jeden cookie súbor nastavený na serverovej alebo klientskej strane.

Výsledok tohto auditu cookie súborov Vám pomôže pri definovaní cookie pravidiel a súhlasov pre službu, ktorú prevádzkujete alebo vyvíjate.

Upozornenie

Informácie v tomto návode nepovažujte za právnu radu. Prevádzkovateľ elektronickej služby je zodpovedný za súlad s legislatívou regulujúcou ochranu osobných údajov a akoukoľvek ďalšou legislatívou, ako napríklad so zákonom č. 18/2018 Z. z. o ochrane osobných údajov a o zmene a doplnení niektorých zákonov.

Ak ste prevádzkovateľ služby alebo webového sídla, kontaktujte právne oddelenie Vašej organizácie pre správne nastavenie ochrany osobných údajov elektronických služieb a webových sídiel, ktoré prevádzkujete.

Ako používať tento vzor

Cookie banner zobrazte používateľovi pri každej návšteve služby, pokiaľ:

  • používateľ neprijme alebo neodmietne cookie tlačidlami v cookie baneri,
  • používateľ neuloží preferencie nastavenia cookie súborov na k tomu vytvorenej stránke.

Akonáhle používateľ prijal alebo odmietol nastavenie cookie súborov:

  • cookie banner skryje správu o používaní cookies na danej stránke,
  • zobrazí potvrdzovaciu správu (text o tom, že nastavenia cookies boli uložené a tlačidlo "Schovať", ktoré skryje celý cookie banner),
  • nastaví zvolené cookies preferencie na obdobie jedného roku.

Na čo si dať pozor:

  • po prijatí nastavenia súborov cookie a nastavení preferencií, by sa už cookie banner nemal pri ďalšej návšteve služby alebo webovej stránky zobrazovať,
  • žiadne cookie súbory, ktoré nie sú nevyhnutnou podmienkou fungovania služby alebo stránky by sa nemali ukladať, pokiaľ ich používateľ neakceptoval pri nastavení preferencií používania súborov cookie.

Cookie banner umiestnite za otvárací tag <body>, pred odkaz "prejsť na hlavný obsah". Pokiaľ používate šablónu stránky Nunjucks, použite blok bodyStart.

Možnosť 1 - stránka alebo služba používa iba nevyhnutné cookies

Pokiaľ služba alebo stránka používa iba nevyhnutné cookies, cookie banner nie je potrebné zobrazovať, pretože takého cookie súbory nevyžadujú súhlas používateľa. Informujte však používateľa o tom, že stránka alebo služby takéto cookie súbory používa, čo je možné urobiť pomocou odkazu na stránku so súbormi cookie v pätičke.

Možnosť 2 - stránka alebo služba používa iné ako iba nevyhnutné cookies

Túto možnosť použite vtedy, pokiaľ služba nastavuje iné ako nevyhnutné cookies na strane servera alebo klienta.

Pre získanie súhlasu od používateľa, zobrazte cookie banner zabalený do formulára, ktorý umožní odoslať používateľom zvolenú možnosť (prijať alebo odmietnuť súbory cookie).

Tento príklad je nezávislý na JavaSripte, takže sa bude zobrazovať všetkým používateľom.

Takto vyzerá príklad cookie banneru zabaleného do formulára.

<form method="POST">
    <div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">

            <div class="govuk-grid-row">
                <div class="govuk-grid-column-two-thirds">
                    <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>

                    <div class="idsk-cookie-banner__content">
                        <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
                        <p>Taktiež používame dodatočné súbory cookies, akceptovaním súhlasíte s ich používaním.</p>
                    </div>
                </div>
            </div>

            <div class="idsk-button-group">
                <button value="accept" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
                    Prijať dodatočné cookies
                </button>
                <button value="reject" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
                    Odmietnuť dodatočné cookies
                </button>
                <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
            </div>
        </div>
    </div>

</form>

Akonáhle používateľ prijal alebo odmietol súbory cookie a nastavil si cookie preferencie, je potrebné znovu načítať stránku a zobraziť používateľovi potvrdzovaciu správu.

Takto vyzerá príklad potvrdzovacej správy zabalenej do formulára:

<form method="POST">
    <div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
                <p>Akceptoval si dodatočné súbory cookies. Kedykoľvek ich môžeš zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <a href="#" role="button" draggable="false" class="idsk-button" data-module="idsk-button">
            Skryť túto správu
            </a>
        </div>
        </div>
    </div>
    
</form>

Rovnaká správa pre všetkých požívateľov

Pomocou cookie banneru informujte používateľa o všetkých súboroch cookie, ktoré sú v službe alebo na stránke použité, bez ohľadu na to či má používateľ povolený JavaScript. Vďaka tomuto prístupu nie je potrebné si pýtať od používateľa znovu súhlas pri ďalšej návšteve stránky.

Zlepšenie používateľského zážitku pomocou Progressive enhancement

Pokiaľ používateľ zadáva informáciu do formuláru, ktorý je súčasťou služby, môže stratiť svoje informácie pri opätovnom načítavaní stránky, po tom ako klikne na prijať alebo odmietnuť súbory cookie.

Tento problém môžete vyriešiť pre používateľov s povoleným JavaScriptom. Stačí napísať krátky JS kód, ktorý umožní používateľom zvoliť si možnosť a zabráni stránke opätovne sa načítavať. Vložte všetky možné správy, ktoré používateľ môže vidieť, keď sa stránka načíta. Následne skryte pomocou hidden atribútu tie, ktoré nie sú práve potrebné.

Takto vyzerá príklad cookie banneru s použitím prístupu progressive enhancenemt. Kód banneru obsahuje všetky možné správy, ktoré sú skryté pomocou HTML. Následná správa je zobrazená pomocou JavaScriptu, ktorý odstráni príslušný hidden atribút.

<form method="POST">
    <div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
                <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
                <p>Taktiež používame dodatočné súbory cookies, akceptovaním súhlasíte s ich používaním.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <button value="accept" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Prijať dodatočné cookies
            </button>
            <button value="reject" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Odmietnuť dodatočné cookies
            </button>
            <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
        </div>
    
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
                <p>Akceptoval si dodatočné súbory cookies. Kedykoľvek ich môžeš zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <a href="#" role="button" draggable="false" class="idsk-button" data-module="idsk-button">
            Skryť túto správu
            </a>
        </div>
        </div>
    
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
                <p>Odmietol si dodatočné súbory cookies. Kedykoľvek ich môžeš zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <a href="#" role="button" draggable="false" class="idsk-button" data-module="idsk-button">
            Skryť túto správu
            </a>
        </div>
        </div>
    </div>
    
</form>

Takto vyzerá príklad cookie banneru s použitím prístupu progressive enhancenemt, ktorý zobrazuje potvrdzovaciu správu.

<form method="POST">
    <div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
                <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
                <p>Taktiež používame dodatočné súbory cookies, akceptovaním súhlasíte s ich používaním.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <button value="accept" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Prijať dodatočné cookies
            </button>
            <button value="reject" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Odmietnuť dodatočné cookies
            </button>
            <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
        </div>
    
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
                <p>Akceptoval si dodatočné súbory cookies. Kedykoľvek ich môžeš zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <a href="#" role="button" draggable="false" class="idsk-button" data-module="idsk-button">
            Skryť túto správu
            </a>
        </div>
        </div>
    
        <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
                <p>Odmietol si dodatočné súbory cookies. Kedykoľvek ich môžeš zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
            </div>
        </div>
    
        <div class="idsk-button-group">
            <a href="#" role="button" draggable="false" class="idsk-button" data-module="idsk-button">
            Skryť túto správu
            </a>
        </div>
        </div>
    </div>
    
</form>

Možnosť 3 - stránka alebo služba používa iné ako iba nevyhnutné súbory cookie, ale iba na strane klienta

V prípade, že služba alebo stránka nastavuje iné ako nevyhnutné súbory cookie iba na strane klienta, je možné použiť cookie banner, ktorý funguje iba s JavaScriptom.

Vložte všetky správy, ktoré môžu byť používateľovi zobrazené a tie následne skryte pomocou HTML atribútu hidden.

Jednotlivé správy cookie banneru zobrazujte používateľom, ktorí neprijali alebo neodmietli súbory cookie podľa potreby, tak že pomocou JavaScriptu odstránite atribút hidden.

Za týmto účelom si napíšte vlastný JavaScript kód, ktorý podľa toho či používateľ akceptoval alebo odmietol súbory cookie urobí nasledovné:

  • Skryje text cookie správy pridaním atribútu hidden,
  • zobrazí potvrdzovaciu správu odstránením príslušného atribútu hidden,
  • priradí potvrdzovacej správe tabindex="-1" a role="alert" atribúty - toto umožní element zamerať, aby mohli asistenčné technológie správu prečítať,
  • presunie zameranie na potvrdzovaciu správu.

Takto vyzerá príklad:

<div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
            <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
            <p>Taktiež používame analytické súbory, akceptovaním súhlasíte s ich používaním.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button type="button" class="idsk-button" data-module="idsk-button">
            Prijať analytické cookies
        </button>
        <button type="button" class="idsk-button" data-module="idsk-button">
            Odmietnuť analytické cookies
        </button>
        <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Akceptoval si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Odmietol si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
</div>

Keď používateľ prijal súbory cookie

Zobrazí sa potvrdzovacia správa s príslušným textom podľa toho, či používateľ prijal alebo odmietol súbory cookie odstránením atribútu hidden.

<div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
            <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
            <p>Taktiež používame analytické súbory, akceptovaním súhlasíte s ich používaním.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button type="button" class="idsk-button" data-module="idsk-button">
            Prijať analytické cookies
        </button>
        <button type="button" class="idsk-button" data-module="idsk-button">
            Odmietnuť analytické cookies
        </button>
        <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert">
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Akceptoval si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Odmietol si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
</div>

Keď používateľ odmietol súbory cookie

<div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
            <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
            <p>Taktiež používame analytické súbory, akceptovaním súhlasíte s ich používaním.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button type="button" class="idsk-button" data-module="idsk-button">
            Prijať analytické cookies
        </button>
        <button type="button" class="idsk-button" data-module="idsk-button">
            Odmietnuť analytické cookies
        </button>
        <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert" hidden>
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Akceptoval si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
    
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container" role="alert">
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
    
            <div class="idsk-cookie-banner__content">
            <p>Odmietol si analytické cookies. Túto voľbu môžeš kedykoľvek zmeniť v <a class="govuk-link" href="#" title="nastaveniach">nastaveniach</a>.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button class="idsk-button" data-module="idsk-button">
            Skryť túto správu
        </button>
        </div>
    </div>
</div>
  • Názov služby alebo stránky v hlavičke banner.
  • Pokiaľ služba alebo stránka využíva súbory cookie tretích strán, je potrebné to jasne napísať do textu správy cookie banneru.
  • Pokiaľ služba alebo stránka používa súbory cookie na niečo iné ako ukladanie používateľských nastavení alebo webovej analytiky, je potrebné to jasne napísať do textu správy cookie banneru.

Text správy cookie banneru by mal byť čo najkratší. Zároveň by mal presne a zrozumiteľne informovať používateľa o účele a použití súborov cookies na danej stránke. Napríklad, pokiaľ služba používa viac ako jeden "funkčný" cookie súbor a v cookie bannery nie je dostatok miesta popísať k čomu každý cookie súbor slúži, môžete používateľa požiadať o povolenie nastaviť súbory cookie, aby "služba mohla poskytovať všetky dostupné funkcionality".

Príklad pre službu s nevyhnutnými a analytickými súbormi cookie

Pokiaľ Vaša služba nastavuje iba nevyhnutné a analytické cookies, môžete použiť tento príklad textu správy:

<div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
            <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
            <p>Taktiež používame analytické súbory, akceptovaním súhlasíte s ich používaním.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button value="accept" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Prijať analytické cookies
        </button>
        <button value="reject" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Odmietnuť analytické cookies
        </button>
        <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
    </div>
</div>

Príklad pre službu alebo stránku využívajúcu viac ako jeden typ súborov cookie iných ako nevyhnutných

Tento príklad textu správy môžete použiť pre službu alebo stránku, ktorá nastavuje:

  • nevyhnutné súbory cookie,
  • analytické súbory cookie,
  • funkčné súbory cookie, ktoré si pamätajú nastavenia používateľa, ale nie sú nevyhnutné.
<div class="idsk-cookie-banner " data-nosnippet role="region" aria-label="Cookies na [názov stránky/služby]">
    <div class="idsk-cookie-banner__message idsk-cookie-banner__example govuk-width-container">
    
        <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
            <h2 class="idsk-cookie-banner__heading govuk-heading-m">Cookies na [názov stránky/služby]</h2>
    
            <div class="idsk-cookie-banner__content">
            <p>Používame základné cookies súbory aby mohla táto stránka fungovať.</p>
            <p>Taktiež používame dodatočné súbory cookies, akceptovaním súhlasíte s ich používaním.</p>
            </div>
        </div>
        </div>
    
        <div class="idsk-button-group">
        <button value="accept" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Prijať dodatočné cookies
        </button>
        <button value="reject" type="button" name="cookies" class="idsk-button" data-module="idsk-button">
            Odmietnuť dodatočné cookies
        </button>
        <a class="govuk-link" href="#" title="Nastavenia cookies">Nastavenia cookies</a>
        </div>
    </div>
</div>

Doplňujúce informácie o fungovaní cookie banneru

Keď používateľ príjme alebo odmietne súbory cookie, zobrazí sa text potvrdzovacej správy, napr. "Vaše preferencie pre nastavenie súborov cookie sa uložili.". Zameranie sa presunie na túto novú správu.

Každopádne, viditeľný indikátor zamerania sa nezobrazí okolo potvrdzovacej správy. Je tu teda rozdiel oproti banneru s notifikáciou, pri ktorom sa zobrazí viditeľný indikátor zamerania.

Pre odstránenie viditeľného indikátora zamerania z potvrdzovacej správy sme sa rozhodli z týchto dôvodov:

  • používateľ nemôže s týmto textom interagovať,
  • je to prvý element na samom vrchu stránky,
  • zobrazí sa na mieste textu správy z cookie banneru, čo je posledná vec, s ktorou používateľ interagoval.

Predpokladáme teda, že viditeľný indikátor zamerania by používateľa viac zmiatol ako mu pomohol.