WCAG 2.1 - 2.2.2
Pause, Stop, Hide
Für bewegende, blinkende, scrollende oder automatisch aktualisierende Informationen sind alle folgenden Aussagen wahr:
Inhalt
Was steht in den Guidelines zum Success Criterium 2.2.2 - Pause, Stop, Hide?Was Bedeutet das Success Criterium 2.2.2 - Pause, Stop, Hide?Warum ist es so wichtig, das Success Criterium 2.2.2 - Pause, Stop, Hide zu beachten?Was hat das Success Criterium 2.2.2 - Pause, Stop, Hide mit dem BFSG zu tun?Lösungen für 2.2.2 - Pause, Stop, Hide anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.2.2 - Pause, Stop, Hide?Was steht in den Guidelines zum Success Criterium 2.2.2 - Pause, Stop, Hide?
Implementationshinweise
- Moving, blinking, scrolling: Für alle bewegten, blinkenden oder scrollenden Informationen, die (1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten präsentiert werden, gibt es einen Mechanismus, mit dem der Benutzer sie pausieren, stoppen oder ausblenden kann, es sei denn, die Bewegung, das Blinken oder das Scrollen ist Teil einer Aktivität, bei der es wesentlich ist;
- Auto-updating: „Für alle automatisch aktualisierenden Informationen, die (1) automatisch starten und (2) parallel zu anderen Inhalten angezeigt werden, gibt es einen Mechanismus, mit dem der Benutzer sie pausieren, stoppen oder ausblenden oder die Aktualisierungsfrequenz steuern kann, es sei denn, die automatische Aktualisierung ist Teil einer Aktivität, bei der sie wesentlich ist.“
Was Bedeutet das Success Criterium 2.2.2 - Pause, Stop, Hide?
Das Success Criterion 2.2.2 (Pause, Stop, Hide) fordert, dass alle sich automatisch aktualisierenden, bewegenden, blinkenden oder scrollenden Inhalte auf der Website vom Nutzer angehalten, gestoppt oder ausgeblendet werden können, wenn sie länger als 5 Sekunden laufen und gleichzeitig mit anderen Inhalten angezeigt werden. Beispiele für solche Inhalte sind automatisch wechselnde Banner, Animationen, Slideshows oder News-Ticker.
Wenn deine Website z.B. automatisch scrollende Texte oder Karussells mit wechselnden Bildern enthält, musst du einen klar sichtbaren Mechanismus bereitstellen, mit dem Nutzer diese Animationen pausieren, stoppen oder ausblenden können. Das Ziel ist, dass niemand durch sich bewegende Inhalte abgelenkt wird, vor allem Personen mit Aufmerksamkeitsproblemen oder motorischen Einschränkungen.
Warum ist es so wichtig, das Success Criterium 2.2.2 - Pause, Stop, Hide zu beachten?
Sich bewegende oder blinkende Inhalte können Menschen mit kognitiven Einschränkungen, Konzentrationsproblemen, Epilepsie oder motorischen Problemen stark beeinträchtigen. Fehlt eine Möglichkeit, diese Inhalte zu pausieren, kann dies zu Überforderung, Ablenkung oder sogar gesundheitlichen Problemen führen. Jeder Nutzer verdient es, die Kontrolle über die angezeigten Inhalte zu haben.
Was hat das Success Criterium 2.2.2 - Pause, Stop, Hide mit dem BFSG zu tun?
Nach dem Barrierefreiheitsstärkungsgesetz (BFSG) ist es verpflichtend, dass alle digitalen Produkte und Dienstleistungen barrierefrei zugänglich sind. Da SC 2.2.2 Teil der Norm EN 301 549 ist, welche verbindlich im Rahmen des BFSG in Deutschland gilt, ist die Einhaltung dieses Kriteriums Pflicht. Verstößt eine Website dagegen (z.B. indem sie ein automatisches Bildkarussell ohne Pause-Button zeigt), ist sie nicht BFSG-konform und riskiert rechtliche Konsequenzen.
Lösungen für 2.2.2 - Pause, Stop, Hide anhand von Codebeispielen
Falscher Code
<!-- Automatisches Bildkarussell OHNE Steuerungselemente -->
<div id="slider">
<img src="bild1.jpg" alt="Beispielbild 1" />
<img src="bild2.jpg" alt="Beispielbild 2" />
</div>
<script>
// Bilder wechseln alle 3 Sekunden automatisch
</script>Korrekter Code
<!-- Automatisches Bildkarussell MIT PAUSE-Button -->
<div id="slider">
<img src="bild1.jpg" alt="Beispielbild 1" />
<img src="bild2.jpg" alt="Beispielbild 2" />
<button id="pause-slider">Pause</button>
<button id="resume-slider">Abspielen</button>
</div>
<script>
// Bilder wechseln alle 3 Sekunden automatisch
// Pausieren und Fortsetzen durch Buttons möglich
document.getElementById('pause-slider').addEventListener('click', function(){
// Stoppe automatische Wiedergabe
});
document.getElementById('resume-slider').addEventListener('click', function(){
// Starte automatische Wiedergabe erneut
});
</script>Der schlechte Code zeigt ein Karussell, welches automatisch läuft und KEINE Möglichkeit zum Pausieren bietet. Das kann Nutzer überfordern oder ablenken. Der gute Code stellt einen deutlich sichtbaren PAUSE- und ABSPIELEN-Button bereit, mit dem Nutzer die Kontrolle über den Bildwechsel erhalten. Damit werden die Anforderungen von SC 2.2.2 erfüllt.
Falscher Code
<!-- Blinkender Text ohne Stopp-Möglichkeit -->
<div class="blink">Achtung: Sonderangebot!</div>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>Korrekter Code
<!-- Blinkender Text mit AUSBLEND-Option -->
<div id="warning">
<span id="blink">Achtung: Sonderangebot!</span>
<button onclick="document.getElementById('warning').style.display='none'">Ausblenden</button>
</div>
<style>
#blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>Im schlechten Beispiel blinkt ein Text dauerhaft ohne Möglichkeit für den Nutzer, dies zu stoppen oder auszublenden. Das kann ablenken oder sogar zu gesundheitlichen Problemen führen. Im guten Beispiel gibt es einen "Ausblenden"-Button. Damit kann der Nutzer den blinkenden Hinweis vollständig entfernen und das Problem wird gemäß SC 2.2.2 gelöst.
Wie löse ich Verstöße gegen das Success Criterium 2.2.2 - Pause, Stop, Hide?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.