Postrzegalność · Poziom A

1.4.2 Kontrola odtwarzania dźwięku

Automatyczny dźwięk nie może zagłuszać strony bez możliwości kontroli.

Krótko

Jeśli dźwięk na stronie uruchamia się automatycznie i trwa dłużej niż 3 sekundy, użytkownik musi mieć mechanizm zatrzymania, pauzy, wyciszenia albo kontroli głośności niezależnej od głośności systemu.

Najlepszy wzorzec jest prosty: nie uruchamiaj dźwięku automatycznie. Niech użytkownik sam wybierze przycisk „Odtwórz”.

Problem w praktyce

Osoba używa czytnika ekranu. Po wejściu na stronę startuje muzyka w tle. Dźwięk zagłusza mowę czytnika, a użytkownik nie może łatwo znaleźć przycisku wyciszenia.

To kryterium nie dotyczy napisów, transkrypcji ani audiodeskrypcji. Chodzi tylko o kontrolę automatycznie odtwarzanego dźwięku.

Kogo to dotyczy

  • Osób korzystających z czytników ekranu.
  • Osób z trudnościami koncentracji, dla których dźwięk w tle jest rozpraszający.
  • Osób słabosłyszących, które muszą osobno kontrolować dźwięk strony i systemu.
  • Użytkowników w miejscach publicznych, gdzie nagły dźwięk może być problemem.

Dobry przykład

  • Film lub podcast startuje dopiero po kliknięciu przycisku „Odtwórz”.
  • Dźwięk startuje automatycznie, ale kończy się po maksymalnie 3 sekundach.
  • Na początku strony jest widoczny przycisk „Wycisz dźwięk”.
  • Odtwarzacz ma własną regulację głośności, niezależną od głośności systemu.

Zły przykład

  • Muzyka w tle startuje po wejściu na stronę i nie ma przycisku wyciszenia.
  • Reklama audio gra automatycznie dłużej niż 3 sekundy bez kontroli.
  • Przycisk wyciszenia jest dopiero na dole strony.
  • Jedynym sposobem wyciszenia jest ściszenie całego systemu.

Przykłady kodu

Dobry przykład: użytkownik uruchamia dźwięk

Brak autoplay oznacza, że dźwięk nie przeszkadza po wejściu na stronę.

Kod — HTML

<audio controls src="/media/wprowadzenie.mp3">
  Twoja przeglądarka nie obsługuje odtwarzacza audio.
</audio>

Dobry przykład: kontrola dźwięku blisko początku

Jeśli dźwięk startuje automatycznie, kontrolka musi być łatwa do znalezienia.

Kod — HTML

<button type="button">Wycisz dźwięk tła</button>
<audio autoplay src="/media/tlo.mp3"></audio>

Zły przykład: automatyczny dźwięk bez kontroli

Dźwięk startuje sam i trwa dłużej niż 3 sekundy.

Kod — HTML

<audio autoplay loop src="/media/muzyka-w-tle.mp3"></audio>

Przykład graficzny

Źle

Autoplay + brak wyciszenia

Użytkownik traci kontrolę nad dźwiękiem strony.

Dobrze

Odtwórz / pauza / głośność

Dźwięk jest pod kontrolą użytkownika.

Statyczne demo pokazuje, że problemem jest automatyczny dźwięk bez łatwej kontroli.

Jak sprawdzić

  1. Wejdź na stronę i nie wykonuj żadnej akcji.
  2. Sprawdź, czy po wejściu startuje dźwięk.
  3. Jeśli tak, sprawdź, czy trwa dłużej niż 3 sekundy.
  4. Sprawdź, czy na początku strony jest dostępna kontrolka pauzy, zatrzymania, wyciszenia albo głośności.
  5. Upewnij się, że kontrola dźwięku strony nie wymaga wyciszenia całego systemu.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • elementy audio lub video z atrybutem autoplay,
  • brak natywnych kontrolek w prostych odtwarzaczach,
  • część skryptów uruchamiających dźwięk.

Automat nie oceni pewnie

  • czy dźwięk trwa ponad 3 sekundy,
  • czy kontrolka jest łatwa do znalezienia dla użytkownika czytnika ekranu,
  • czy głośność jest niezależna od głośności systemu.

Typowe błędy

  • Muzyka startująca automatycznie w tle.
  • Autoodtwarzanie filmu z dźwiękiem bez przycisku pauzy.
  • Ukrycie wyciszenia w niestandardowym odtwarzaczu.
  • Zakładanie, że użytkownik może po prostu wyciszyć komputer.