Cookiemeddelelse
Anvender din selvbetjeningsløsning cookies til andet end teknisk nødvendige formål, skal brugeren vises en cookiemeddelelse.
Denne komponent er opdateret i Web Component-versionen
Komponenten har fået nyt udseende og funktionalitet samt forbedret tilgængelighed. De nye retningslinjer kan ses i beslutningslog for version 12.0.0.
Sådan bruges komponenten
Anvendes til
Brug cookiemeddelelsen til at få brugerens accept af de cookies du sætter i din løsning ud over de funktionelt nødvendige.
Anvendes ikke til
Du behøver ikke vise en cookiemeddelelse, hvis din løsning kun sætter funktionelt nødvendige cookies.
Vejledning
Det Fælles Designsystem anviser kun styling for cookiemeddelelsen, ikke den tekniske implementering af cookiemeddelelsen.
Du skal selv tilpasse indholdet i meddelelsen, så den overholder gældende lovgivning og stemmer overens med din løsnings specifikke anvendelse af cookies.
Sådan (do)
Sådan: Vis cookiemeddelelse, hvor den er synlig uden at ødelægge brugernes mulighed for at danne sig et første indtryk af webstedet.
Ikke sådan (don't)
Ikke sådan: Vis ikke cookiemeddelelse i et modalvindue. Det gør det umuligt for brugerne at se siden, før de har accepteret cookies (Friedman, 2019). Det distraherer brugerne fra det, de kom for, og kan sågar få dem til at glemme, hvad de var i gang med (Fessenden, 2017).
Sådan (do)
Sådan: Hvis det er vigtigt for websitet, at brugerne tager stilling til cookiemeddelelsen, er det nødvendigt at gøre det tydeligt, at de skal træffe et valg. Det kan gøres ved at vise meddelelsen på en prominent plads på siden, og at lade den følge med, når der scrolles. Overvej at tilbyde brugerne flere valgfrie cookie-indstillinger, så de fx kan sige ja eller nej til cookies til brug for statistik, personalisering og komfort.
Ikke sådan (don't)
Ikke sådan: Undgå at give cookiemeddelelsen en diskret placering i sidens periferi, hvis det er vigtigt, at de tager stilling til den. Brugernes blik er primært fokuseret midt på websider.
Referencer
Installation
HTML Struktur
Koden indsættes under body og før header. Gør man brug af Gå til sidens indhold, skal denne indsættes efter cookiemeddelelsen.
Bemærk at DKFDS på nuværende tidspunkt kun leverer HTML og CSS til denne komponent. Funktionaliteten skal man derfor selv håndtere.
Cookies brugt til statistik må ikke sættes, før man aktivt har accepteret dette.
Web Component-koden er i beta
Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.
<fds-modal-opener modal-id="simple-cookie-example">
<button class="button button-secondary" type="button">Vis standard cookiemeddelelse</button>
</fds-modal-opener>
<fds-modal id="simple-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="simple-cookie-example-heading" dismissible="false">
<dialog>
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="simple-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top"></div>
<p>Vi indsamler statistik ved hjælp af cookies. Alle indsamlede data anonymiseres. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<p class="mb-2"><a href="#">Læs mere om vores brug af cookies</a></p>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter cookies</button>
<button class="button button-secondary" type="submit" value="reject">Nej til cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>
<fds-modal-opener modal-id="simple-cookie-example">
<button class="button button-secondary" type="button" aria-haspopup="dialog">Vis standard cookiemeddelelse</button>
</fds-modal-opener>
<fds-modal id="simple-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="simple-cookie-example-heading" dismissible="false">
<dialog aria-labelledby="simple-cookie-example-heading" closedby="none">
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="simple-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top">
<h2 class="top-heading" tabindex="-1" id="simple-cookie-example-heading">Denne selvbetjening bruger cookies</h2>
</div>
<p>Vi indsamler statistik ved hjælp af cookies. Alle indsamlede data anonymiseres. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<p class="mb-2">
<a href="#">Læs mere om vores brug af cookies</a>
</p>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter cookies</button>
<button class="button button-secondary" type="submit" value="reject">Nej til cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>Om denne komponent
Cookiemeddelelsen anvender fds-modal, men er ikke selv en Web Component.
Varianter
Flere end to typer cookies
<fds-modal-opener modal-id="choices-cookie-example">
<button class="button button-secondary" type="button">Vis cookiemeddelelse med tjekbokse</button>
</fds-modal-opener>
<fds-modal id="choices-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="choices-cookie-example-heading" dismissible="false">
<dialog>
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="choices-cookie-example-logo" src="/assets/img/logo-header-placeholder.png"
alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec
arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<div class="d-block d-sm-flex flex-wrap mb-6">
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="required" id="chke5e8005a" disabled checked>
<label>Nødvendige (kan ikke fravælges)</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="statistics" id="chk4cc20cb0">
<label>Statistik</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="preferences" id="chk9c4c0116">
<label>Præferencer</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="functional" id="chkb0395b9c">
<label>Funktionelle</label>
</fds-checkbox>
</div>
<details class="details mb-md-4">
<summary class="details-summary">Læs mere om vores brug af cookies</summary>
<div class="details-text">
<h3 class="h5 mt-0">Nødvendige</h3>
<p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero.</p>
<ul>
<li>Donec vulputate eros non felis finibus</li>
<li>Ut facilisis leo dapibus</li>
</ul>
<h3 class="h5">Statistik</h3>
<p>Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam commodo nulla metus. Phasellus varius eu dolor
nec ultricies.</p>
<ul>
<li>Aenean vulputate</li>
<li>Magna quis tempor consequat</li>
<li>Mi ligula bibendum arcu</li>
</ul>
<h3 class="h5">Præferencer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec, consequat est. Nulla
facilisi.</p>
<ul>
<li>A pulvinar libero elit at nibh</li>
<li>Sed non ornare eros</li>
<li>Quis egestas magna</li>
</ul>
<h3 class="h5">Funktionelle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Nullam a quam tincidunt</li>
<li>Laoreet vitae efficitur volutpat</li>
</ul>
</div>
</details>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter udvalgte cookies</button>
<button class="button button-secondary" type="submit" value="reject">Accepter alle cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal><fds-modal-opener modal-id="choices-cookie-example">
<button class="button button-secondary" type="button" aria-haspopup="dialog">Vis cookiemeddelelse med tjekbokse</button>
</fds-modal-opener>
<fds-modal id="choices-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="choices-cookie-example-heading" dismissible="false">
<dialog aria-labelledby="choices-cookie-example-heading" closedby="none">
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="choices-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top">
<h2 class="top-heading" tabindex="-1" id="choices-cookie-example-heading">Denne selvbetjening bruger cookies</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<div class="d-block d-sm-flex flex-wrap mb-6">
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="required" id="chke5e8005a" disabled="" checked="" class="form-checkbox">
<label class="form-label disabled" for="chke5e8005a">Nødvendige (kan ikke fravælges)</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="statistics" id="chk4cc20cb0" class="form-checkbox">
<label class="form-label" for="chk4cc20cb0">Statistik</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="preferences" id="chk9c4c0116" class="form-checkbox">
<label class="form-label" for="chk9c4c0116">Præferencer</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="functional" id="chkb0395b9c" class="form-checkbox">
<label class="form-label" for="chkb0395b9c">Funktionelle</label>
</fds-checkbox>
</div>
<details class="details mb-md-4">
<summary class="details-summary">Læs mere om vores brug af cookies</summary>
<div class="details-text">
<h3 class="h5 mt-0">Nødvendige</h3>
<p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero.</p>
<ul>
<li>Donec vulputate eros non felis finibus</li>
<li>Ut facilisis leo dapibus</li>
</ul>
<h3 class="h5">Statistik</h3>
<p>Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam commodo nulla metus. Phasellus varius eu dolor nec ultricies.</p>
<ul>
<li>Aenean vulputate</li>
<li>Magna quis tempor consequat</li>
<li>Mi ligula bibendum arcu</li>
</ul>
<h3 class="h5">Præferencer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec, consequat est. Nulla facilisi.</p>
<ul>
<li>A pulvinar libero elit at nibh</li>
<li>Sed non ornare eros</li>
<li>Quis egestas magna</li>
</ul>
<h3 class="h5">Funktionelle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Nullam a quam tincidunt</li>
<li>Laoreet vitae efficitur volutpat</li>
</ul>
</div>
</details>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter udvalgte cookies</button>
<button class="button button-secondary" type="submit" value="reject">Accepter alle cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>Konfiguration
Se dokumentationen for modaler for konfiguration.
Bemærk, at cookiemeddelelser bruger dismissible="false" for at tvinge brugeren til at træffe et valg. <dialog> skal indeholde <div class="scrollable-area has-fade"> samt <div class="fixed-area"> for at holde knapperne synlige.
Hvis cookiemeddelelsen indeholder et logo, er det op til løsningen selv at sætte en passende højde og bredde for dette. Giv logoet en passende alt-tekst, så det også er muligt for skærmlæserbrugere at vide, hvem der står bag selvbetjeningsløsningen.
Husk at teste din cookiemeddelelse, så du sikrer dig, at din styling ikke skjuler elementer eller fokusstreger under de fikserede knapper.