Consent

Layer 1 — the banner

Pinned to the bottom of the viewport, on black, with the foil as a 2 px edge along the top. Shown here in place rather than fixed; press Replay the real banner below to see it behave.

<!-- immediately after the skip link, before the nav and everything else -->
<section class="cf-consent" data-cf-consent-banner hidden
         role="dialog" aria-labelledby="cf-consent-title">
  <div class="container cf-consent__inner">
    <div>
      <h2 class="cf-consent__title" id="cf-consent-title" tabindex="-1" data-cf-consent-title>
        Datenschutz-Einstellungen
      </h2>
      <p class="cf-consent__body">
        Notwendige Cookies brauchen wir, damit die Seite funktioniert. …
        <a href="/datenschutz">Datenschutzerklärung</a>
      </p>
    </div>
    <div class="cf-consent__actions">
      <button type="button" class="cf-btn cf-btn--outline" data-cf-consent-action="reject">Nur notwendige</button>
      <button type="button" class="cf-btn cf-btn--outline" data-cf-consent-action="accept">Alle akzeptieren</button>
      <button type="button" class="cf-btn cf-btn--ghost" data-cf-consent-action="open">Einstellungen</button>
    </div>
  </div>
</section>

Layer 2 — the settings dialog

A real <dialog> opened with showModal(): the focus trap, the inert background, Esc and the ::backdrop all come from the browser rather than from us. It is the same dialog the footer link reopens, which is how withdrawal works — Art. 7(3) DSGVO wants taking consent back to be as easy as giving it, so it is literally the same control.

<dialog class="cf-consent__dialog" data-cf-consent-dialog aria-labelledby="cf-consent-settings-title">
  <div class="cf-consent__dialog-inner">
    <h2 class="cf-consent__dialog-title" id="cf-consent-settings-title">Ihre Einstellungen</h2>
    <!-- the route to the inventory. Informed consent needs the list reachable -->
    <p class="cf-consent__body">
      Sie entscheiden pro Kategorie. …
      <a href="/datenschutz#cookies">Alle Einträge im Detail</a>
    </p>

    <div class="cf-consent__group">
      <div class="cf-consent__row">
        <label class="cf-check">
          <input class="cf-check__box" type="checkbox" checked disabled>
          <span class="cf-check__label"><strong>Notwendig</strong>Sitzung, Sprachwahl …</span>
        </label>
        <p class="cf-consent__meta">Immer aktiv · 1 Eintrag · 12 Monate</p>
      </div>
      <div class="cf-consent__row">
        <label class="cf-check">
          <input class="cf-check__box" type="checkbox" data-cf-consent-category="statistik">
          <span class="cf-check__label"><strong>Statistik</strong>Anonyme Reichweitenmessung …</span>
        </label>
        <p class="cf-consent__meta">Optional · 2 Einträge · max. 13 Monate</p>
      </div>
    </div>

    <div class="cf-consent__actions">
      <button type="button" class="cf-btn cf-btn--outline" data-cf-consent-action="reject">Nur notwendige</button>
      <button type="button" class="cf-btn cf-btn--outline" data-cf-consent-action="accept">Alle akzeptieren</button>
      <button type="button" class="cf-btn cf-btn--ghost" data-cf-consent-action="save">Auswahl speichern</button>
    </div>
  </div>
</dialog>

The inventory

The dialog says 3 Einträge. Somewhere the site has to say which three, and that somewhere is the Datenschutzerklärung the banner links to. Consent is only informed if what is being stored can be read before it is agreed to: per entry, the name it is stored under, what kind of storage it is, what it is for, who the recipient is, and how long it lives. TDDDG § 25 covers any storing of or access to information in the visitor's terminal equipment — localStorage and sessionStorage as much as cookies — so Art is a column rather than an assumption baked into the heading.

Three tables rather than one with a category column: the three match the three rows of the dialog one for one, and the count in each caption is the number the dialog quotes. The drawing is Components · Table — on the policy page it is reached as .cf-prose table, which is the same rules under a second selector rather than a second table.

What the audit replaces is the rows. The five columns stay, because they are what TDDDG § 25 and Art. 13 DSGVO ask for, and so does the arithmetic: a seventh entry moves the count in the table's caption and the count in .cf-consent__meta in the dialog markup on every page that carries it.

The checkbox

.cf-check is a real <input type="checkbox"> with appearance: none. The element keeps its role, its state and its keyboard behaviour; only the paint is ours, so there is no ARIA to get wrong. Square, 1 px contour, no radius. Checked fills with --gradient-foil rather than lime, because a checkbox is never the one thing happening on a screen — and the tick is two borders rotated 45°, which keeps it on the sanctioned angles.

Try it

This page carries the real component. Replaying clears the stored decision and reloads, so the banner comes back exactly as a first-time visitor meets it.

Gating a script

Anything non-essential ships as type="text/plain" with a category on it. The browser will not fetch or run it. On grant, cf-consent.js copies the attributes onto a real <script> and swaps it in.

<script type="text/plain" data-cf-consent="statistik" src="/js/analytics.js"></script>

// or react to the decision directly
<script>
  document.addEventListener('cf:consent', function (event) {
    if (event.detail.granted.includes('marketing')) { … }
  });
</script>

Revoking cannot unload a script that already ran, so a decision that removes a category reloads the page. That is the honest behaviour, and it is why the reload is not configurable.

Anatomy

Hooks

Stored under cf-consent in localStorage as { v, ts, categories }. The ts is there because consent has to be demonstrable — but localStorage lives on the visitor's machine and proves nothing to a supervisory authority. A production deployment still needs to log the decision server-side. Bumping VERSION invalidates every stored answer, which is what a changed set of purposes requires.

What the law asks for

Not legal advice, and the wording of the categories needs a lawyer's eye before launch. These are the requirements the component is built to satisfy.

Accessibility

• The banner is a non-modal role="dialog". It carries no aria-modal, traps nothing and inerts nothing, because the page behind it must stay usable — a banner that blocks the site until you answer is a cookie wall.
• It sits immediately after the skip link, so it is the second stop in reading and tab order and nothing moves focus to it. The banner used to focus its own heading on appearance, which cost the stop in front of it: the skip link is earlier in the document, so every forward Tab from inside the banner went further down the page and never back. Measured on the landing page, first visit, the skip link was 47 Tab presses away at 375 px and 52 at 1280 — the whole page — against 1 on a return visit with the decision stored. It is 1 again in both.
• Nothing is lost by not moving focus. The banner is a fixed layer, so it is on screen at whatever scroll position the page opens at; it is role="dialog" and second in the document, so a screen reader arrives at it immediately after the skip link rather than instead of it; and this runs at DOMContentLoaded on a fresh navigation, where focus is at the start of the document and nobody has begun reading further down. Nothing is pre-selected either, which was the other half of the old reasoning and is still true: the reader arrives at the question, not at an answer.
• Esc does nothing on layer 1, deliberately. Dismissal is not an answer, and a banner that vanishes on Esc either loses the question or quietly counts as consent. There is no close cross for the same reason.
• Layer 2 is showModal(), so it follows the APG modal dialog pattern natively: focus enters the dialog, Tab cycles inside it, the background is inert, Esc closes, and focus returns to whatever opened it.
• Contrast on black, measured in the browser: heading and button labels 21.0:1, body copy and mono meta 10.6:1, button contours 10.6:1. The focus ring flips to lime, which is 18.5:1 here. The black tick on the foil ranges 11.9:1 to 16.4:1 across the ramp. Nothing in the component relies on colour alone.
• Every control is a real <button type="button"> or a real checkbox, each at least 48 px tall.
• With JavaScript off the banner stays hidden and no gated script ever runs. The visitor is never asked a question that cannot be answered.

Rules