WCAG 1.4.2: Audio-Steuerelement

WCAG 1.4.2 verlangt: Sobald auf einer Seite länger als drei Sekunden automatisch Ton läuft, muss es einen Mechanismus geben, ihn abzuschalten oder seine Lautstärke unabhängig von der Systemlautstärke zu regeln. Dieser Mechanismus muss am Seitenanfang stehen und selbst barrierefrei bedienbar sein – sonst sucht ihn genau die Person vergeblich, für die er gedacht ist.

(Englisch: Audio Control. Im BIK-BITV-Test heißt der Prüfschritt „1.4.2 Ton abschaltbar“.)

Das Wichtigste in Kürze

• Die Drei-Sekunden-Grenze ist eine Obergrenze, kein Zielwert. Ein kurzer Signalton ist erlaubt; alles darüber braucht ein Bedienelement.
• Der Abschalter gehört an den Seitenanfang. Ein Stopp-Knopf weiter unten bewertet der Prüfschritt als „nicht voll erfüllt“ – man muss erst dorthin navigieren, und genau das ist bei laufendem Ton kaum möglich.
• Eine reine Tastaturlösung reicht nicht. Ein Hinweis „Escape drückt den Ton weg“ ohne sichtbares Bedienelement genügt dem Prüfschritt nicht, weil niemand damit rechnet.
• Die Systemlautstärke ist tabu. Ein Regler, der die Lautstärke des Geräts ändert, dreht auch den Screenreader leiser – das verschlimmert das Problem.
• Auf niedrigster Stufe muss der Ton unhörbar sein, wenn du statt eines Abschalters einen Regler anbietest.
• Stummes Autoplay erfüllt 1.4.2 – bewegtes Bild bleibt aber ein Fall für 2.2.2.
• Die Störwirkung zählt mit: Sprache und laute Signale stören stärker als gleichmäßige Hintergrundmusik und werden im Prüfschritt strenger bewertet.
• Stufe A, seit WCAG 2.0 unverändert und über die EN 301 549 verbindlich.

Darf Musik automatisch starten?

Nur, wenn er kürzer als drei Sekunden läuft. Sonst muss es einen Mechanismus geben, den Ton abzuschalten oder unabhängig von der Systemlautstärke zu regeln.

Der Hintergrund ist konkreter, als der Normtext vermuten lässt. Wer eine Seite mit einem Screenreader bedient, hört sie. Startet gleichzeitig ein Video mit Ton, laufen zwei Stimmen übereinander – und weil beide oft über denselben Ausgang laufen, hilft auch Lauterdrehen nicht. Der Prüfschritt beschreibt genau diesen Zusammenhang: Die Sprachausgabe wird unverständlich, und mit ihr verschwindet die Orientierung. Man kann den Stopp-Knopf nicht finden, weil man die Ansage nicht mehr versteht, mit der man ihn finden würde.

Das Kriterium bietet deshalb drei Wege an, von denen einer erfüllt sein muss:

1. Der Ton dauert höchstens drei Sekunden. Ein kurzer Bestätigungston fällt damit heraus.
2. Es gibt einen Mechanismus zum Pausieren oder Stoppen – am Seitenanfang und ohne Umwege erreichbar.
3. Es gibt eine Lautstärkeregelung, die unabhängig von der Systemlautstärke arbeitet und auf niedrigster Stufe wirklich stumm ist.

Zwei Anforderungen an den Mechanismus entscheiden im Audit, und beide stehen so nur im deutschen Prüfschritt:

Die Position. Der Mechanismus muss sich unmittelbar am Seitenbeginn befinden. Liegt er weiter unten, lautet die Bewertung „nicht voll erfüllt“ – auch dann, wenn er technisch einwandfrei funktioniert. Das ergibt sich aus der Logik der Situation: Wer den Ton abstellen will, muss ihn erreichen können, bevor er sich durch die halbe Seite gehört hat.

Die Form. Reine Tastaturanweisungen ohne sichtbares Bedienelement genügen nicht. Der Prüfschritt begründet das damit, dass Nutzende eine solche Funktion nicht erwarten – eine Escape-Taste, von der niemand weiß, ist kein Mechanismus. Der Knopf selbst muss außerdem alle anderen Anforderungen erfüllen: ausreichender Kontrast, Tastaturbedienbarkeit, ein zugänglicher Name.

Und eine Nuance, die viel erklärt: Der Prüfschritt bezieht die Störwirkung in die Bewertung ein. Gesprochene Passagen und laute Signale stören die Wahrnehmung des Abschaltmechanismus stärker als gleichmäßige Hintergrundmusik und führen deshalb schneller zur Abwertung.

Der Normtext steht im Understanding-Dokument des W3C zu 1.4.2, das deutsche Prüfvorgehen im Prüfschritt „1.4.2 Ton abschaltbar“.

Wen betrifft es besonders?

Screenreader-Nutzende trifft es am härtesten, und zwar in einer Schleife: Der Ton übertönt die Sprachausgabe, die Sprachausgabe könnte den Weg zum Abschalter weisen, tut es aber nicht mehr. In der Praxis endet das meistens damit, dass die Seite geschlossen wird.

Menschen mit Hörgeräten und Cochlea-Implantaten erleben plötzlich einsetzenden Ton nicht als laut, sondern als schmerzhaft: Die Verstärkung ist auf leise Sprache eingestellt, ein anspringender Werbespot geht durch Mark und Bein. Wer eine Ringschleife oder eine direkte Kopplung zum Telefon nutzt, bekommt das Signal ohne jede Dämpfung.

Für Menschen mit Konzentrations- und Reizverarbeitungsschwierigkeiten ist unerwarteter Ton ein Abbruchgrund. Bei ADHS oder Autismus kostet ein plötzlicher akustischer Reiz nicht nur Aufmerksamkeit, sondern oft die ganze Aufgabe.

Und dann die Gruppe, die nie in Statistiken auftaucht: alle im Großraumbüro, in der Bibliothek, im Zug, neben dem schlafenden Kind. Autoplay mit Ton ist die Funktion, die zuverlässig dazu führt, dass Menschen panisch den Tab schließen, statt zu lesen – was ganz nebenbei auch der Verweildauer nicht guttut.

Richtig & falsch im Code

Der Regelfall ist einfach: Autoplay mit Ton weglassen. Wo Autoplay gewünscht ist, gehört muted dazu:

<!-- Falsch: Video mit Tonspur startet automatisch -->
<video autoplay src="/video/imagefilm.mp4"></video>

<!-- Falsch: Audio läuft beim Laden los, ohne jede Kontrolle -->
<audio autoplay loop src="/audio/atmosphaere.mp3"></audio>

<!-- Vertretbar: stumm gestartet, Bedienelemente vorhanden -->
<video autoplay muted playsinline controls
       src="/video/teaser.mp4"></video>

<!-- Am besten: die Wiedergabe startet auf Wunsch -->
<video controls preload="metadata"
       poster="/video/imagefilm-poster.jpg"
       src="/video/imagefilm.mp4"></video>

Wenn Ton aus fachlichen Gründen automatisch laufen muss – etwa bei einer Klanginstallation oder einem Hörbeispiel, das beim Aufruf startet –, gehört der Abschalter als erstes Element in den Quelltext, noch vor die Navigation:

<body>
  <!-- Richtig: der Abschalter ist das erste fokussierbare Element -->
  <button type="button" id="ton-aus" class="ton-schalter">
    Hintergrundton abschalten
  </button>

  <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
  <header> … </header>

// Richtig: schaltet nur diese Tonquelle, nicht das System
const schalter = document.querySelector('#ton-aus');
const ton = document.querySelector('#hintergrundton');

schalter.addEventListener('click', () => {
  const laeuft = !ton.paused;
  if (laeuft) ton.pause(); else ton.play();
  schalter.textContent = laeuft
    ? 'Hintergrundton einschalten'
    : 'Hintergrundton abschalten';
});

Zwei Dinge an diesem Muster sind bewusst so gebaut: Der Knopf steht vor dem Skip-Link, weil er die dringendere Funktion ist. Und seine Beschriftung ändert sich mit dem Zustand, statt nur über aria-pressed zu arbeiten – das ist verlässlicher und für alle sichtbar. Die Alternativen dazu stehen unter Toggles & Custom Controls.

Was du dagegen nicht tun solltest:

// Falsch: nur per Tastatur, ohne sichtbares Bedienelement –
// niemand rechnet mit dieser Taste, also findet sie auch niemand
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') ton.pause();
});

<!-- Falsch: verweist auf die Systemlautstärke, statt eine
     eigene Regelung anzubieten – das dreht den Screenreader mit leiser -->
<p>Ton stört? Bitte die Lautstärke deines Geräts herunterregeln.</p>

Stummes Autoplay erfüllt 1.4.2 – bewegtes Bild bleibt aber ein Fall für 2.2.2 Pausieren, beenden, ausblenden und sollte prefers-reduced-motion respektieren. Und ein Hinweis zur Technik: Die meisten Browser blockieren tönendes Autoplay inzwischen von sich aus. Darauf verlassen sollte man sich nicht – die Regeln unterscheiden sich je nach Browser, Nutzungsverlauf und Plattform, und was auf dem Testrechner blockiert wird, läuft auf einem anderen los.

So testest du es

1. Jede Seitenvorlage einmal frisch laden – Startseite, Artikelseite, Produktseite, Landingpage, Kampagnenseiten. Autoplay-Ton ist fast immer ein Sonderfall einzelner Vorlagen.
2. Auf die Uhr sehen. Läuft der Ton länger als drei Sekunden? Darunter ist das Kriterium nicht anwendbar.
3. Ohne zu scrollen nach dem Abschalter suchen. Findest du ihn nicht im ersten Bildschirm und nicht als erstes fokussierbares Element, ist der Prüfschritt allenfalls teilweise erfüllt.
4. Nur mit der Tastatur bedienen. Tab drücken: Wie viele Sprünge bis zum Abschalter? Ist er sichtbar fokussiert (2.4.7)?
5. Bei Lautstärkereglern gegenprüfen: Ist die Regelung unabhängig vom System? Wird der Ton auf der niedrigsten Stufe wirklich unhörbar?
6. Die Screenreader-Probe machen. Seite mit NVDA oder VoiceOver laden: Bleibt die Sprachausgabe verständlich, während der Ton läuft?
7. Eingebettete Inhalte nicht vergessen: Werbebanner, Karussells mit Videohintergrund, Chat-Widgets mit Signalton, Karten-Einbindungen, Cookie-Banner mit Begrüßungsvideo.

Häufiger Fehler in der Praxis

Der häufigste Fehler ist das Hintergrundvideo mit Tonspur. Im Kopfbereich läuft eine Stimmungssequenz, stumm gestartet, technisch also unkritisch – aber mit Tonspur und Tonknopf. Sobald jemand den Ton einschaltet, und sei es versehentlich, gilt das Kriterium. Ich würd bei solchen Videos die Tonspur beim Export einfach weglassen; dann ist der Fall dauerhaft erledigt und die Datei nebenbei kleiner.

Der zweite ist der Abschalter am falschen Ende der Seite. Es gibt einen Stopp-Knopf, sauber gebaut, mit gutem Kontrast – im Player, der auf halber Seitenhöhe steht. Für sehende Mausnutzende ist das kein Problem. Für alle, die sich linear durch die Seite arbeiten, sind es dreißig Tabulatorsprünge unter Dauerbeschallung. Der Prüfschritt bewertet genau das als nicht voll erfüllt.

Der dritte ist die Werbeeinblendung, die niemand geprüft hat. Die eigene Seite ist sauber, aber ein Anzeigenformat bringt ein Video mit Ton mit. Aus Sicht des Prüfschritts zählt, was ausgeliefert wird, nicht wer es geliefert hat. Wer Werbung einbindet, braucht dafür eine Regel im Vertrag – oder ein Format, das keinen Ton zulässt.

Der vierte ist der Signalton im Chat-Widget. Ein Ping bei jeder neuen Nachricht ist kurz und damit unkritisch; ein Widget, das beim Laden eine gesprochene Begrüßung abspielt, ist es nicht. Solche Begrüßungen tauchen in Audits regelmäßig auf und werden nie bewusst eingeschaltet – sie sind irgendwo eine Voreinstellung.

Häufige Fragen

Gilt 1.4.2 auch für stumm startende Videos?

Nein. Ohne hörbaren Ton greift das Kriterium nicht. Sobald das Video jedoch eine Tonspur hat und jemand sie einschalten kann, gelten dieselben Anforderungen – und für die Bewegung selbst gilt unabhängig davon 2.2.2 Pausieren, beenden, ausblenden.

Reicht es, wenn der Browser Autoplay blockiert?

Nein, darauf lässt sich keine Konformität stützen. Die Blockierregeln unterscheiden sich je nach Browser, Plattform und bisherigem Nutzungsverhalten – wer eine Seite häufig besucht, bekommt Autoplay oft doch. Das Kriterium verlangt eine Lösung in deiner Seite, nicht im Browser der Besuchenden.

Wo genau muss der Abschalter stehen?

Am Seitenanfang, und zwar so, dass er ohne Scrollen erreichbar und als erstes oder eines der ersten Elemente fokussierbar ist. Der Prüfschritt bewertet einen Mechanismus, der nicht unmittelbar am Seitenbeginn liegt, als nicht voll erfüllt. Praktisch heißt das: vor dem Skip-Link, vor der Navigation.

Genügt ein Lautstärkeregler statt eines Abschalters?

Ja, wenn er zwei Bedingungen erfüllt: Er muss unabhängig von der Systemlautstärke arbeiten, und auf der niedrigsten Stufe muss der Ton unhörbar sein. Ein Regler, der nur die Gerätelautstärke verändert, erfüllt das Kriterium nicht – er dreht auch die Sprachausgabe leiser.

Ist ein kurzer Signalton erlaubt?

Ja. Töne bis drei Sekunden fallen nicht unter das Kriterium. Bei Signaltönen lohnt trotzdem ein zweiter Gedanke: Wer sie ohne visuelle Entsprechung einsetzt, verstößt schnell gegen 1.4.1 Benutzung von Farbe in seiner allgemeinen Logik – Information darf nicht an einem einzigen Sinneskanal hängen.

Verwandte Themen

• 2.2.2 Pausieren, beenden, ausblenden – dasselbe Prinzip für Bewegung
• Barrierefreier Media-Player – Player-Muster ohne Autoplay-Fallen
• Semantische Medien – audio, video und ihre Attribute
• 1.2.2 Untertitel (aufgezeichnet) – was gilt, sobald das Video Ton hat
• Toggles & Custom Controls – Schalter, deren Zustand ankommt
• Skip-Links – der Nachbar am Seitenanfang