1.4.2 - Hangvezérlés szabályozása

Röviden a szabványpontról

A WCAG 1.4.2 (Audio Control) előírja, hogy ha bármilyen hang 3 másodpercnél tovább automatikusan lejátszódik egy weboldalon, a felhasználóknak képesnek kell lenniük szüneteltetni, leállítani vagy elnémítani azt. Ez minden olyan hangtartalomra vonatkozik, amely nem egy beépített vezérlőkkel ellátott médialejátszó részeként jelenik meg, és automatikusan elindul az oldal betöltésekor vagy felhasználói interakció hatására.

A cél az, hogy a hangokra érzékeny felhasználók, illetve akik képernyőolvasót vagy más kisegítő technológiát használnak, irányítani tudják a hang lejátszását – így elkerülhető a figyelemelterelés vagy a zavaró interferencia ezekkel az eszközökkel.

Kiket érint

Ez a szabványpont elsősorban azokat az embereket érinti, akiknek kognitív fogyatékossága, hallásproblémája vagy figyelemmel kapcsolatos kihívásai vannak, és akik számára a váratlan vagy folyamatos hang zavaró vagy túlterhelő lehet. De hasznos lehet akkor is, ha:

• Zajos környezetben használják az eszközt
• Képernyőolvasót használnak, mert le tudják állítani a hangtartalmat, amely zavarja a kisegítő technológiájukat

Tesztelés

1. Manuális teszt: Töltsd be az oldalt és figyeld meg, hogy lejátszódik-e automatikusan bármilyen hang 3 másodpercnél tovább
2. Vezérlő jelenléte: Ellenőrizd, hogy van-e látható és programozottan elérhető vezérlő (gomb vagy kapcsoló) a hang szüneteltetéséhez, leállításához vagy elnémításához
3. Billentyűzetes hozzáférhetőség: Ellenőrizd, hogy a hang vezérlő csak billentyűzettel is működtethető-e (Tab, Enter, Space)
4. Képernyőolvasó teszt: Használj képernyőolvasót annak biztosítására, hogy a hang vezérlő megfelelően bejelentésre kerül és aktiválható
5. Többszörös hangforrások: Erősítsd meg, hogy az oldalon lévő összes automatikusan lejátszódó hangforrásnak van vezérlője

Jó gyakorlatok

Egyszerű némító gomb háttérzenéhez

<audio autoplay loop id="background-audio">
  <source src="hatterzene.mp3" type="audio/mpeg">
  A böngésző nem támogatja az audio elemet.
</audio>

<button aria-pressed="false" id="audio-toggle" aria-label="Háttérzene elnémítása" onclick="toggleAudio()">
  Némítás
</button>

<script>
  const audio = document.getElementById('background-audio');
  const button = document.getElementById('audio-toggle');
  
  function toggleAudio() {
    if (audio.muted) {
      audio.muted = false;
      button.setAttribute('aria-pressed', 'false');
      button.setAttribute('aria-label', 'Háttérzene elnémítása');
      button.textContent = 'Némítás';
    } else {
      audio.muted = true;
      button.setAttribute('aria-pressed', 'true');
      button.setAttribute('aria-label', 'Háttérzene visszakapcsolása');
      button.textContent = 'Hang be';
    }
  }
</script>

Magyarázat: Ez a példa egy kapcsoló gombot használ megfelelő ARIA attribútumokkal a hang elnémításának vezérléséhez.

Automatikus lejátszás kerülése, kivéve ha a felhasználó kezdeményezi

<div class="audio-player">
  <h3>Podcast lejátszás</h3>
  <button onclick="document.getElementById('podcast').play()" class="play-button">
    ▶️ Podcast indítása
  </button>
  
  <audio id="podcast" controls>
    <source src="podcast.mp3" type="audio/mpeg">
    A böngésző nem támogatja az audio elemet.
  </audio>
</div>

<style>
.audio-player {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px 0;
}

.play-button {
  background: #007cba;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>

Magyarázat: A hang csak azután kezd el játszódni, hogy a felhasználó rákattint egy gombra.

Rossz gyakorlatok

Automatikus lejátszás vezérlők nélkül

<audio autoplay>
  <source src="zene.mp3" type="audio/mpeg">
</audio>

Probléma: A hang automatikusan lejátszódik és a felhasználó nem tudja szüneteltetni vagy elnémítani, zavart okozva.

Rejtett vagy elérhetetlen hangvezérlők

<audio autoplay controls style="display:none;">
  <source src="zene.mp3" type="audio/mpeg">
</audio>

Probléma: A vezérlők ugyan jelen vannak, de vizuálisan rejtettek és elérhetetlenek a billentyűzet vagy képernyőolvasó felhasználók számára.

Nem akadálymentes hangvezérlők

<div onclick="toggleSound()" style="background: red; width: 20px; height: 20px;"></div>

Probléma: A hangvezérlő nem elérhető billentyűzettel, nincs címkéje és nem jelzi a funkcióját.

Több automatikus hangforrás vezérlők nélkül

<audio autoplay loop>
  <source src="hatterzene.mp3" type="audio/mpeg">
</audio>

<audio autoplay>
  <source src="hangeffektus.mp3" type="audio/mpeg">
</audio>

Probléma: Több hangforrás egyszerre játszódik le vezérlési lehetőség nélkül, ami túlterhelő lehet.

Források

• WCAG 2.2 Understanding Document: Audio Control↗⧉
• WCAG 2.2 Specification: Success Criterion 1.4.2 Audio Control↗⧉