WCAG 1.4.7: Niski lub brak dźwięku w tle
WCAG 1.4.7: Niski lub brak dźwięku w tle (Low or No Background Audio)
Kryterium sukcesu WCAG 1.4.7, należące do poziomu AAA, dotyczy dostępności treści audio, w których występuje mowa. Jego celem jest zapewnienie, że mowa jest wyraźna i łatwa do zrozumienia dla wszystkich użytkowników, poprzez minimalizowanie lub całkowite wyeliminowanie rozpraszających dźwięków tła.
Wprowadzenie do kryterium 1.4.7
Kryterium 1.4.7 „Niski lub brak dźwięku w tle” wymaga, aby w przypadku wstępnie nagranych treści audio zawierających mowę, dźwięki tła były znacznie cichsze od mowy. Konkretnie, dźwięki tła muszą być co najmniej o 20 decybeli (dB) cichsze niż mowa, z pewnymi wyjątkami.
To oznacza, że użytkownicy nie powinni mieć trudności z rozróżnieniem słów od muzyki, szumów otoczenia czy innych efektów dźwiękowych, które mogą być obecne w nagraniu. Głośność mowy powinna być dominująca i wyraźnie słyszalna.
Dlaczego to kryterium jest ważne? (Wpływ na dostępność)
Zapewnienie odpowiedniego poziomu dźwięku tła jest kluczowe dla szerokiej gamy użytkowników i ma istotny wpływ na dostępność:
Zignorowanie tego kryterium może sprawić, że wartościowe treści audio staną się niedostępne lub bardzo trudne do przyswojenia dla dużej grupy odbiorców, ograniczając ich możliwość uczestniczenia i czerpania korzyści z Twojej witryny.
Kryteria sukcesu i wymagania
Kryterium 1.4.7 jest stosunkowo proste, ale jego szczegóły są ważne:
Praktyczne wytyczne dotyczące zgodności
Aby spełnić kryterium 1.4.7, można zastosować kilka strategii:
Przykłady implementacji
Przykład poprawnej implementacji (wstępnie zmiksowane audio z cichym tłem)
To jest przykład pliku audio, który został profesjonalnie zmiksowany tak, aby muzyka tła była znacząco cichsza od mowy, zgodnie z zasadą 20 dB. Użytkownik ma dostęp do podstawowych kontrolek odtwarzacza.
<audio controls preload="metadata">
<source src="sciezka-do-pliku-z-mowa-i-cichym-tlem.mp3" type="audio/mpeg">
<p>Twoja przeglądarka nie obsługuje elementu audio.</p>
</audio>
<p><em>Uwaga: W tym przykładzie zakłada się, że plik MP3 został już poprawnie zmiksowany.</em></p>
Przykład poprawnej implementacji (z niezależną kontrolą głośności tła)
Ten przykład pokazuje, jak zapewnić użytkownikowi niezależną kontrolę nad głośnością mowy i muzyki tła, co jest doskonałą praktyką, jeśli precyzyjne miksowanie 20 dB jest trudne lub chcesz dać użytkownikowi pełną elastyczność.
<div class="audio-player-custom">
<p>Słuchaj naszej audycji:</p>
<audio id="speechAudio" preload="metadata" controls>
<source src="sciezka-do-samej-mowy.mp3" type="audio/mpeg">
<p>Twoja przeglądarka nie obsługuje elementu audio.</p>
</audio>
<audio id="backgroundAudio" loop preload="metadata">
<source src="sciezka-do-samej-muzyki-tla.mp3" type="audio/mpeg">
</audio>
<div class="volume-controls">
<label for="speechVolume">Głośność mowy:</label>
<input type="range" id="speechVolume" min="0" max="1" step="0.01" value="1" aria-label="Regulacja głośności mowy">
<label for="backgroundVolume">Głośność tła:</label>
<input type="range" id="backgroundVolume" min="0" max="1" step="0.01" value="0.2" aria-label="Regulacja głośności dźwięku w tle">
</div>
</div>
<script>
const speechAudio = document.getElementById('speechAudio');
const backgroundAudio = document.getElementById('backgroundAudio');
const speechVolumeControl = document.getElementById('speechVolume');
const backgroundVolumeControl = document.getElementById('backgroundVolume');
// Ustaw początkowe głośności
backgroundAudio.volume = backgroundVolumeControl.value;
speechAudio.volume = speechVolumeControl.value;
// Synchronizuj odtwarzanie
speechAudio.addEventListener('play', () => {
backgroundAudio.play();
});
speechAudio.addEventListener('pause', () => {
backgroundAudio.pause();
});
speechAudio.addEventListener('seeking', () => {
backgroundAudio.currentTime = speechAudio.currentTime;
});
// Obsługa zmian głośności
speechVolumeControl.addEventListener('input', (event) => {
speechAudio.volume = event.target.value;
});
backgroundVolumeControl.addEventListener('input', (event) => {
backgroundAudio.volume = event.target.value;
});
</script>
Przykład niepoprawnej implementacji
W tym przykładzie plik audio zawiera mowę z głośną muzyką tła, która nie została odpowiednio wyciszona podczas miksowania. Brak jest również oddzielnych kontrolek do regulacji głośności poszczególnych ścieżek, co uniemożliwia użytkownikowi poprawienie sytuacji.
<audio controls preload="metadata">
<source src="sciezka-do-pliku-z-mowa-i-glosnym-tlem.mp3" type="audio/mpeg">
<p>Twoja przeglądarka nie obsługuje elementu audio.</p>
</audio>
<p><em>Problem: Dźwięk tła w tym pliku jest zbyt głośny w stosunku do mowy i nie ma możliwości jego regulacji.</em></p>
Najlepsze praktyki i często popełniane błędy
Podsumowanie
Kryterium WCAG 1.4.7 „Niski lub brak dźwięku w tle” jest niezbędne do zapewnienia, że treści audio z mową są dostępne i zrozumiałe dla jak najszerszego grona odbiorców. Poprzez przestrzeganie zasady 20 dB różnicy w głośności między mową a tłem, lub poprzez zapewnienie użytkownikom niezależnej kontroli nad tymi elementami, możemy znacznie poprawić użyteczność i dostępność naszych zasobów cyfrowych, eliminując frustrację i zwiększając zaangażowanie.
Powiązane wpisy
- WCAG 5.2.3: Pełne procesy
- WCAG 5.2.4: Tylko sposoby korzystania z technologii wspierające dostępność
- WCAG 5.2.5: Brak zakłóceń
- WCAG 5.3.1: Wymagane elementy oświadczenia o zgodności
- WCAG 5.3.2: Opcjonalne elementy oświadczenia o zgodności
Nadal szukasz odpowiedzi?
Zapytaj naszych specjalistów używając czatu online.