Hopp til hovedinnhold
UUKontroll logo UUKontroll

Gi brukeren kontroll over automatisk lyd (WCAG 1.4.2)

Lyd som starter automatisk må kunne stoppes, pauses eller dempes av brukeren innen tre sekunder.

wcag niva-a multimedia

Få ting er mer irriterende enn å åpne en nettside og plutselig bli møtt av lyd du ikke ba om. For de fleste er det bare en ulempe. Men for skjermleserbrukere kan automatisk lyd gjøre hele nettsiden ubrukelig - fordi lyden overdøver den syntetiske talen de er avhengige av for å navigere.

Hva sier kravet?

WCAG 1.4.2 Styring av lyd krever at dersom lyd på en nettside spilles av automatisk i mer enn tre sekunder, må det finnes en mekanisme for å pause eller stoppe lyden, eller en mekanisme for å justere lydvolumet uavhengig av systemets generelle volumnivå.

Kravet er nivå A - helt grunnleggende. Alle norske virksomheter må oppfylle dette.

I praksis betyr det: hvis nettsiden din automatisk starter en video, et lydklipp, en bakgrunnsmusikk eller noen form for audio, må brukeren raskt og enkelt kunne skru det av. Og mekanismen for å gjøre det skal være tilgjengelig rett i starten av siden - brukeren skal ikke måtte lete.

Det aller beste er selvsagt å ikke spille av lyd automatisk i det hele tatt. La brukeren trykke play selv. Men hvis du har en god grunn til autoavspilling, må du sørge for kontroller.

Hvorfor er dette viktig?

Skjermlesere og automatisk lyd krasjer

Skjermlesere som JAWS, NVDA og VoiceOver produserer syntetisk tale som brukeren lytter til for å forstå innholdet på siden. Hvis nettsiden samtidig spiller musikk, en reklamefilm eller en nyhetsoppsummering, hører brukeren begge lydene mikset sammen. Resultatet er at skjermlesertalen blir umulig å oppfatte, og brukeren kan ikke navigere videre - de er i praksis låst ute.

Kognitive utfordringer

Uventet lyd kan være svært forstyrrende for personer med oppmerksomhetsvansker, ADHD eller angstlidelser. En nettside som plutselig spiller av lyd kan avbryte konsentrasjonen og skape stress.

Praktiske situasjoner

Mange bruker nettet på jobb, på bussen, på biblioteket eller om natten mens andre sover. Uventet lyd i disse situasjonene er alt fra pinlig til uholdbart. De fleste moderne nettlesere har allerede innebygd blokkering av autoavspilling av lyd, men det er ikke noe du som utvikler bør stole på - du må uansett oppfylle kravet.

Slik oppfyller du kravet

Ikke bruk autoavspilling av lyd

Den enkleste og beste løsningen er å la brukeren selv velge når de vil høre lyd. Fjern autoplay-attributtet fra <audio>- og <video>-elementer:

<!-- Dårlig: Lyd starter automatisk -->
<video autoplay>
  <source src="intro.mp4" type="video/mp4">
</video>

<!-- Bra: Brukeren starter avspilling selv -->
<video controls>
  <source src="intro.mp4" type="video/mp4">
</video>

Hvis autoavspilling er nødvendig, demp lyden

Noen ganger har designet en bakgrunnsvideo uten lyd. Sørg da for at videoen er dempet:

<!-- Akseptabelt: Autoavspilling uten lyd -->
<video autoplay muted loop playsinline>
  <source src="bakgrunn.mp4" type="video/mp4">
</video>

muted-attributtet sørger for at det ikke spilles av lyd. Merk at de fleste moderne nettlesere uansett blokkerer autoavspilling med lyd - men muted gjør intensjonen tydelig.

Gi brukeren kontroll raskt

Hvis lyd absolutt må spilles av automatisk, plasser volumkontrollene tidlig i DOM-en slik at de er lett tilgjengelige:

<div class="lydkontroll" role="region" aria-label="Lydkontroller">
  <button id="demp-lyd" aria-pressed="false">
    Demp bakgrunnslyd
  </button>
  <input type="range" id="volum" min="0" max="100"
         value="50" aria-label="Volum">
</div>

<audio id="bakgrunnslyd" autoplay>
  <source src="bakgrunn.mp3" type="audio/mpeg">
</audio>

const dempKnapp = document.getElementById("demp-lyd");
const audio = document.getElementById("bakgrunnslyd");

dempKnapp.addEventListener("click", () => {
  audio.muted = !audio.muted;
  dempKnapp.setAttribute("aria-pressed", audio.muted);
  dempKnapp.textContent = audio.muted
    ? "Slå på bakgrunnslyd"
    : "Demp bakgrunnslyd";
});

Unngå lydkarusseller og auto-slidere med lyd

Bildeslider og karuseller som automatisk bytter mellom videoklipp med lyd, er problematiske. Hvert nye klipp starter potensielt ny lyd uten brukerens kontroll. Hvis du må ha slike elementer, sørg for at de starter med lyden av og har en synlig og tilgjengelig avspillingsknapp.

Test med skjermleser

Start en skjermleser (NVDA er gratis for Windows) og besøk nettsiden din. Hvis du hører skjermleseren og nettsidens lyd samtidig, og det er vanskelig å oppfatte talen, har du et problem. Sjekk at du raskt kan finne og bruke lydkontrollen uten å se på skjermen.

Vanlige feil

  • Video med autoplay uten muted-attributt. Selv om mange nettlesere blokkerer dette, er det fortsatt et brudd på kravet.
  • Bakgrunnsmusikk som starter automatisk - vanlig på restaurant- og hotellnettsider. Det virker koselig, men stenger ute skjermleserbrukere.
  • Lydkontrollene er vanskelige å finne. En liten høyttalerikon i hjørnet som verken har synlig tekst eller god kontrast.
  • Ingen tastaturstøtte for lydkontroll. Demp-knappen fungerer med mus, men kan ikke nås med Tab-tasten.
  • Automatisk avspilling i uendelig loop uten pause- eller stoppknapp - lyden stopper aldri.
  • Tredjepartsinnhold med autoplay. Innebygde YouTube-videoer, reklame eller sosiale medier-widgeter som starter lyd automatisk uten at du har kontroll.

Den sikreste regelen er enkel: la brukeren styre lyden selv. Ingen lyd bør noensinne starte uten at brukeren eksplisitt har bedt om det. Det gir den beste brukeropplevelsen for alle - med eller uten hjelpemidler.