Login

Try consentmanager
Book a call

Arbeta med tillgänglighet / WCAG

Som standard är samtyckeslagret förberett för att vara tillgängligt för skärmläsare och liknande verktyg, men i vissa fall kan justeringar av designinställningarna vara nödvändiga.

Aktivera WCAG-stöd för cookie-banners

För att aktivera stöd för WCAG (Web Content Accessibility Guidelines 2.2), logga in på ditt konto och gå till Meny > Design och redigera motsvarande design. Expandera inställningarna under "Visa avancerade inställningar" och aktivera WCAG:

WCAG-ändringar i utdata för samtyckeslagret

Om WCAG-inställningen är aktiverad för en design kommer följande ändringar att tillämpas på samtyckeslagret:

  • Samtyckeslagret kommer att omslutas av ett shadowRoot-element
  • Rubriker i samtyckeslagret kommer att använda elementen <h1> och <h2> istället för <div>
  • Toggle-texter kommer att använda elementet <label> istället för <div>
  • Menyn på lagret för anpassade inställningar kommer att använda elementet <nav> istället för <div>
  • Element för åldersverifiering kommer att kompletteras med en etikett
  • Tabellerna kommer att förses med rubriker
  • Elementen kommer att få attribut som aria-label, aria-checked, aria-modal, role och liknande
  • Gatekeeper-alternativet är tillgängligt (se nedan)

Gatekeeper-alternativ

När WCAG är aktiverat kan även alternativet Gatekeeper aktiveras. Detta förhindrar att samtyckeslagret tappar fokus: Om användaren trycker på TAB-tangenten (eller ett liknande navigeringselement på tangentbordet) kommer fokus alltid att stanna kvar inom samtyckeslagret och inte hoppa till andra positioner på webbplatsen.

Designöverväganden

Observera att de tekniska ändringarna även kan kräva ytterligare ändringar i själva designen för att uppfylla WCAG-kraven fullt ut. Exempel på detta är:

  • Använd en lämplig teckenstorlek (t.ex. em eller pt istället för px)
  • Använd ett sans serif-typsnitt som är allmänt tillgängligt (t.ex. Times New Roman, Verdana, Arial, …)
  • Använd en färg- och kontrastförhållande som är lätt att urskilja (t.ex. ett kontrastförhållande på 3:1 mellan text och bakgrund)
  • Använd ett textavstånd som gör det lätt att läsa innehållet (t.ex. radhöjd på 1,5 em)

Förutom rent grafiska ändringar kan vissa WCAG-krav kräva att du använder vissa inställningar i designen. För att uppfylla WCAG-kraven kan du till exempel behöva aktivera menyer i din design av samtyckeslagret.

Vidare läsning

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!