1.4.2 Audio Control

WCAG-Definition

Wenn Audio automatisch für mehr als 3 Sekunden abgespielt wird, muss eine Möglichkeit zur Pausierung, Beendigung oder Lautstärkeregelung vorhanden sein – unabhängig von der allgemeinen Systemlautstärke.

Bedeutung

Automatischer Ton kann:

  • Nutzer überfordern oder erschrecken
  • Screenreader stören (Ton überlagert Sprachausgabe)
  • die Orientierung erschweren (besonders bei kognitiven Einschränkungen)

Nutzer müssen Kontrolle über Toninhalte haben

Ausreichende Techniken 

G170 – Ton nicht automatisch starten

<audio controls>
  <source src="willkommen.mp3" type="audio/mpeg">
  Ihr Browser unterstützt kein Audio-Tag.
</audio>

  • Der Ton wird erst abgespielt, wenn der Nutzer klickt
  • Erfüllt Kriterium 1.4.2 vollständig

G171 – Wenn Ton automatisch startet, muss ein Stopp-/Pause-Button vorhanden sein

<audio autoplay id="introAudio">
  <source src="intro.mp3" type="audio/mpeg">
</audio>

<button onclick="document.getElementById('introAudio').pause()">Audio stoppen</button>

  • Ton startet automatisch
  • Aber Nutzer hat sofort eine sichtbare und funktionierende Stopp-Funktion

Alternative: Lautstärke auf 0 oder muted, bis Nutzer eingreift

<audio autoplay muted controls>
  <source src="intro.mp3" type="audio/mpeg">
</audio>

  • Der Ton spielt zwar, aber ist zunächst stumm
  • Nutzer kann selbst aktivieren → zulässig

Beratungstechniken

G150 - Verwende klare Beschriftungen wie „Audio stoppen“ statt nur Symbole
G182 - Vermeide gleichzeitigen automatischen Ton + Animation (visuelle Überforderung)
G75 - Gib Nutzern die Möglichkeit, autoplay dauerhaft zu deaktivieren (z. B. Cookie speichern)
G80 - Verzichte auf Autoplay bei Screenreader-Nutzung (z. B. per ARIA-Erkennung role="application" vermeiden)

Fehler

  • Audio startet automatisch und kann nicht gestoppt werden
  • Nur das System-Audiogerät kann den Ton kontrollieren (z. B. Lautsprecherlautstärke – das reicht nicht)
  • Die Stopp-Funktion ist nicht sofort zugänglich oder unauffindbar
  • Audio startet, bevor die Seite geladen ist (z. B. eingebetteter <embed>-Inhalt)