Näin suunnittelet vaatimustenmukaisen evästebannerin

Vaatimustenmukainen ja käyttäjäystävällinen evästebanneri näyttää selkeät valinnat heti ensimmäisellä näytöllä, tyypillisesti ”Hyväksy kaikki”, ”Hylkää kaikki” ja ”Mukauta”, yhtä korostettuina. Se selittää käyttötarkoitukset selkeällä kielellä, pitää muut kuin välttämättömät evästeet pois päältä, kunnes kävijä päättää, toimii näppäimistöllä ja ruudunlukijalla, ei siirrä sivun asettelua ja antaa ihmisten muuttaa mielensä myöhemmin.

Mitä evästebannerin ensimmäisen tason pitäisi sisältää?

Ensimmäisellä tasolla on oltava riittävästi tietoa tietoisen valinnan tekemiseen ja yhtä helpot tavat hyväksyä tai kieltäytyä. Kaikki muu voi olla yhden klikkauksen päässä.

Sisällytä seuraavat osat:

• Lyhyt käyttötarkoituskuvaus, joka kertoo, mihin evästeitä käytät, esimerkiksi analytiikkaan ja mainontaan, ja mainitsee, milloin mukana on kumppaneita.
• Kolme yhtä korostettua toimintoa: hyväksy kaikki, hylkää kaikki ja mukauta, samankokoisina, samantyylisinä ja samalla tasolla.
• Linkki evästekäytäntöösi täysien tietojen saamiseksi.
• Toimittajien määrä, jos käytät IAB Transparency & Consent Frameworkia, koska TCF v2.2 edellyttää toimittajamäärien näyttämistä ensimmäisellä tasolla. Katso IAB TCF 2.2 selitettynä.

Esimerkki ensimmäisen tason tekstistä:

Käytämme evästeitä, jotta sivusto toimii, ja luvallasi mittaamme liikennettä ja näytämme kumppaniemme kanssa relevantteja mainoksia. Voit hyväksyä kaikki, hylätä kaikki tai valita kategorioittain, ja voit muuttaa mielesi milloin tahansa kohdassa ”Evästeasetukset”.

Vältä otsikkoa, kuten ”Yksityisyytesi on meille tärkeää”, jonka perässä on yksittäinen ”OK”-painike. Teksti, joka kuulostaa rauhoittavalta mutta ei nimeä yhtään käyttötarkoitusta, ei informoi ketään. Useimmat viranomaisten kohteena olevista manipuloivista malleista ovat tämän oppaan käytäntöjen vastakohtia.

Miten asetustason pitäisi toimia?

Asetustaso antaa kävijöiden valita käyttötarkoituksittain. Ryhmittele evästeet pieneen määrään kategorioita, kuten välttämättömät, asetukset, analytiikka ja markkinointi, ja pidä jokainen muu kuin välttämätön kategoria oletuksena pois päältä.

Näytä kustakin kategoriasta yhden lauseen kuvaus, muutama konkreettinen esimerkki ja mukana olevat toimittajat. Merkitse välttämättömät ”aina käytössä” -tilaan sen sijaan, että tarjoaisit kytkimen, joka ei tee mitään. Tarjoa ”Tallenna valinnat” painikkeiden ”Hyväksy kaikki” ja ”Hylkää kaikki” rinnalla niin, ettei mitään niistä suosita visuaalisesti.

Pidä näkymä silmäiltävänä. Pitkä toimittajakytkinten seinä tekee tietoisesta valinnasta vaikeampaa, ei helpompaa. Laita toimittajakohtaiset tiedot laajennettavan osion taakse niille, jotka haluavat ne nähdä.

Mihin kohtaan sivua banneri kuuluu?

Yhtä vaatimustenmukaista sijaintia ei ole. Tärkeää on, että banneri on huomattava, ei piilota hylkäysvaihtoehtoa eikä heikennä sivun toimintaa.

• Alareunan palkki tai kulmalaatikko: häiritsee vähemmän ja sopii useimmille sivustoille, kunhan muut kuin välttämättömät evästeet pysyvät pois päältä, kunnes valinta on tehty.
• Keskellä oleva modaali: pakottaa päätökseen ennen käyttöä, mutta sen on silti tarjottava yhtä helppo hylkäysmahdollisuus, tai se alkaa toimia evästemuurin tavoin.
• Mobiili: älä peitä koko näyttöä, aseta painikkeet täyteen leveyteen allekkain täsmälleen samalla tyylillä ja pidä ne peukalon ulottuvilla.

Suorituskyky kuuluu suunnitteluun. Toteuta banneri kiinteäsijaintisena päällekkäisenä kerroksena, jotta se ei työnnä sisältöä alaspäin, mikä lasketaan haitaksi Cumulative Layout Shift (CLS) -mittarissa. Suuri tekstibanneri voi myös päätyä mitattavaksi sivun Largest Contentful Paint (LCP) -elementiksi, ja raskaat klikkauskäsittelijät voivat hidastaa Interaction to Next Paint (INP) -arvoa. Oppaamme evästebannereista ja Core Web Vitalsista käsittelee yksityiskohdat.

Miten teen evästebannerista saavutettavan?

Rakenna se semanttisesta HTML:stä: oikeat painikkeet, nimetty säiliö, näkyvät kohdistustyylit ja riittävä värikontrasti. Kävijä, joka ei pysty käyttämään banneria, ei voi antaa suostumusta eikä kieltäytyä siitä.

<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Your cookie choices</h2>
  <p id="cc-desc">
    We use cookies for analytics and ads only if you allow it.
    <a href="/cookie-policy">Read our cookie policy</a>
  </p>
  <button type="button">Reject all</button>
  <button type="button">Customize</button>
  <button type="button">Accept all</button>
</div>

Muutama sääntö tekee eron:

1. Käytä <button>-elementtejä, älä klikattavia <div>-elementtejä, jotta näppäimistö ja apuvälineet toimivat oletuksena.
2. Jos banneri estää sivun käytön, lisää aria-modal="true", siirrä kohdistus bannerin sisälle, pidä se siellä, kunnes valinta on tehty, ja palauta kohdistus sitten sivulle.
3. Täytä WCAG AA -kontrastivaatimus (4,5:1 normaalille tekstille) jokaisessa painikkeessa, myös hylkäyspainikkeessa.
4. Anna jokaiselle kategoriaohjaimelle saavutettava nimi ja tila, kuten nimetty valintaruutu tai elementti, jolla on role="switch" ja aria-checked.
5. Tue zoomausta ja pieniä näyttöjä piilottamatta mitään kolmesta toiminnosta.

Miten bannerin pitäisi käyttäytyä valinnan jälkeen?

Ota valinta käyttöön heti ja muista se. Jos joku hyväksyy analytiikan, lataa kyseiset tagit välittömästi. Jos hän kieltäytyy tai peruuttaa myöhemmin, lopeta niiden lataaminen ja poista hallitsemasi ensimmäisen osapuolen evästeet.

Hoida sitten yksityiskohdat kuntoon:

• Pysyvä pääsy: lisää ”Evästeasetukset”-linkki alatunnisteeseen tai pieni kelluva painike, koska suostumuksen peruuttamisen on oltava yhtä helppoa kuin sen antamisen.
• Järkevä uudelleenkysyminen: älä näytä banneria joka käynnillä. Kysy uudelleen kohtuullisen ajan kuluttua tai kun käyttötarkoituksesi tai toimittajasi muuttuvat merkittävästi.
• Alueellinen toiminta: EU:n ja Ison-Britannian kävijät tarvitsevat opt-in-suostumuksen. Kalifornian malli on opt-out, jossa on ”Do Not Sell or Share My Personal Information” -linkki ja Global Privacy Control -signaalien noudattaminen.
• Tietueet: tallenna, mitä kukin kävijä valitsi, milloin ja minkä bannerin version hän näki, jotta voit osoittaa suostumuksen myöhemmin.

Mitä pitäisi tarkistaa ennen julkaisua?

Käy tämä järjestys läpi ennen kuin julkaiset uuden tai uudistetun bannerin:

1. Varmista puhtaassa selainistunnossa, ettei mitään muuta kuin välttämätöntä lataudu ennen valintaa.
2. Napsauta ”Hylkää kaikki” ja varmista, että analytiikka- ja mainospyynnöt pysyvät estettyinä eri sivuilla.
3. Hyväksy, peruuta sitten alatunnisteen linkin kautta ja varmista, että tagit lakkaavat toimimasta.
4. Käy koko kulku läpi pelkällä näppäimistöllä ja sen jälkeen ruudunlukijalla.
5. Testaa pienellä puhelimen näytöllä pystysuunnassa.
6. Mittaa CLS, LCP ja INP banneri näkyvillä.
7. Tarkista banneri jokaisella palvelemallasi kielellä ja alueella.

Yhteenveto

Hyvä evästebanneri on rehellinen, tasapainoinen ja nopea: tasavertaiset valinnat, selkeät sanat, saavutettavat ohjaimet ja toiminta, joka vastaa painikkeiden lupauksia. Suunnittele yhtä huolella kieltäytyvälle kävijälle kuin hyväksyvälle. Cookieshin kaltaiset työkalut voivat tarjota maantieteellisesti kohdennettuja GDPR-, CCPA- ja LGPD-bannereita latausskriptistä, joka ei aiheuta asettelun siirtymiä, jolloin tiimisi voi keskittyä tekstiin ja suunnitteluun.

Tämä artikkeli on yleistä tietoa eikä oikeudellista neuvontaa. Kun teet omaa tilannettasi koskevia päätöksiä, käänny pätevän tietosuoja-asiantuntijan puoleen.