Praxisleitfaden Automatisch startender Ton
Audio bewusst starten lassen
Prüfen Sie Tonquelle, Laufzeit und Steuerung am konkreten Autoplay-Befund.
no-autoplay-audioWCAG 1.4.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-no-autoplay-audio.html
Prüfhinweis einordnen
Ein Player ist sichtbar. Der andere startet im Hintergrund.
Manueller Prüfkandidat
Das fällt auf
no-autoplay-audio meldet #spectrum-autoplay als manuell zu prüfenden Kandidaten: autoplay und loop ohne controls.So ist es einzuordnen
In der Medienablage des fiktiven Formateliers gehört der sichtbare Audioplayer zu einem anderen Element. Die markierte Region enthält zusätzlich ein Audioelement ohne sichtbare Steuerung. Dessen Skript erzeugt einen vier Sekunden langen Ton und weist ihn als Quelle zu.
Das bedeutet es für die Nutzung
Startet dieser Ton automatisch, kann er die Sprachausgabe eines Screenreaders überlagern. Ob der Browser den Start erlaubt und wie sich der Ton tatsächlich verhält, muss am laufenden Beispiel geprüft werden.
- Regel
no-autoplay-audio- Referenz
- WCAG 1.4.2
Geprüfte Ausgangslage
Ziel: #spectrum-autoplay
Quelle: lokal erzeugte WAV-Datei, 4 Sekunden
Audiodaten: wechselnde PCM-Werte 164 und 92, keine Stille
Attribute: autoplay, loop; keine eigenen controls
Standard-Chromium: pausiert, Wiedergabezeit 0
Autoplay ausdrücklich erlaubt: Wiedergabe mit SchleifeWiedergabe im Nutzerweg prüfen
Planen Sie Start und Stopp für Seiten mit Audio. Die Annahmen dienen ausschließlich Ihrer manuellen Prüfplanung.
Rechenbeispiel · Automatisch startendes Audio
- Annahme: eine Audioquelle je Seite.
- Annahme: acht Minuten für Neuladen, Start und Pause in einem Browser; weitere Browser zusätzlich prüfen.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Was startet, wie lange läuft es, wer kann es stoppen?
Beurteilen Sie die tatsächliche Wiedergabe, nicht allein das vorhandene autoplay-Attribut.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ton erst auf Anforderung | Eine ausdrücklich beschriftete Wiedergabeaktion löst den Ton aus. | Diesen Startweg beibehalten und die Bedienbarkeit der Mediensteuerung prüfen. |
| Automatischer Ton länger als drei Sekunden | Die Seite spielt ohne bewussten Start hörbaren Ton ab; Schleifen zählen zur Wiedergabedauer. | Eine erreichbare Pause- oder Stoppfunktion oder eine von der Systemlautstärke unabhängige Lautstärkeregelung anbieten. Für den Atelierton wählen wir einen bewussten Start. |
| Kein hörbarer oder nur kurzer Ton | Die Quelle enthält Stille oder endet innerhalb von drei Sekunden ohne Wiederholung. | Den tatsächlichen Verlauf dokumentieren. Ein blockierter Start in einem Browser belegt dagegen keine allgemein sichere Wiedergabe. |
Original im Kontext
Die Steuerung muss zum auslösenden Audio gehören
Der Ausschnitt zeigt die vollständige Medienablage mit Überschrift, beiden Medienarten und benachbarten Bedienelementen. Da das betroffene Audio vor der Korrektur unsichtbar ist, markiert der Rahmen seine umgebende Region.
Der sichtbare Player mit 0:00 / 0:00 steuert den Atelierton nicht. Erst im Korrekturbeispiel erscheint für die vier Sekunden lange Quelle ein eigener Player. Ein Screenshot allein zeigt weder Ton noch einen tatsächlich erfolgten Start.
Startverhalten ändern
Autoplay entfernen und die Quelle bedienbar machen
Am betroffenen Audioelement entfernen wir autoplay und loop, pausieren eine bereits laufende Wiedergabe und ergänzen native Bedienelemente mit einem zugänglichen Namen. Das Skript darf weiterhin die vorhandene Quelle zuweisen, aber keinen automatischen play()-Aufruf ergänzen.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Im CMS oder Medienbaustein Deaktivieren Sie „Automatisch abspielen“ und „Wiederholen“ für genau diese Quelle. Aktivieren Sie die Player-Steuerung und prüfen Sie auch Startskripte, eingebettete Anbieter und verzögert geladene Medien.
KorrekturvergleichHTML und laufende Wiedergabe Vorher
<audio id="spectrum-autoplay" autoplay loop></audio> <!-- Das vorhandene Skript weist die WAV-Quelle zu. -->Nachher
<audio id="spectrum-autoplay" controls aria-label="Atelierton abspielen"></audio> <!-- Das vorhandene Skript weist dieselbe WAV-Quelle zu. --> // Bei einer Änderung im laufenden Dokument zusätzlich: audio.pause(); audio.currentTime = 0;Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie das geänderte Element im Nutzungskontext manuell. Der Code allein bestätigt das Ergebnis nicht.
Umsetzung absichern
Jede Tonquelle hat ihren eigenen Startweg
Prüfen Sie das Zusammenspiel von Medienbaustein, Skript und Nutzeraktion.
- 1
Ordnen Sie Pause und Lautstärke dem tatsächlich spielenden Element zu; ein benachbarter Player genügt nicht.
- 2
Entfernen Sie auch automatisches play() nach Ladeereignissen, Timern oder Routenwechseln.
- 3
Benennen Sie die Wiedergabeaktion so, dass vor der Aktivierung erkennbar ist, dass Ton startet.
- 4
Prüfen Sie nach dem Pausieren, dass kein Skript oder Zustandswechsel den Ton ungefragt fortsetzt.
Fehlkorrekturen vermeiden
Vier Abkürzungen liefern keine verlässliche Lösung
Auf die Browsersperre vertrauen
Im Standardlauf blieb diese Quelle pausiert. Mit erlaubtem Autoplay lief sie. Einstellungen und Nutzungskontext dürfen die Korrektur nicht ersetzen.
Nur das Attribut im laufenden DOM löschen
Eine bereits gestartete Wiedergabe muss zusätzlich pausiert werden. Das Korrekturbeispiel setzt deshalb auch die aktuelle Wiedergabe zurück.
Die Systemlautstärke empfehlen
Damit wird unter Umständen auch der Screenreader leiser. Die Kontrolle muss den Seitenton unabhängig davon beeinflussen.
Dateilänge ohne Schleife bewerten
loop wiederholt die Quelle. Auch eine kurze Datei kann dadurch dauerhaft Ton ausgeben; hier dauert schon ein einzelner Durchlauf vier Sekunden.
Der neue Player ist ein Korrekturbeispiel
Die Laufzeitprüfung bestätigt dieselbe Quelle, entfernte Autoplay- und Schleifenattribute, vorhandene controls und den pausierten Zustand bei 0 Sekunden. Axe stuft die Regel anschließend als nicht anwendbar ein. Das ist kein automatischer Nachweis der manuellen Bedienprüfung.
Im Beispiel dokumentiert
Korrekturbeispiel · Manuell nachprüfen
Der zusätzliche Player zeigt die vier Sekunden lange Quelle bei 0:00. autoplay und loop sind entfernt; die Quelle ist pausiert.
Was Sie zusätzlich beurteilen müssen
Das Korrekturbeispiel betrifft ausschließlich #spectrum-autoplay. Andere absichtlich fehlerhafte Elemente der Kalibrierseite und die vollständige WCAG-Konformität sind damit nicht geprüft.
HTML erkennen, Wiedergabe im Gebrauch prüfenPrüfauftrag für Ihre Umsetzung
- Die korrigierte Seite neu laden, auch mit erlaubtem Autoplay: Vor bewusster Aktivierung darf kein Ton beginnen.
- Den neuen Player per Tastatur erreichen, den Atelierton starten und wieder pausieren; der Ton muss anschließend still bleiben.
- Mit Screenreader prüfen, ob Quelle und Startaktion verständlich sind und der Seitenton dessen Ausgabe nicht ungefragt überlagert.
- Dieselben Schritte nach Navigation und verzögertem Laden sowie in den unterstützten Browsern wiederholen.
Ergebnis am korrigierten Element
Quelle: unverändert, 4 Sekunden
Autoplay: entfernt · Schleife: entfernt
Eigene native Steuerung: vorhanden
Wiedergabe: pausiert bei 0 Sekunden
Axe: Regel nicht anwendbar
Tastatur-, Screenreader- und Hörprüfung: manuell erforderlichPrüfumfang festlegen
HTML erkennen, Wiedergabe im Gebrauch prüfen
Automatische Hinweise führen zur richtigen Quelle. Die Bewertung braucht ihren tatsächlichen Wiedergabekontext.
Automatisch prüfbar
- Autoplay-Kandidaten im gerenderten HTML und fehlende native controls zuordnen
- Verfügbare Mediendauer und die Wiederholung durch loop technisch untersuchen
- Nach der Änderung Attribute, Quelle und erneutes Regelergebnis vergleichen
Im Kontext zu entscheiden
- Hörbaren Inhalt von Stille, Ladefehlern und browserseitig blockierter Wiedergabe unterscheiden
- Die Gesamtdauer einschließlich Wiederholungen und verzögerter Starts beobachten
- Eigene Mediensteuerung mit Tastatur und Screenreader sowie in realen Nutzerwegen prüfen