Cookie lišta

Proč je to přístupné

Cookie lišta je často první věc, se kterou se návštěvník na webu setká, a zároveň nejčastěji pokažená. Pluginy ji vykreslují jako modální okno, které uchvátí zaměření klávesnice, překryje obsah, nedá se zavřít jinak než souhlasem a po zavření zmizí bez možnosti návratu. Tato lišta dělá pravý opak.

Pořadí zaměření. Lišta je oblast (region) s vlastním nadpisem, ne dialog. Po načtení se umístí hned za odkazy na přeskočení, takže uživatel klávesnice ji najde po několika stisknutích Tab, ale zaměření na ni nikdo násilně nepřesouvá. Stránka zůstává celá použitelná i bez rozhodnutí.

Zavřít se dá vždy. Tlačítka „Přijmout vše“ a „Odmítnout nepodstatné“ vypadají stejně a jsou stejně blízko; odmítnout je stejně snadné jako souhlasit. Escape lištu zavře a znamená odmítnutí. Dokud je lišta zobrazená, její výška se zapíše do scroll-padding dokumentu, takže žádný zaměřený prvek za ní nezůstane skrytý.

Změnit názor později. Tlačítko „Změnit nastavení cookies“ může stát kdekoli, typicky v patičce; otevře lištu s aktuální volbou a po zavření vrátí zaměření tam, odkud uživatel přišel. Volba se ukládá s verzí: když přibude nová kategorie, zeptáme se znovu.

Dokud se uživatel nerozhodne, neukládá se nic kromě nezbytného, a na zapamatování odmítnutí není potřeba žádná cookie. Tento web cookies vůbec nepoužívá; lišta níže je ukázka.

Vyzkoušejte si sami

Klávesnice

• Načtěte stránku znovu: zaměření zůstává na začátku stránky, lišta ho neukradne.
• Tab třikrát přes odkazy na přeskočení a jste v liště: Přijmout, Odmítnout, Nastavení.
• Escape v liště ji zavře; Tab za ní pokračuje normálně do hlavičky.
• Tlačítko „Změnit nastavení cookies“ lištu otevře s rozbalenými kategoriemi; Escape vrátí zaměření na tlačítko.

Odečítač obrazovky

• Po načtení uslyšíte zdvořilé oznámení, že stránka používá cookies a kde je lišta.
• V seznamu oblastí je „Cookies na tomto webu“; tlačítko Nastavení oznamuje sbalené / rozbalené.
• Po volbě uslyšíte stavovou zprávu „Nastavení cookies uloženo: …“.

Zvětšení a přizpůsobení obsahu

• Při 400% zvětšení se lišta roluje uvnitř, tlačítka se zarovnají pod sebe a obsah stránky za ní zůstává dosažitelný.

Bez JavaScriptu

Lišta se nezobrazí. Bez skriptů se nenačte ani nic, k čemu by bylo potřeba souhlas, takže není co řešit. Tlačítka pro změnu nastavení jsou 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 webu</h2>
    <p>Nezbytné cookies zajišťují, že web funguje. …</p>
    <form>
      <div class="consent__actions">
        <button type="button" class="button" data-consent="accept">Přijmout vše</button>
        <button type="button" class="button" data-consent="reject">Odmítnout nepodstatné</button>
        <button type="button" class="button button--ghost" data-consent="settings" aria-expanded="false" aria-controls="consent-settings">Nastavení</button>
      </div>
      <fieldset id="consent-settings" hidden>
        <legend>Kategorie cookies</legend>
        <label><input type="checkbox" checked disabled> Nezbytné</label>
        <label><input type="checkbox" name="analytics"> Analytické</label>
        <button type="submit" class="button" data-consent="save">Uložit výběr</button>
      </fieldset>
    </form>
  </section>
</ad-consent>

<button type="button" data-consent-open>Změnit nastavení 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>