WCAG 1.4.2: Ljudkontroll

Vad Denna Regel Innebär

WCAG 1.4.2 — Ljudkontroll är ett framgångskriterium på nivå A under principen Uppfattningsbar. Det säger: Om något ljud på en webbsida spelas upp automatiskt i mer än 3 sekunder ska det finnas antingen en mekanism för att pausa eller stoppa ljudet, eller en mekanism för att kontrollera ljudvolymen oberoende av systemets övergripande volymnivå.

Kriteriet utlöses av allt ljudinnehåll som börjar spelas utan uttrycklig användaråtgärd och fortsätter längre än tre sekunder. Detta inkluderar bakgrundsmusik inbäddad på en sida, automatiskt uppspelande video med hörbart ljudspår, ljudannonser, loopade ljudeffekter och talade introduktioner som startar vid sidladdning. Den avgörande frasen är automatiskt — ljud som användaren medvetet startar (klickar på en uppspelningsknapp, aktiverar en länk) omfattas inte av denna regel.

För att uppfylla kriteriet måste minst ett av följande vara sant:

• Användaren får en paus- eller stoppkontroll som stoppar ljudet helt eller avbryter det tills användaren återupptar det.
• Användaren får en volymkontroll som är oberoende av operativsystemets huvudvolym, så att hen kan sänka eller stänga av ljudet utan att påverka andra program eller systemsignaler.

En mekanism som bara visas högst upp på sidan och är tangentbordsåtkomlig är acceptabel, men den måste kunna nås och användas innan ljudet blir störande. Bästa praxis är starkt att placera kontrollen som det allra första interaktiva elementet i fokusordningen så att tangentbords- och skärmläsaranvändare stöter på den omedelbart.

Det enda officiella undantaget som definieras i WCAG är ljud som varar tre sekunder eller mindre. Korta aviseringstoner eller korta pling som stannar av sig själva är undantagna. Det finns inget undantag för lågvolymsljud, loopat ljud eller ljud inbäddat i tredjepartswidgets — alla dessa omfattas av regeln om de spelas upp automatiskt och överstiger tre sekunder.

Varför Det Är Viktigt

Okontrollerat automatiskt uppspelande ljud skapar betydande hinder för flera grupper av personer med funktionsnedsättning, och orsakar till och med friktion för icke-funktionsnedsatta användare i tysta eller delade miljöer.

Skärmläsaranvändare är den mest allvarligt drabbade gruppen. Skärmläsare som JAWS, NVDA och VoiceOver producerar syntetiskt tal för att förmedla sidans innehåll. När en webbsida samtidigt spelar bakgrundsljud eller ett videoljudspår överlappar de två ljudströmmarna. Skärmläsarens röst blir svår eller omöjlig att förstå, vilket i praktiken låser ute användaren från sidan tills hen kan hitta och aktivera en stoppkontroll — vilket hen inte lätt kan göra eftersom skärmläsaren inte kan läsa sidan över oväsendet. Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor globalt någon form av synnedsättning, och en betydande del är beroende av skärmläsare som sitt primära verktyg för att surfa.

Användare med kognitiva funktionsnedsättningar och uppmärksamhetsnedsättningar, inklusive personer med ADHD, autismspektrumtillstånd eller ångestsyndrom, kan uppleva oväntat ljud som extremt desorienterande eller stressande. Den plötsliga starten av musik eller tal kan bryta koncentrationen, utlösa sensorisk överbelastning eller orsaka förvirring kring om ljudet är en del av sidans innehåll eller en extern avisering.

Användare med auditiva bearbetningssvårigheter eller hörapparater kan uppleva återkopplingsslingor eller förstörd distorsion när ljud spelas upp med oväntade volymer genom hörhjälpmedel. Oberoende volymkontroll gör det möjligt för dem att hantera sin lyssningsmiljö utan att justera systemomfattande inställningar som påverkar andra program.

Användare med motoriska funktionsnedsättningar som navigerar med tangentbord eller brytare behöver att stopp-/pauskontrollen är tangentbordsåtkomlig och logiskt placerad tidigt i sidstrukturen. Om kontrollen bara kan klickas med mus eller ligger långt bak i tabbordningen ger den ingen praktisk lättnad under tiden det tar att navigera till den.

Överväg ett konkret scenario: en blind arbetssökande besöker ett företags karriärsida som automatiskt spelar upp en reklamvideo med peppig musik. Användaren startar sin skärmläsare, som omedelbart börjar läsa sidans titel och navigation. Musiken dränker helt talet från skärmläsaren. Stoppknappen är ett stylat <div> utan tangentbordsfokus, visuellt placerad i videospelaren mitt på sidan. Användaren kan inte nå den med tangentbordet, kan inte höra sin skärmläsare tillräckligt väl för att navigera effektivt och överger till slut sidan. Företaget förlorar en kvalificerad kandidat och riskerar rättsliga konsekvenser.

Ur ett användbarhets- och SEO-perspektiv har sidor med automatiskt uppspelande ljud ofta förhöjda avvisningsfrekvenser, eftersom många användare — med eller utan funktionsnedsättning — stänger flikar omedelbart när oväntat ljud börjar. Sökmotorer tolkar höga avvisningsfrekvenser som en negativ kvalitetsignal, vilket indirekt skadar synligheten.

Relaterade Axe-core-regler

WCAG 1.4.2 kräver manuell testning. Ingen automatiserad axe-core-regel motsvarar direkt detta kriterium. Anledningen till att automatiserade verktyg inte kan upptäcka denna överträdelse är grundläggande för hur webbläsare och JavaScript fungerar:

• Dynamisk initiering av ljud: Ljud kan triggas av JavaScript-timers, händelselyssnare eller tredjepartsskript som körs efter den initiala DOM-parsningen. En automatiserad skanner som inspekterar den statiska DOM:en kan inte pålitligt avgöra om ljud kommer att spelas upp automatiskt, hur länge eller om en kontroll är funktionellt kopplad till just den ljudkällan.
• Förekomst och användbarhet hos kontroller: En volymreglage eller pausknapp kan finnas i DOM:en men vara icke-funktionell, dold utanför skärmen eller otillgänglig för tangentbordsanvändare. Automatiserade verktyg kan upptäcka att ett element finns, men kan inte verifiera att aktivering faktiskt stoppar ljudet utan att utföra interaktionen och lyssna efter resultat — en uppgift som kräver mänsklig hörselbedömning.
• Tidsgräns: Att avgöra om ljud spelas i mer än tre sekunder kräver en tidsbaserad utvärdering under sidladdning, vilket ligger utanför ramen för statiska eller till och med runtime-baserade DOM-analysverktyg.
• Tredjepartsinbäddningar: Ljud som bäddas in via iframes, tredjeparts-SDK:er eller annonsnätverk kanske inte kan inspekteras av testverktygets JavaScript-sandbox, vilket gör det omöjligt att upptäcka programmässigt.

På grund av dessa begränsningar måste granskare personligen besöka sidor, lyssna efter automatiskt uppspelande ljud och manuellt verifiera att paus-/stopp-/volymkontroller finns, är tangentbordsåtkomliga och fungerar korrekt.

Hur Man Testar

1. Automatisk förskanning: Kör axe DevTools eller Google Lighthouse på sidan. Även om inget av verktygen direkt kommer att flagga en 1.4.2-överträdelse, kommer de att lyfta relaterade problem som avsaknad av tangentbordsfokus på kontroller, otillgängliga mediaplayerelement eller saknade ARIA-etiketter på anpassade ljudwidgets. Åtgärda dessa innan manuell testning påbörjas så att du inte blandar ihop separata problem.
2. Manuell upptäckt av ljud: Ladda sidan med högtalare eller hörlurar aktiva. Notera om något ljud börjar spelas inom de första sekunderna utan någon användarinteraktion. Om ja, använd en timer för att bekräfta att det spelas i mer än tre sekunder. Kontrollera alla större sidtyper: startsida, landningssidor, produktsidor och alla sidor som är kända för att innehålla mediainbäddningar eller annonsytor.
3. Lokalisera stopp-/paus-/volymkontrollen: Utan att använda mus, tryck på Tabb omedelbart efter att sidan har laddats. Räkna hur många tabb-stopp som inträffar innan du når ljudkontrollen. Verifiera att kontrollen får en synlig fokusindikator. Tryck på Enter eller Mellanslag för att aktivera den och bekräfta att ljudet stoppas eller att dess volym kan justeras oberoende.
4. Skärmläsartest med NVDA och Firefox: Starta NVDA, öppna Firefox och navigera till sidan. Låt ljudet börja. Försök använda NVDAs läskommandon (piltangenter, virtuell markör) för att hitta och aktivera ljudkontrollen. Bekräfta att NVDA tillkännager kontrollens roll och etikett korrekt (t.ex. ”Pausa ljud, knapp”) och att aktivering tystar det konkurrerande ljudet.
5. Skärmläsartest med VoiceOver och Safari (macOS/iOS): Aktivera VoiceOver med Kommando + F5. Navigera till sidan och svep eller använd piltangenter för att hitta ljudkontrollen. Verifiera att VoiceOver läser upp en meningsfull etikett och att kontrollen fungerar som förväntat. På iOS bör du också testa med auto-play-beteende eftersom mobila webbläsare hanterar ljudbehörigheter annorlunda.
6. Skärmläsartest med JAWS och Chrome: Med JAWS aktivt, ladda sidan i Chrome. Använd tabb-tangenten och JAWS lista över formulärkontroller (Insert + F5) för att hitta interaktiva element. Bekräfta att ljudkontrollen visas i listan och är användbar.
7. Kontroll av tredjepartsinnehåll: Om sidan innehåller inbäddade videor från sociala medier, annonsenheter eller iframe-innehåll, ladda dessa separat där det är möjligt och verifiera att de också följer kraven, eller att värdsidan tillhandahåller en överordnad kontroll.
8. Kontroll av volymoberoende: Om sidan erbjuder en volymkontroll i stället för en paus-/stoppkontroll, verifiera att justering av sidans volymkontroll inte ändrar operativsystemets huvudvolym. Öppna ett annat program (t.ex. en lokal mediaplayer) och bekräfta att dess volym är oförändrad efter att du använt sidans kontroll.

Hur Man Åtgärdar

Automatiskt uppspelande bakgrundsljud utan kontroller — Felaktigt

<!-- Audio starts automatically with no visible or keyboard-accessible control -->
<audio src='background-music.mp3' autoplay loop></audio>

Automatiskt uppspelande bakgrundsljud med tillgänglig pausknapp — Korrekt

<!-- Control is the first focusable element, announced properly by screen readers -->
<button id='audio-toggle' aria-label='Pause background music' aria-pressed='true' onclick='toggleAudio()'>
  Pause Music
</button>

<audio id='bg-audio' src='background-music.mp3' autoplay loop></audio>

<script>
  function toggleAudio() {
    var audio = document.getElementById('bg-audio');
    var btn = document.getElementById('audio-toggle');
    if (audio.paused) {
      audio.play();
      btn.setAttribute('aria-pressed', 'true');
      btn.setAttribute('aria-label', 'Pause background music');
      btn.textContent = 'Pause Music';
    } else {
      audio.pause();
      btn.setAttribute('aria-pressed', 'false');
      btn.setAttribute('aria-label', 'Play background music');
      btn.textContent = 'Play Music';
    }
  }
</script>

<!-- The native <button> element is keyboard-accessible by default.
     aria-pressed communicates toggle state to screen readers.
     aria-label updates dynamically to reflect current action. -->

Automatiskt uppspelande video med ljudspår och ingen tangentbordsåtkomlig stoppkontroll — Felaktigt

<!-- The video autoplays with sound; the only stop control is a mouse-only overlay -->
<div class='hero-video-wrapper'>
  <video src='promo.mp4' autoplay loop></video>
  <div class='stop-btn' onclick='stopVideo()'>Stop</div>
</div>
<!-- Problem: <div> is not keyboard-focusable and has no role or label -->

Automatiskt uppspelande video med tillgänglig stoppkontroll — Korrekt

<div class='hero-video-wrapper'>
  <!-- Stop control appears first in DOM and focus order -->
  <button
    id='video-stop-btn'
    aria-label='Stop promotional video'
    onclick='stopVideo()'
  >
    Stop Video
  </button>

  <video id='promo-video' src='promo.mp4' autoplay loop muted='false'></video>
</div>

<script>
  function stopVideo() {
    var video = document.getElementById('promo-video');
    var btn = document.getElementById('video-stop-btn');
    video.pause();
    video.currentTime = 0;
    btn.disabled = true;
    btn.textContent = 'Video Stopped';
  }
</script>

<!-- Using a native <button> ensures keyboard access without additional ARIA.
     Placing the button before the video in DOM order puts it early in tab sequence. -->

Inbäddad tredjeparts ljudwidget med oberoende volymkontroll — Korrekt

<!-- When a third-party widget auto-plays, provide a host-level mute control -->
<button
  id='mute-widget-audio'
  aria-label='Mute podcast player'
  aria-pressed='false'
  onclick='muteWidget()'
>
  Mute Podcast
</button>

<iframe
  id='podcast-frame'
  src='https://embed.example.com/podcast/ep42?autoplay=1'
  title='Episode 42: Web Accessibility Deep Dive'
  allow='autoplay'
></iframe>

<script>
  function muteWidget() {
    <!-- postMessage API used to communicate with cross-origin iframe player -->
    var frame = document.getElementById('podcast-frame');
    var btn = document.getElementById('mute-widget-audio');
    var isMuted = btn.getAttribute('aria-pressed') === 'true';
    frame.contentWindow.postMessage({ action: isMuted ? 'unmute' : 'mute' }, 'https://embed.example.com');
    btn.setAttribute('aria-pressed', String(!isMuted));
    btn.setAttribute('aria-label', isMuted ? 'Mute podcast player' : 'Unmute podcast player');
  }
</script>

<!-- Note: host-level volume/mute control satisfies 1.4.2 when
     the iframe player's own controls may be inaccessible. -->

Vanliga Misstag

• Att använda ett <div> eller <span> som ljudstoppknapp utan att lägga till tabindex='0', ett role='button' och tangentbordshändelsehanterare. Sådana element är osynliga för tangentbordsnavigering och skärmläsare, vilket gör kontrollen oanvändbar för de användare som behöver den mest.
• Att placera ljudkontrollen efter huvudinnehållet i DOM:en, så att tangentbordsanvändare måste tabba genom dussintals länkar och formulärfält innan de når den — vid det laget har ljudet spelats i en minut eller mer. Kontrollen bör vara det första eller andra fokuserbara elementet på sidan.
• Att stänga av ljudet med HTML-attributet muted som standard och betrakta det som efterlevnad. Ett avstängt automatiskt uppspelande ljudelement är inte en användarstyrd kontroll; användaren har inget sätt att veta att ljud finns eller att välja sin egen volympreferens.
• Att tillhandahålla ett volymreglage som anropar window.AudioContext.destination.gain och ändrar systemets ljudnivåer, i stället för att bara justera det specifika mediaelementets .volume-egenskap. Detta uppfyller inte kravet på oberoende.
• Att anta att mobila webbläsare blockerar auto-play och därför att ingen kontroll behövs. Många mobila webbläsare tillåter auto-play när ljudet är inbäddat i ett videoelement eller när användaren har interagerat med domänen tidigare. Implementera alltid kontroller oavsett antaget webbläsarbeteende.
• Att inte uppdatera knappens tillgängliga etikett när dess tillstånd ändras. En knapp märkt ”Pausa” som nu återupptar ljud bör uppdatera sitt aria-label till ”Spela upp” — annars hör skärmläsaranvändare en felaktig tillkännagivelse och kan aktivera fel åtgärd.
• Att enbart förlita sig på webbläsarens inbyggda mediakontroller (attributet controls) utan att verifiera att de visas innan automatiskt uppspelat ljud blir påträngande. Inbyggda kontroller renderas under mediaelementet, vilket kan ligga under vikningen, och gör dem otillgängliga via tangentbord innan betydande störning uppstår.
• Att inte testa med ljudspelande annonser som levereras via annonsnätverk. Annonsytor som injiceras dynamiskt efter sidladdning är en del av sidupplevelsen och omfattas av 1.4.2. Om annonsnätverket inte kan garantera efterlevnad, tillhandahåll en global ljudavstängningskontroll för sidan.
• Att behandla tresekundersundantaget som en kryphål genom att dela upp ett kontinuerligt ljudspår i segment under tre sekunder vardera. WCAG:s avsikt är tydlig: ljud som spelas kontinuerligt eller loopas omfattas av kriteriet oavsett hur det tekniskt delas upp.
• Att inte tillhandahålla en synlig fokusindikator på ljudkontrollen. Även om kontrollen är tangentbordsåtkomlig kan seende tangentbordsanvändare inte hitta den om det inte finns någon fokusmarkering, vilket strider både mot detta kriteriums användbarhetsavsikt och WCAG 2.4.7 (Synligt fokus).

Relation till Turkiets Tillgänglighetsföreskrifter

Turkiets presidentcirkulär 2025/10, publicerat i Officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska krav på webbtillgänglighet i linje med WCAG 2.2 för ett brett spektrum av offentliga och privata aktörer som är verksamma i Turkiet. WCAG 1.4.2 — Ljudkontroll är ett kriterium på nivå A, vilket placerar det i den mest grundläggande nivån av krav. Bristande överensstämmelse med kriterier på nivå A utgör ett grundläggande misslyckande enligt cirkuläret.

Cirkuläret föreskriver tidslinjer för efterlevnad enligt följande: offentliga institutioner måste uppnå full överensstämmelse med nivå A inom ett år från cirkulärets publiceringsdatum, medan privata aktörer som omfattas av regleringen har två år på sig att uppfylla kraven.

Följande typer av aktörer omfattas uttryckligen av presidentcirkuläret och måste därför uppfylla WCAG 1.4.2:

• Offentliga institutioner och myndigheter på alla nivåer, inklusive ministerier, kommuner och statligt anslutna organ vars digitala tjänster används av allmänheten.
• E-handelsplattformar som är verksamma i Turkiet, inklusive marknadsplatsoperatörer och direkt-till-konsument-nätbutiker.
• Banker och finansiella institutioner som regleras enligt turkisk banklagstiftning, inklusive deras internetbankportaler, mobila webbgränssnitt och digitala produktsidor.
• Sjukhus och vårdgivare, inklusive privata sjukhusgrupper och offentliga hälsoplattformar där patienter bokar tider, får tillgång till journaler eller tar del av hälsoinformation.
• Telekomföretag med 200,000 eller fler abonnenter, vars kundinriktade webbplatser, självbetjäningsportaler och kampanjsidor måste följa kraven.
• Resebyråer och online-reseplattformar som betjänar konsumenter i Turkiet, inklusive bokningsmotorer och destinationsinnehållssidor.
• Privata transportföretag som tillhandahåller biljett- och passagerarinformationstjänster online.
• Privata skolor auktoriserade av Ministry of National Education (MoNE), inklusive deras antagningsportaler, lärplattformar och informationswebbplatser.

För alla dessa aktörer innebär en sida som automatiskt spelar upp ljud — vare sig det är en reklamvideo på en banks startsida, ett bakgrundsljudspår på en e-handelsproduktsida eller ett inbäddat nyhetsklipp på en myndighetsportal — utan att tillhandahålla en tillgänglig, tangentbordsåtkomlig paus- eller volymkontroll en direkt överträdelse av både WCAG 1.4.2 och de skyldigheter som följer av presidentcirkulär 2025/10. Aktörer som omfattas uppmanas starkt att granska alla sidmallar för automatiskt uppspelande media och implementera efterlevnadskontroller i god tid före sin tillämpliga tidsfrist för att undvika tillsynsanmärkningar och för att betjäna alla användare på ett likvärdigt sätt.