Cookie lišta

Prečo je to prístupné

Cookie lišta je často prvá vec, s ktorou sa návštevník na webe stretne, a zároveň najčastejšie pokazená. Pluginy ju vykresľujú ako modálne okno, ktoré uchmatne zameranie klávesnice, prekryje obsah, nedá sa zavrieť inak než súhlasom a po zatvorení zmizne bez možnosti návratu. Táto lišta robí presný opak.

Poradie zamerania. Lišta je oblasť (region) s vlastným nadpisom, nie dialóg. Po načítaní sa umiestni hneď za odkazy na preskočenie, takže používateľ klávesnice ju nájde po niekoľkých stlačeniach Tab, ale zameranie na ňu nikto nepresúva násilne. Stránka zostáva celá použiteľná aj bez rozhodnutia.

Zavrieť sa dá vždy. Tlačidlá „Prijať všetky“ a „Odmietnuť nepodstatné“ vyzerajú rovnako a sú rovnako blízko; odmietnuť je rovnako ľahké ako súhlasiť. Escape lištu zavrie a znamená odmietnutie. Kým je lišta zobrazená, jej výška sa zapíše do scroll-padding dokumentu, takže žiaden zameraný prvok nezostane skrytý za ňou.

Zmeniť názor neskôr. Tlačidlo „Zmeniť nastavenia cookies“ môže stáť kdekoľvek, typicky v pätičke; otvorí lištu s aktuálnou voľbou a po zatvorení vráti zameranie tam, odkiaľ používateľ prišiel. Voľba sa ukladá s verziou: keď pribudne nová kategória, opýtame sa znova.

Kým sa používateľ nerozhodne, neukladá sa nič okrem nevyhnutného, a na zapamätanie odmietnutia netreba žiadnu cookie. Toto webové sídlo cookies vôbec nepoužíva; lišta nižšie je ukážka.

Vyskúšajte si sami

Klávesnica

• Načítajte stránku znova: zameranie zostáva na začiatku stránky, lišta ho neukradne.
• Tab trikrát cez odkazy na preskočenie a ste v lište: Prijať, Odmietnuť, Nastavenia.
• Escape v lište ju zavrie; Tab za ňou pokračuje normálne do hlavičky.
• Tlačidlo „Zmeniť nastavenia cookies“ lištu otvorí s rozbalenými kategóriami; Escape vráti zameranie na tlačidlo.

Čítač obrazovky

• Po načítaní počujete zdvorilý oznam, že stránka používa cookies a kde je lišta.
• V zozname oblastí je „Cookies na tomto webovom sídle“; tlačidlo Nastavenia oznamuje zbalené / rozbalené.
• Po voľbe počujete stavovú správu „Nastavenia cookies uložené: …“.

Priblíženie a reflow

• Pri 400 % priblížení sa lišta roluje vo vnútri, tlačidlá sa zoradia pod seba a obsah stránky za ňou zostáva dosiahnuteľný.

Bez JavaScriptu

Lišta sa nezobrazí. Bez skriptov sa nenačíta ani nič, na čo by bolo treba súhlas, takže niet čo riešiť. Tlačidlá na zmenu nastavení sú skryté.

Kód

<ad-consent data-version="1">
  <section class="consent" role="region" aria-labelledby="consent-title" hidden>
    <h2 id="consent-title" tabindex="-1">Cookies na tomto webovom sídle</h2>
    <p>Nevyhnutné cookies zabezpečujú, že stránka funguje. …</p>
    <form>
      <div class="consent__actions">
        <button type="button" class="button" data-consent="accept">Prijať všetky</button>
        <button type="button" class="button" data-consent="reject">Odmietnuť nepodstatné</button>
        <button type="button" class="button button--ghost" data-consent="settings" aria-expanded="false" aria-controls="consent-settings">Nastavenia</button>
      </div>
      <fieldset id="consent-settings" hidden>
        <legend>Kategórie cookies</legend>
        <label><input type="checkbox" checked disabled> Nevyhnutné</label>
        <label><input type="checkbox" name="analytics"> Analytické</label>
        <button type="submit" class="button" data-consent="save">Uložiť výber</button>
      </fieldset>
    </form>
  </section>
</ad-consent>

<button type="button" data-consent-open>Zmeniť nastavenia cookies</button>
<link rel="stylesheet" href="/assets/js/components/ad-consent/ad-consent.css">
<script type="module" src="/assets/js/components/ad-consent/ad-consent.js"></script>