Cookie Consent Ready

<duet-cookie-consent accessible-label="Hyväksyn evästeiden käytön">
  Käytämme evästeitä. Käyttämällä verkkosivujamme hyväksyt evästeiden käyton.
  <a href="#" target="_blank">Lue lisää <duet-visually-hidden>evästeistä</duet-visually-hidden></a>
</duet-cookie-consent>

<script>
  // Select the above cookie consent component
  var cookie = document.querySelector("duet-cookie-consent")

  // On OK button click, do something...
  cookie.addEventListener("duetCookieConsent", function (e) {
    console.log("cookie consent button clicked", e)
  })
</script>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• Always make sure that cookie consent is the first item in the page tab order. Place it before header component in the HTML.
• Always provide accessibleLabel property for assistive technology to replace the visible “OK” text in the action button.
• When providing a “read more” link, it’s required to give some additional information to users of assistive technology by using visually hidden component.
• Cookie Consent additionally uses tabindex="0" to make it possible to access it using tab key or programmatically move focus to it.

Additional considerations #

• If your page has a chat button in lower right corner, keep the chat button hidden until cookie consent has been accepted and removed from the DOM.