Wróć do wszystkich kryteriów

1.4.2 Kontrola dźwięku (ang.) Audio Control

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Multimedia

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym celem tego kryterium jest umożliwienie użytkownikom korzystającym z technologii asystujących (np. czytników ekranu) odseparowanie dźwięku generowanego przez stronę od mowy syntezatora. Gdy audio uruchamia się automatycznie i trwa dłużej niż 3 sekundy, nakłada się ono na głos lektora, co często uniemożliwia osobie niewidomej odnalezienie przycisku „pauza” lub zrozumienie treści strony. Kryterium to gwarantuje, że użytkownik zawsze ma kontrolę nad środowiskiem dźwiękowym i nie jest zmuszany do słuchania audio przez więcej niż 3 sekundy bez możliwości reakcji.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#audio-control

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#kontrola-odtwarzania-dzwieku

    Słownik pojęć

    Automatyczne odtwarzanie
    –

    rozpoczęcie emisji dźwięku przez witrynę natychmiast po jej załadowaniu, bez konieczności kliknięcia w przycisk (ang.) „Play” przez odbiorcę.

    Mechanizm kontroli głośności
    –

    funkcja na stronie internetowej, która pozwala zmienić poziom natężenia dźwięku bez wpływania na ustawienia głośności całego systemu operacyjnego..

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkowników czytników ekranu: Automatyczne audio nakłada się na mowę syntezatora, czyniąc ją całkowicie niezrozumiałą. Tworzy to tzw. „pułapkę dźwiękową”, w której hałas uniemożliwia usłyszenie instrukcji niezbędnych do odnalezienia przycisku pauzy.
    • Osoby z problemami neurologicznymi: Nieoczekiwane bodźce dźwiękowe mogą stanowić bezpośredni wyzwalacz ((ang.) trigger) dla gwałtownych i niepożądanych reakcji organizmu.
    • Osoby z zaburzeniami poznawczymi (np. ADHD, autyzm): Nagły, niekontrolowany dźwięk powoduje drastyczną dekoncentrację oraz silne przeciążenie sensoryczne. Może to wywoływać lęk lub panikę, uniemożliwiając dalszą pracę z treścią strony.
    • Osoby słabosłyszące i korzystające z aparatów słuchowych: Dwa źródła dźwięku uniemożliwiają im odseparowanie mowy od szumu tła. Niezależna kontrola głośności pozwala zachować czystość sygnału z jednego, wybranego źródła.
    • Osoby w środowiskach publicznych i ograniczeniach sytuacyjnych: Samoczynne odtwarzanie dźwięku bywa krępujące lub nieodpowiednie w miejscach takich jak biura czy biblioteki. Brak łatwej kontroli zmusza użytkownika do natychmiastowego zamknięcia witryny.

    Zasady wdrażania i wymagania techniczne

    Jeśli audio na stronie odtwarza się automatycznie przez więcej niż 3 sekundy, musisz zapewnić jedno z poniższych rozwiązań:

    • Mechanizm zatrzymania: Przycisk umożliwiający całkowite wyłączenie lub wstrzymanie (pauzę) dźwięku.
    • Niezależna regulacja głośności: Mechanizm pozwalający ściszyć dźwięki strony bez wpływania na ogólną głośność systemu operacyjnego (co pozwala zachować słyszalność czytnika ekranu).
    • Pełna dostępność klawiaturowa: Kontrolki muszą być obsługiwane klawiszami Tab, Enter oraz Spacja.
    • Widoczność od startu: Mechanizm kontroli musi być dostępny natychmiast po załadowaniu strony, bez konieczności wykonywania dodatkowych akcji (np. najechania myszką).
    • Etykiety tekstowe: Przyciski sterujące muszą posiadać atrybuty aria-label, aby użytkownik czytnika ekranu wiedział, do czego służą (np. „Wycisz muzykę w tle”).

    Wyjątki i sytuacje szczególne

    • Zasada 3 sekund: Krótkie sygnały (np. dźwięk powiadomienia o nowej wiadomości) trwające poniżej 3 sekund nie podlegają temu kryterium.
    • Inicjatywa użytkownika: Jeśli odtwarzanie zostało uruchomione celowym kliknięciem użytkownika w przycisk (ang.) „Play” , wymóg posiadania niezależnej kontroli głośności nie jest restrykcyjny (choć nadal zalecany).

    Przykłady implementacji

    Najczęstsze błędy

    • F23: Brak możliwości wstrzymania dźwięku, który gra automatycznie dłużej niż 3 sekundy.
    • F93: Brak opcji pauzy lub zatrzymania dla elementów multimedialnych HTML5 (<video> lub <audio>) uruchamianych automatycznie.
    • Błąd niezależnej głośności: Poleganie wyłącznie na regulacji głośności systemu operacyjnego użytkownika zamiast zapewnienia suwaka na stronie.
    • Ukryte kontrolki: Umieszczenie przycisku pauzy w menu dostępnym tylko po najechaniu myszką (:hover), co blokuje dostęp użytkownikom klawiatury.
    • Brak etykiet ARIA: Stosowanie wyłącznie ikon graficznych bez tekstowego opisu funkcji przycisku sterującego.

    Najlepsze praktyki

    • Zastosuj zasadę (ang.) „Click-to-Play„: Najlepszym rozwiązaniem jest całkowita rezygnacja z autoodtwarzania. Pozwól użytkownikowi samemu zdecydować, kiedy chce usłyszeć dźwięk.
    • Globalny wyciszacz: Umieść przycisk „Wycisz wszystko” w nagłówku strony, aby był on jednym z pierwszych elementów napotykanych przez użytkownika.
    • Standardowe kontrolki: Używaj natywnego atrybutu controls w elementach HTML5, ponieważ przeglądarki zapewniają dla nich wysoki standard dostępności.
    • Wyraźny fokus: Pamiętaj, aby przycisk pauzy miał bardzo wyraźną obwódkę podczas nawigacji klawiaturą.

    Metody testowania

    • Testowanie manualne: Otwórz stronę i sprawdź, czy dźwięk startuje samoczynnie. Jeśli gra dłużej niż 3 sekundy, spróbuj go zatrzymać, używając wyłącznie klawiatury.
    • NVDA: Uruchom czytnik przed wejściem na stronę. Zweryfikuj, czy dźwięk ze strony nie zagłusza głosu lektora oraz czy przyciski sterujące audio są poprawnie anonsowane.
    • Narzędzie deweloperskie (ang.) Developer Tools:
      • Otwórz Inspektora (F12) i wyszukaj w kodzie elementy <audio> lub <video>.
      • Sprawdź, czy posiadają atrybut autoplay.
      • Jeśli autoplay występuje, zweryfikuj czy element posiada atrybut controls lub czy w kodzie znajduje się inny element (przycisk) powiązany skryptem, który umożliwia zatrzymanie mediów (weryfikacja pod kątem błędu F93).
    • (ang.) IBM Equal Access Toolkit: Skorzystaj z tego narzędzia, aby przeskanować strukturę DOM pod kątem mediów, które nie spełniają wymagań dotyczących pauzy lub głośności.
    • (ang.) WAVE Evaluation Tool: Użyj rozszerzenia, aby sprawdzić obecność i poprawność etykiet aria-label przy przyciskach sterujących audio.

    Sprawdź swoją wiedzę

    Poniżej znajduje się 5 przykładów zachowania dźwięku na stronie. Twoim zadaniem jest ocena, czy spełniają one wymogi WCAG 1.4.2.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Uwaga: Przykłady są symulowane wizualnie („Gra muzyka”), aby nie hałasować podczas nauki.
    Proponowane narzędzia: Słuch, Klawiatura, Narzędzie deweloperskie (ang.) Developer Tools, NVDA, (ang.) IBM Equal Access Toolkit, (ang.) WAVE Evaluation Tool

    Link: https://pdc.ambiscale.com/training/wcag-1-4-2/

    #1 BŁĄD

    Problem: Dźwięk gra automatycznie w pętli i nie ma przycisku, by go zatrzymać.
    Dlaczego: Użytkownik czytnika ekranu nie będzie słyszał syntezatora mowy przez hałas w tle. Nie ma jak tego wyłączyć bez zamykania karty.
    Naprawa: Dodać widoczny przycisk „Pauza” lub „Wycisz” na początku strony.

    #2 DOBRZE

    Dlaczego: Dźwięk powiadomienia jest krótki (< 3 sekundy). Zgodnie z WCAG, takie dźwięki nie wymagają mechanizmu zatrzymywania, bo kończą się zanim zdążą zakłócić pracę użytkownika.

    #3 DOBRZE

    Dlaczego: Wideo startuje automatycznie, ale dźwięk jest domyślnie wyciszony (muted). Nie przeszkadza to użytkownikowi, dopóki sam świadomie go nie włączy.

    #4 BŁĄD

    Problem: Kontrolki pojawiają się tylko po najechaniu myszką (hover).
    Dlaczego: Użytkownik klawiatury (niewidomy) nie może „najechać” na element, więc nie ma dostępu do przycisku Pauzy, mimo że dźwięk gra.
    Naprawa: Kontrolki muszą być zawsze widoczne lub dostępne po otrzymaniu fokusa (Tab).

    #5 BŁĄD

    Problem: Dźwięk trwa 5 sekund (> 3s) i startuje automatycznie bez możliwości zatrzymania.
    Dlaczego: Przekracza limit 3 sekund. Przez 5 sekund użytkownik czytnika ekranu jest „ogłuszony” i zdezorientowany.
    Naprawa: Skrócić dźwięk poniżej 3 sekund lub dodać przycisk „Pomiń/Stop”.

    Źródła

    Dodatkowe linki

     

    Wróć do wszystkich kryteriów