WCAG 2.1 - 2.3.1
Three Flashes or Below Threshold
Webseiten enthalten nichts, das mehr als dreimal in einem Zeitraum von einer Sekunde blinkt, oder das Blinken liegt unter den allgemeinen Blink- und roten Blinkschwellen.
Inhalt
Was steht in den Guidelines zum Success Criterium 2.3.1 - Three Flashes or Below Threshold?Was Bedeutet das Success Criterium 2.3.1 - Three Flashes or Below Threshold?Warum ist es so wichtig, das Success Criterium 2.3.1 - Three Flashes or Below Threshold zu beachten?Was hat das Success Criterium 2.3.1 - Three Flashes or Below Threshold mit dem BFSG zu tun?Lösungen für 2.3.1 - Three Flashes or Below Threshold anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.3.1 - Three Flashes or Below Threshold?Was steht in den Guidelines zum Success Criterium 2.3.1 - Three Flashes or Below Threshold?
Was Bedeutet das Success Criterium 2.3.1 - Three Flashes or Below Threshold?
Das Success Criterion 2.3.1 – "Three Flashes or Below Threshold" – besagt, dass Webseiteninhalte keine grafischen Elemente (z. B. Animationen, Videos, Effekte) enthalten dürfen, die mehr als dreimal innerhalb einer Sekunde blinken oder blitzen. Die einzige Ausnahme ist, wenn das Blinken so schwach ist, dass es nicht dazu führt, dass Menschen mit fotosensibler Epilepsie gefährdet sind. Blitzeffekte, wie sie z. B. bei manchen Werbeeinblendungen, Bildwechseln oder interaktiven Komponenten auftreten können, müssen also so gestaltet sein, dass sie maximal dreimal pro Sekunde auftreten – alles darüber ist zu vermeiden, außer es ist technisch nachweislich ungefährlich.
Warum ist es so wichtig, das Success Criterium 2.3.1 - Three Flashes or Below Threshold zu beachten?
Schnelle Lichtwechsel und Blinkeffekte können bei Menschen mit fotosensibler Epilepsie Krampfanfälle auslösen. Aber auch Menschen ohne diese Diagnose kann ein solches Flackern unangenehm sein oder sie erschrecken. Deshalb schützt dieses Kriterium nicht nur einzelne Nutzergruppen, sondern erhöht generell die Sicherheit und den Komfort für alle.
Was hat das Success Criterium 2.3.1 - Three Flashes or Below Threshold mit dem BFSG zu tun?
Das Erfolgskriterium 2.3.1 ist Teil der WCAG 2.1 auf Level A und damit verpflichtend bei der barrierefreien Gestaltung von Webseiten gemäß Barrierefreiheitsstärkungsgesetz (BFSG). Ein Verstoß dagegen ist daher nicht nur ein technisches Problem, sondern kann auch rechtliche Konsequenzen und Beschwerden nach sich ziehen. Wird dieses Kriterium nicht eingehalten, ist die Website laut BFSG nicht barrierefrei – sie gefährdet aktiv Nutzer.
Lösungen für 2.3.1 - Three Flashes or Below Threshold anhand von Codebeispielen
Falscher Code
<div style="animation: flash 0.2s infinite alternate;">
<span>Jetzt kaufen!</span>
</div>
<style>
@keyframes flash {
0% { background-color: white; }
100% { background-color: red; }
}
</style>Korrekter Code
<div style="animation: flash 1s infinite alternate;">
<span>Jetzt kaufen!</span>
</div>
<style>
@keyframes flash {
0% { background-color: white; }
100% { background-color: red; }
}
</style>
<!-- oder, besser noch, ganz ohne schnelles Blinken/Wechsel -->
<div style="background-color: red;">
<span>Jetzt kaufen!</span>
</div>Im schlechten Beispiel blinkt das Element fünfmal pro Sekunde (0,2s = 5 Wechsel/Sekunde) – das überschreitet die erlaubten drei Blitze pro Sekunde. Das gute Beispiel reduziert die Animation auf einmal pro Sekunde (1s Dauer), was der Grenze entspricht. Noch besser ist es, gar kein Blinken zu verwenden und Aufmerksamkeit anders, z. B. durch Farbe, Kontrast oder dezente Bewegung, zu erzeugen.
Falscher Code
<video src="flashy_intro.mp4" autoplay></video>
<!-- Das Video enthält schnelle Blitzlichter: Clubszene -->Korrekter Code
<video src="statisch_intro.mp4" autoplay></video>
<!-- Das Video wurde bearbeitet, schnelle Blitzlichter wurden entfernt oder reduziert -->Videos mit blitzenden Szenen (z. B. Club, Feuerwerk) müssen überprüft und ggf. bearbeitet werden, sodass keine Szene schneller als dreimal pro Sekunde aufblitzt. Im guten Beispiel wurden gefährliche Effekte entfernt.
Wie löse ich Verstöße gegen das Success Criterium 2.3.1 - Three Flashes or Below Threshold?
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.