WCAG 1.4.2: Kontrola dźwięku

Co Oznacza Ta Zasada

WCAG 1.4.2 — Kontrola dźwięku to kryterium sukcesu na poziomie A w ramach zasady Postrzegalność. Stanowi ono: Jeśli jakikolwiek dźwięk na stronie internetowej odtwarza się automatycznie przez więcej niż 3 sekundy, dostępny jest mechanizm umożliwiający wstrzymanie lub zatrzymanie dźwięku albo mechanizm umożliwiający kontrolowanie głośności dźwięku niezależnie od ogólnego poziomu głośności systemu.

Kryterium jest uruchamiane przez każdą treść audio, która zaczyna się odtwarzać bez wyraźnego działania użytkownika i trwa dłużej niż trzy sekundy. Obejmuje to muzykę w tle osadzoną na stronie, automatycznie odtwarzane wideo ze słyszalną ścieżką dźwiękową, reklamy audio, zapętlone efekty dźwiękowe oraz wprowadzenia głosowe uruchamiane przy ładowaniu strony. Kluczowe jest słowo automatycznie — dźwięk, który użytkownik uruchamia celowo (klikając przycisk odtwarzania, aktywując link), nie podlega tej zasadzie.

Aby spełnić to kryterium, co najmniej jeden z poniższych warunków musi być spełniony:

• Użytkownik ma do dyspozycji kontrolkę pauzy lub zatrzymania, która całkowicie zatrzymuje dźwięk lub wstrzymuje go do momentu, gdy użytkownik wznowi odtwarzanie.
• Użytkownik ma do dyspozycji kontrolkę głośności, która jest niezależna od głównej głośności systemu operacyjnego, tak aby mógł ściszyć lub wyciszyć dźwięk bez wpływu na inne aplikacje lub dźwięki systemowe.

Mechanizm, który pojawia się tylko na górze strony i jest dostępny z klawiatury, jest akceptowalny, ale musi być osiągalny i obsługiwalny zanim dźwięk stanie się uciążliwy. Dobrą praktyką jest umieszczenie kontrolki jako pierwszego interaktywnego elementu w kolejności fokusu, aby użytkownicy klawiatury i czytników ekranu natychmiast ją napotkali.

Jedyny oficjalny wyjątek zdefiniowany w WCAG dotyczy dźwięku trwającego trzy sekundy lub mniej. Krótkie dźwięki powiadomień lub krótkie dzwonki, które same się zatrzymują, są zwolnione. Nie ma wyjątku dla dźwięku o niskiej głośności, zapętlonego dźwięku ani dźwięku osadzonego w widżetach zewnętrznych — wszystkie one podlegają zasadzie, jeśli odtwarzają się automatycznie i trwają dłużej niż trzy sekundy.

Dlaczego To Ma Znaczenie

Nie kontrolowany automatycznie odtwarzany dźwięk tworzy istotne bariery dla wielu grup osób z niepełnosprawnościami, a nawet powoduje frustrację u użytkowników bez niepełnosprawności w cichym lub współdzielonym otoczeniu.

Użytkownicy czytników ekranu są grupą najbardziej dotkniętą. Czytniki ekranu, takie jak JAWS, NVDA i VoiceOver, generują syntetyczną mowę, aby przekazać treść strony. Gdy strona internetowa jednocześnie odtwarza dźwięk w tle lub ścieżkę dźwiękową wideo, dwa strumienie audio nakładają się na siebie. Głos czytnika ekranu staje się trudny lub niemożliwy do zrozumienia, co w praktyce uniemożliwia użytkownikowi korzystanie ze strony, dopóki nie zlokalizuje i nie aktywuje kontrolki zatrzymania — której nie może łatwo znaleźć, ponieważ czytnik ekranu nie jest w stanie odczytać strony ponad hałasem. Według Światowej Organizacji Zdrowia około 2,2 miliarda osób na świecie ma jakąś formę zaburzenia widzenia, a znacząca część z nich polega na czytnikach ekranu jako głównym narzędziu przeglądania.

Użytkownicy z niepełnosprawnościami poznawczymi i uwagi, w tym osoby z ADHD, ze spektrum autyzmu lub zaburzeniami lękowymi, mogą uznać nieoczekiwany dźwięk za wyjątkowo dezorientujący lub stresujący. Nagłe pojawienie się muzyki lub mowy może przerwać koncentrację, wywołać przeciążenie sensoryczne lub spowodować dezorientację co do tego, czy dźwięk jest częścią treści strony, czy zewnętrznym powiadomieniem.

Użytkownicy z zaburzeniami przetwarzania słuchowego lub korzystający z aparatów słuchowych mogą doświadczać sprzężeń zwrotnych lub wzmocnionych zniekształceń, gdy dźwięk odtwarza się w nieoczekiwanej głośności przez urządzenia słuchowe. Niezależna kontrola głośności pozwala im zarządzać swoim środowiskiem odsłuchu bez zmiany ustawień systemowych wpływających na inne aplikacje.

Użytkownicy z niepełnosprawnością ruchową, którzy nawigują za pomocą klawiatury lub przełączników, potrzebują, aby kontrolka stop/pauza była osiągalna z klawiatury i logicznie umieszczona wcześnie w strukturze strony. Jeśli kontrolka jest dostępna tylko myszą lub ukryta daleko w kolejności tabulacji, nie zapewnia praktycznej ulgi w czasie potrzebnym na dotarcie do niej.

Rozważmy konkretny scenariusz: niewidomy kandydat do pracy odwiedza stronę kariery firmy, na której automatycznie odtwarza się film promocyjny z dynamiczną muzyką. Użytkownik uruchamia czytnik ekranu, który natychmiast zaczyna odczytywać tytuł strony i nawigację. Muzyka całkowicie zagłusza syntezę mowy. Przycisk stop jest ostylowanym elementem <div> bez fokusu klawiatury, umieszczonym wizualnie w odtwarzaczu wideo w środku strony. Użytkownik nie może do niego dotrzeć za pomocą klawiatury, nie słyszy wystarczająco dobrze czytnika ekranu, aby efektywnie nawigować, i ostatecznie porzuca stronę. Firma traci wykwalifikowanego kandydata i naraża się na potencjalne ryzyko prawne.

Z perspektywy użyteczności i SEO strony z automatycznie odtwarzanym dźwiękiem często notują podwyższony współczynnik odrzuceń, ponieważ wielu użytkowników — zarówno z niepełnosprawnościami, jak i bez — natychmiast zamyka karty, gdy zaczyna się nieoczekiwany dźwięk. Wyszukiwarki interpretują wysoki współczynnik odrzuceń jako negatywny sygnał jakości, co pośrednio szkodzi widoczności.

Powiązane Zasady Axe-core

WCAG 1.4.2 wymaga ręcznego testowania. Żadna zautomatyzowana zasada axe-core nie mapuje się bezpośrednio na to kryterium. Powód, dla którego narzędzia automatyczne nie mogą wykryć tego naruszenia, wynika z fundamentalnych zasad działania przeglądarek i JavaScript:

• Dynamiczne inicjowanie dźwięku: Dźwięk może być uruchamiany przez timery JavaScript, nasłuchiwacze zdarzeń lub skrypty stron trzecich, które wykonują się po początkowym przetworzeniu DOM. Zautomatyzowany skaner, który analizuje statyczny DOM, nie może wiarygodnie określić, czy dźwięk będzie odtwarzany automatycznie, jak długo ani czy kontrolka jest funkcjonalnie powiązana z konkretnym źródłem dźwięku.
• Obecność i operacyjność kontrolek: Suwak głośności lub przycisk pauzy może istnieć w DOM, ale być niefunkcjonalny, ukryty poza ekranem lub niedostępny dla użytkowników klawiatury. Narzędzia automatyczne mogą wykryć obecność elementu, ale nie mogą zweryfikować, że jego aktywacja faktycznie zatrzymuje dźwięk bez wykonania interakcji i „wysłuchania” rezultatu — zadania wymagającego ludzkiej oceny słuchowej.
• Próg czasowy: Ustalenie, czy dźwięk odtwarza się dłużej niż trzy sekundy, wymaga oceny opartej na czasie podczas ładowania strony, co wykracza poza zakres narzędzi analizujących DOM statycznie lub nawet w czasie wykonywania.
• Osadzenia stron trzecich: Dźwięk osadzony za pomocą iframe, zewnętrznych SDK lub sieci reklamowych może być niedostępny dla piaskownicy JavaScript narzędzia testowego, co czyni programistyczne wykrycie niemożliwym.

Z powodu tych ograniczeń audytorzy muszą osobiście odwiedzać strony, nasłuchiwać automatycznie odtwarzanego dźwięku oraz ręcznie weryfikować, czy kontrolki pauzy/stop/głośności istnieją, są osiągalne z klawiatury i działają poprawnie.

Jak Testować

1. Automatyczny wstępny skan: Uruchom axe DevTools lub Google Lighthouse na stronie. Choć żadne z tych narzędzi nie zgłosi bezpośrednio naruszenia 1.4.2, wskażą one powiązane problemy, takie jak brak fokusu klawiatury na kontrolkach, niedostępne elementy odtwarzacza multimediów czy brak etykiet ARIA w niestandardowych widżetach audio. Rozwiąż je przed rozpoczęciem testów ręcznych, aby nie mieszać odrębnych problemów.
2. Ręczne wykrywanie dźwięku: Załaduj stronę z włączonymi głośnikami lub słuchawkami. Zwróć uwagę, czy w ciągu pierwszych kilku sekund bez jakiejkolwiek interakcji użytkownika zaczyna odtwarzać się dźwięk. Jeśli tak, użyj stopera, aby potwierdzić, że trwa dłużej niż trzy sekundy. Sprawdź wszystkie główne typy stron: stronę główną, strony docelowe, strony produktów oraz każdą stronę, o której wiadomo, że zawiera osadzone media lub sloty reklamowe.
3. Zlokalizuj kontrolkę stop/pauza/głośność: Bez użycia myszy naciśnij Tab natychmiast po załadowaniu strony. Policz, ile zatrzymań fokusu występuje, zanim dotrzesz do kontrolki audio. Zweryfikuj, że kontrolka otrzymuje widoczny wskaźnik fokusu. Naciśnij Enter lub Spacja, aby ją aktywować i potwierdzić, że dźwięk się zatrzymuje lub że jego głośność może być niezależnie regulowana.
4. Test z czytnikiem ekranu NVDA i Firefox: Uruchom NVDA, otwórz Firefox i przejdź na stronę. Pozwól, aby dźwięk się rozpoczął. Spróbuj użyć poleceń odczytu NVDA (klawisze strzałek, kursor wirtualny), aby zlokalizować i aktywować kontrolkę audio. Potwierdź, że NVDA poprawnie ogłasza rolę i etykietę kontrolki (np. „Pause audio, button”) oraz że jej aktywacja wycisza konkurujący dźwięk.
5. Test z czytnikiem ekranu VoiceOver i Safari (macOS/iOS): Włącz VoiceOver za pomocą Command + F5. Przejdź na stronę i przesuwaj palcem lub używaj klawiszy strzałek, aby znaleźć kontrolkę audio. Zweryfikuj, że VoiceOver odczytuje znaczącą etykietę i że kontrolka działa zgodnie z oczekiwaniami. Na iOS przetestuj również zachowanie auto-play, ponieważ przeglądarki mobilne inaczej obsługują uprawnienia audio.
6. Test z czytnikiem ekranu JAWS i Chrome: Z włączonym JAWS załaduj stronę w Chrome. Użyj klawisza Tab i listy kontrolek formularzy JAWS (Insert + F5), aby zlokalizować elementy interaktywne. Potwierdź, że kontrolka audio pojawia się na liście i jest operacyjna.
7. Kontrola treści stron trzecich: Jeśli strona zawiera osadzone filmy z mediów społecznościowych, jednostki reklamowe lub treści w iframe, załaduj je niezależnie, jeśli to możliwe, i zweryfikuj, że również są zgodne lub że strona nadrzędna zapewnia kontrolkę nadrzędną.
8. Kontrola niezależności głośności: Jeśli strona oferuje kontrolkę głośności zamiast kontrolki pauzy/stop, zweryfikuj, że regulacja głośności na stronie nie zmienia głównej głośności systemu operacyjnego. Otwórz inną aplikację (np. lokalny odtwarzacz multimediów) i potwierdź, że jej głośność pozostaje niezmieniona po użyciu kontrolki na stronie.

Jak Naprawić

Automatycznie odtwarzany dźwięk w tle bez kontrolek — Nieprawidłowe

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

Automatycznie odtwarzany dźwięk w tle z dostępną kontrolką pauzy — Prawidłowe

<!-- 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. -->

Automatycznie odtwarzane wideo ze ścieżką dźwiękową i bez kontrolki stop dostępnej z klawiatury — Nieprawidłowe

<!-- 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 -->

Automatycznie odtwarzane wideo z dostępną kontrolką stop — Prawidłowe

<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. -->

Osadzony zewnętrzny widżet audio z niezależną kontrolą głośności — Prawidłowe

<!-- 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. -->

Typowe Błędy

• Używanie elementu <div> lub <span> jako przycisku zatrzymania dźwięku bez dodania tabindex='0', role='button' i obsługi zdarzeń klawiatury. Takie elementy są niewidoczne dla nawigacji klawiaturą i czytników ekranu, co czyni kontrolkę bezużyteczną dla użytkowników, którzy najbardziej jej potrzebują.
• Umieszczanie kontrolki audio po głównej treści w DOM, tak że użytkownicy klawiatury muszą przejść tabulatorem przez dziesiątki linków i pól formularzy, zanim do niej dotrą — w tym czasie dźwięk może odtwarzać się już minutę lub dłużej. Kontrolka powinna być pierwszym lub drugim elementem z fokusem na stronie.
• Domyślne wyciszanie dźwięku za pomocą atrybutu HTML muted i traktowanie tego jako zgodności. Wyciszony automatycznie odtwarzany element audio nie jest kontrolką obsługiwaną przez użytkownika; użytkownik nie ma sposobu, aby wiedzieć, że dźwięk istnieje, ani aby wybrać własne preferencje głośności.
• Udostępnianie suwaka głośności, który wywołuje window.AudioContext.destination.gain i zmienia poziomy dźwięku systemowego, zamiast regulować tylko właściwość .volume konkretnego elementu multimedialnego. To narusza wymóg niezależności.
• Zakładanie, że przeglądarki mobilne blokują auto-play i dlatego kontrolka nie jest potrzebna. Wiele przeglądarek mobilnych zezwala na auto-play, gdy dźwięk jest osadzony w elemencie wideo lub gdy użytkownik wcześniej wchodził w interakcję z daną domeną. Zawsze implementuj kontrolki niezależnie od zakładanego zachowania przeglądarki.
• Brak aktualizacji dostępnej etykiety przycisku po zmianie jego stanu. Przycisk oznaczony jako „Pause”, który teraz wznawia dźwięk, powinien zaktualizować swoje aria-label na „Play” — w przeciwnym razie użytkownicy czytników ekranu słyszą nieprawidłowy komunikat i mogą wywołać niewłaściwą akcję.
• Poleganie wyłącznie na natywnych kontrolkach multimediów przeglądarki (atrybut controls) bez weryfikacji, że pojawiają się one zanim automatycznie odtwarzany dźwięk stanie się uciążliwy. Natywne kontrolki renderują się poniżej elementu multimedialnego, który może znajdować się poniżej linii przewijania, co czyni je nieosiągalnymi z klawiatury, zanim nastąpi istotne zakłócenie.
• Brak testowania reklam audio odtwarzanych za pośrednictwem sieci reklamowych. Sloty reklamowe wstrzykiwane dynamicznie po załadowaniu strony są częścią doświadczenia strony i podlegają 1.4.2. Jeśli sieć reklamowa nie może zagwarantować zgodności, zapewnij globalną kontrolkę wyciszenia dla strony.
• Traktowanie trzysekundowego wyjątku jako luki, dzieląc ciągłą ścieżkę dźwiękową na segmenty krótsze niż trzy sekundy. Intencja WCAG jest jasna: dźwięk, który odtwarza się ciągle lub w pętli, podlega kryterium niezależnie od tego, jak jest technicznie podzielony.
• Brak widocznego wskaźnika fokusu na kontrolce audio. Nawet jeśli kontrolka jest osiągalna z klawiatury, widzący użytkownicy klawiatury nie mogą jej znaleźć, jeśli nie ma obramowania fokusu, co narusza zarówno intencję użyteczności tego kryterium, jak i WCAG 2.4.7 (Widoczny fokus).

Związek z Przepisami Dostępności w Turcji

Turecka Okrężnica Prezydencka 2025/10, opublikowana w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe wymagania dostępności stron internetowych zgodne z WCAG 2.2 dla szerokiego zakresu podmiotów publicznych i prywatnych działających w Turcji. WCAG 1.4.2 — Kontrola dźwięku jest kryterium poziomu A, co plasuje je w najbardziej podstawowej warstwie wymagań. Brak zgodności z kryteriami poziomu A stanowi podstawową porażkę w świetle Okrężnicy.

Okrężnica określa następujące terminy osiągnięcia zgodności: instytucje publiczne muszą osiągnąć pełną zgodność z poziomem A w ciągu jednego roku od daty publikacji Okrężnicy, podczas gdy podmioty sektora prywatnego objęte regulacją mają na to dwa lata.

Następujące typy podmiotów są wyraźnie objęte Okrężnicą Prezydencką i w związku z tym są zobowiązane do spełnienia WCAG 1.4.2:

• Instytucje publiczne i organy rządowe na wszystkich poziomach, w tym ministerstwa, gminy i agencje powiązane z państwem, których usługi cyfrowe są dostępne dla społeczeństwa.
• Platformy e-commerce działające w Turcji, w tym operatorzy marketplace i sprzedawcy internetowi kierujący ofertę bezpośrednio do konsumenta.
• Banki i instytucje finansowe regulowane przez tureckie prawo bankowe, w tym ich portale bankowości internetowej, mobilne interfejsy webowe i strony produktów cyfrowych.
• Szpitale i świadczeniodawcy opieki zdrowotnej, w tym prywatne grupy szpitalne i publiczne portale zdrowotne, na których pacjenci umawiają wizyty, uzyskują dostęp do dokumentacji lub otrzymują informacje zdrowotne.
• Firmy telekomunikacyjne z 200,000 lub większą liczbą abonentów, których strony internetowe skierowane do klientów, portale samoobsługowe i strony promocyjne muszą być zgodne.
• Biura podróży i internetowe platformy turystyczne obsługujące konsumentów w Turcji, w tym silniki rezerwacyjne i strony z treściami o destynacjach.
• Prywatne firmy transportowe świadczące usługi sprzedaży biletów i informacji pasażerskiej online.
• Prywatne szkoły autoryzowane przez Ministerstwo Edukacji Narodowej (MoNE), w tym ich portale rekrutacyjne, systemy zarządzania nauczaniem i strony informacyjne.

Dla wszystkich tych podmiotów strona, która automatycznie odtwarza dźwięk — czy to film promocyjny na stronie głównej banku, ścieżka dźwiękowa w tle na stronie produktu e-commerce, czy osadzony materiał informacyjny na portalu rządowym — bez zapewnienia dostępnej, osiągalnej z klawiatury kontrolki pauzy lub głośności, stanowi bezpośrednie naruszenie zarówno WCAG 1.4.2, jak i obowiązków nałożonych przez Okrężnicę Prezydencką 2025/10. Podmioty objęte regulacją są zdecydowanie zachęcane do przeprowadzenia audytu wszystkich szablonów stron pod kątem automatycznie odtwarzanych mediów i wdrożenia zgodnych kontrolek z odpowiednim wyprzedzeniem przed upływem obowiązującego je terminu, aby uniknąć ustaleń regulacyjnych i zapewnić równe traktowanie wszystkich użytkowników.