# Kuidas kujundada nõuetele vastav ja kasutajasõbralik küpsisebänner

> Kujunda küpsisebänner, mis vastab IKÜM-i ootustele ja austab külastajaid: võrdsed valikud, selge tekst, ligipääsetav HTML, paigutuse nihketa ja lihtne tagasivõtmine.

Source: https://www.cookiesh.eu/et/blog/cookie-banner-design-best-practices  
Published: 2026-04-16

## Key takeaways

- Paiguta bänneri esimesele kihile nõustumise, keeldumise ja kohandamise valikud, millel on võrdne visuaalne kaal.
- Kirjelda eesmärke konkreetses ja lihtsas keeles ning hoia seadete kihis iga mittehädavajalik kategooria vaikimisi välja lülitatuna.
- Ehita bänner päris nuppudest, nimetatud konteinerist, nähtava fookuse ja piisava kontrastiga, et igaüks saaks valiku teha.
- Kuva bänner sisu peal oleva kihina, mitte sisu allapoole lükates, et see ei põhjustaks paigutuse nihet.
- Anna külastajatele alati kättesaadav võimalus nõusolekut muuta või tagasi võtta ja rakenda nende valik kohe.

Nõuetele vastav ja kasutajasõbralik küpsisebänner näitab juba esimesel ekraanil selgeid valikuid, tavaliselt „Nõustu kõigiga“, „Keeldu kõigist“ ja „Kohanda“, millel on võrdne visuaalne kaal. See selgitab eesmärke lihtsas keeles, hoiab mittehädavajalikud küpsised välja lülitatuna, kuni külastaja otsustab, töötab klaviatuuri ja ekraanilugejaga, ei nihuta lehe paigutust ning laseb inimestel hiljem meelt muuta.

## Mida peaks küpsisebänneri esimene kiht sisaldama?

Esimene kiht vajab piisavalt teavet teadliku valiku tegemiseks ja võrdselt lihtsaid viise nõustumiseks või keeldumiseks. Kõik muu võib olla ühe klõpsu kaugusel.

Lisa need elemendid:

- **Lühike eesmärgikirjeldus**, mis nimetab, milleks küpsiseid kasutad, näiteks analüütikaks ja reklaamiks, ning märgib, kui kaasatud on partnerid.
- **Kolm võrdselt silmapaistvat tegevust:** nõustu kõigiga, keeldu kõigist ja kohanda, mis on sama suuruse, stiili ja paigutustasemega.
- **Link sinu küpsisepoliitikale** täielike üksikasjade jaoks.
- **Teenusepakkujate arv**, kui kasutad IAB läbipaistvuse ja nõusoleku raamistikku (Transparency & Consent Framework), sest TCF v2.2 nõuab teenusepakkujate arvu näitamist esimesel kihil. Vaata artiklit [IAB TCF 2.2 selgitatult](/et/blog/iab-tcf-2-2-explained).

Näide esimese kihi tekstist:

> Kasutame küpsiseid, et see sait töötaks, ning sinu loal ka liikluse mõõtmiseks ja koos partneritega asjakohaste reklaamide näitamiseks. Võid nõustuda kõigiga, keelduda kõigist või valida kategooriate kaupa ning oma otsust igal ajal muuta jaotises „Küpsiste seaded“.

Väldi pealkirja „Hindame sinu privaatsust“, millele järgneb üksainus nupp „OK“. Tekst, mis kõlab rahustavalt, kuid ei nimeta ühtegi eesmärki, ei informeeri kedagi. Enamik [pimedatest mustritest, mida järelevalveasutused sihivad](/et/blog/cookie-banner-dark-patterns), on selles juhendis kirjeldatud tavade vastand.

## Kuidas peaks seadete kiht toimima?

Seadete kiht võimaldab külastajatel valida eesmärgi järgi. Rühmita küpsised väikesesse arvu kategooriatesse, näiteks vajalikud, eelistused, analüütika ja turundus, ning hoia iga mittehädavajalik kategooria vaikimisi välja lülitatuna.

Näita iga kategooria juures ühelauselist kirjeldust, mõnda konkreetset näidet ja kaasatud teenusepakkujaid. Märgi vajalike küpsiste kategooria „alati aktiivseks“, selle asemel et pakkuda lülitit, mis midagi ei tee. Paku nuppu „Salvesta valikud“ koos nuppudega „Nõustu kõigiga“ ja „Keeldu kõigist“ nii, et ühtegi neist visuaalselt ei eelistata.

Hoia kiht kiiresti silmitsetavana. Pikk teenusepakkujate lülitite sein muudab teadliku valiku tegemise raskemaks, mitte lihtsamaks. Paiguta teenusepakkujate tasandi üksikasjad avatavasse jaotisse neile, kes neid näha soovivad.

## Kuhu peaks bänner lehel paigutuma?

Ühte kindlat nõuetele vastavat asukohta ei ole. Oluline on, et bänner oleks märgatav, ei peidaks keeldumisvõimalust ega halvendaks lehte.

- **Riba allservas või nurgakast:** segab vähem ja sobib enamikule saitidele, kui mittehädavajalikud küpsised jäävad välja lülitatuks, kuni valik on tehtud.
- **Modaalaken keskel:** sunnib enne kasutamist otsust tegema, kuid peab siiski pakkuma võrdset keeldumisvõimalust, muidu hakkab see toimima nagu küpsisesein.
- **Mobiil:** ära kata kogu ekraani, paiguta nupud täislaiuses ja ühesuguse stiiliga üksteise alla ning hoia need pöidla ulatuses.

Jõudlus on osa disainist. Kuva bänner fikseeritud asukohaga ülekattena, et see ei lükkaks sisu allapoole, mis halvendaks Cumulative Layout Shift'i (CLS) näitajat. Suur tekstiga bänner võib osutuda ka lehe Largest Contentful Paint'i (LCP) elemendiks ja rasked klõpsukäsitlejad võivad aeglustada Interaction to Next Painti (INP). Meie juhend [küpsisebännerite ja Core Web Vitalsi](/et/blog/cookie-banners-core-web-vitals) kohta käsitleb üksikasju.

## Kuidas muuta küpsisebänner ligipääsetavaks?

Ehita see semantilisest HTML-ist: päris nupud, nimetatud konteiner, nähtavad fookusstiilid ja piisav värvikontrast. Külastaja, kes ei saa bännerit kasutada, ei saa nõusolekut anda ega sellest keelduda.

```html
<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Sinu küpsisevalikud</h2>
  <p id="cc-desc">
    Kasutame küpsiseid analüütikaks ja reklaamiks ainult sinu loal.
    <a href="/cookie-policy">Loe meie küpsisepoliitikat</a>
  </p>
  <button type="button">Keeldu kõigist</button>
  <button type="button">Kohanda</button>
  <button type="button">Nõustu kõigiga</button>
</div>
```

Mõni reegel teeb suure vahe:

1. Kasuta `<button>` elemente, mitte klõpsatavaid `<div>` elemente, et klaviatuur ja abitehnoloogia toimiksid vaikimisi.
2. Kui bänner blokeerib lehe, lisa `aria-modal="true"`, vii fookus bännerisse, hoia fookust seal, kuni valik on tehtud, ja tagasta seejärel fookus lehele.
3. Täida WCAG AA kontrastinõue (tavateksti puhul 4,5:1) iga nupu puhul, sealhulgas keeldumisnupul.
4. Anna igale kategooria juhtelemendile ligipääsetav nimi ja olek, näiteks sildiga märkeruut või element atribuutidega `role="switch"` ja `aria-checked`.
5. Toeta suurendamist ja väikeseid ekraane, peitmata ühtegi kolmest tegevusest.

## Kuidas peaks bänner pärast valikut käituma?

Rakenda valik kohe ja jäta see meelde. Kui keegi nõustub analüütikaga, laadi need märgendid kohe. Kui ta keeldub või võtab nõusoleku hiljem tagasi, lõpeta nende laadimine ja eemalda sinu hallatavad esimese osapoole küpsised.

Seejärel lihvi üksikasjad:

- **Alati kättesaadav juurdepääs:** lisa jalusesse link „Küpsiste seaded“ või väike hõljuv nupp, sest nõusoleku tagasivõtmine peab olema sama lihtne kui selle andmine.
- **Mõistlik uuesti küsimine:** ära näita bännerit igal külastusel. Küsi uuesti mõistliku aja möödudes või siis, kui sinu eesmärgid või teenusepakkujad oluliselt muutuvad.
- **Piirkondlik käitumine:** EL-i ja Ühendkuningriigi külastajad vajavad aktiivset nõusolekut (opt-in). California mudel on loobumispõhine (opt-out), lingiga „Do Not Sell or Share My Personal Information“ ja [Global Privacy Controli](/et/blog/global-privacy-control) signaalide austamisega.
- **Kirjed:** salvesta, mida iga külastaja valis, millal ja millist bänneri versiooni ta nägi, et saaksid nõusolekut hiljem tõendada.

## Mida enne käivitamist kontrollida?

Käi enne uue või ümberkujundatud bänneri avaldamist läbi see järjestus:

1. Veendu puhtas brauseriseansis, et enne valikut ei laadita midagi mittehädavajalikku.
2. Klõpsa „Keeldu kõigist“ ja kontrolli, et analüütika- ja reklaamipäringud jäävad kõigil lehtedel blokeerituks.
3. Nõustu, seejärel võta nõusolek jaluse lingi kaudu tagasi ja kontrolli, et märgendid peatuvad.
4. Läbi kogu voog ainult klaviatuuriga ja seejärel ekraanilugejaga.
5. Testi väikesel telefoniekraanil püstpaigutuses.
6. Mõõda CLS-i, LCP-d ja INP-d nähtava bänneriga.
7. Kontrolli bännerit igas keeles ja piirkonnas, mida teenindad.

## Kokkuvõte

Hea küpsisebänner on aus, tasakaalus ja kiire: võrdsed valikud, lihtsad sõnad, ligipääsetavad juhtelemendid ja käitumine, mis vastab sellele, mida nupud ütlevad. Kujunda bänner keelduda soovivale külastajale sama hoolikalt kui nõustujale. Sellised tööriistad nagu Cookiesh suudavad näidata geosihitud IKÜM-i, CCPA ja LGPD bännereid laadijast, mis ei põhjusta paigutuse nihet, nii et sinu meeskond saab keskenduda tekstile ja disainile.

*See artikkel on üldine teave, mitte õigusnõustamine. Oma konkreetse olukorra kohta otsuste tegemiseks pea nõu kvalifitseeritud privaatsusspetsialistiga.*

## FAQ

### Kas mu küpsisebänner peaks olema modaalaken või riba lehe allservas?

Mõlemad võivad nõuetele vastata. Modaalaken sunnib otsust tegema, kuid tundub pealetükkivam ja peab ikkagi pakkuma lihtsat keeldumisvõimalust. Riba või nurgakast segab vähem ning mittehädavajalikud küpsised jäävad lihtsalt välja lülitatuks, kuni külastaja valiku teeb.

### Kui pikk peaks bänneri tekst olema?

Piisavalt lühike, et seda saaks mõne sekundiga läbi lugeda, tavaliselt kaks-kolm lauset esimesel kihil. Paiguta üksikasjad seadete kihti ja küpsisepoliitikasse, kuid veendu, et esimene kiht nimetab siiski peamised eesmärgid.

### Kas USA külastajate jaoks on vaja teistsugust bännerit?

Sageli jah. EL-i ja Ühendkuningriigi külastajad vajavad aktiivse nõusoleku (opt-in) bännerit, California aga kasutab loobumismudelit (opt-out) koos lingiga „Do Not Sell or Share My Personal Information“. Geosihtimine võimaldab näidata igale piirkonnale õiget kogemust.

### Kas võin oma küpsisebännerit A/B-testida?

Võid testida paigutust, sõnastust ja asukohta, kuid iga variant peab ise nõuetele vastama. Nõustumismäära optimeerimine keeldumist raskemaks muutes on täpselt see, mille vastu järelevalveasutused on.

## Sources

- [EDPB Guidelines 05/2020 on consent](https://www.edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
- [web.dev: Web Vitals](https://web.dev/articles/vitals)
- [IAB Europe Transparency & Consent Framework](https://iabeurope.eu/transparency-consent-framework/)
- [Global Privacy Control](https://globalprivacycontrol.org/)