Ratgeber · Barrierefreiheit
Barrierefreie Effekte: Animationen ohne Risiko
Ein pulsierendes Herz, ein Slider, eine Zahl, die hochzählt: Bewegung lenkt den Blick. Für Patienten mit Schwindel, Migräne oder Epilepsie kann dieselbe Bewegung zur Belastung werden. Barrierefreie Animationen auf der Praxis-Website lassen sich anhalten, blitzen nicht und richten sich nach dem Gerät des Besuchers.
Kurz erklärt
Was ist eine barrierefreie Animation?
Barrierefreie Animation ist eine Bewegung auf einer Website, die niemanden ausschließt oder gefährdet: Sie lässt sich anhalten, respektiert die Systemeinstellung „Bewegung reduzieren“, blitzt nicht und trägt keine Information, die es nicht auch ohne Bewegung gibt.
- prefers-reduced-motion: die Systemeinstellung des Besuchers respektieren
- Pause-Schalter für Bewegung, die länger als fünf Sekunden läuft (WCAG 2.2.2)
- Höchstens drei Blitze pro Sekunde (WCAG 2.3.1)
- Keine Parallax- und Zoom-Effekte, die Schwindel auslösen
Wen Animationen auf Praxis-Websites belasten
Menschen mit Erkrankungen des Gleichgewichtsorgans bekommen bei großen Bewegungen auf dem Bildschirm Schwindel und Übelkeit, manchmal für Stunden. Bei fotosensitiver Epilepsie können schnelle Hell-Dunkel-Wechsel einen Anfall auslösen. Menschen mit Migräne, ADHS oder nach einer Gehirnerschütterung werden durch ständige Bewegung abgelenkt und erschöpft. Auf einer Website für Hausarzt, Neurologie, HNO oder Physiotherapie sind genau diese Menschen die Besucher. Für sie ist die Praxis-Website oft der erste Kontakt, und der sollte nicht wehtun.
Dazu kommen ältere Patienten, die mit der Lesebrille vor dem Smartphone sitzen. Ein Text, der sich bewegt, während man ihn liest, ist für sie schlicht unbrauchbar.
Die Systemeinstellung „Bewegung reduzieren“ respektieren
Windows, macOS, iOS und Android bieten eine Einstellung, mit der Nutzer Bewegung auf dem Gerät reduzieren. Websites können sie über die CSS-Abfrage prefers-reduced-motion auslesen. Ist sie aktiv, sollten Animationen stillstehen oder auf eine ruhige Überblendung schrumpfen. Das gilt auch für Kleinigkeiten wie Lade-Platzhalter, weiches Scrollen zu Sprungmarken und Hover-Effekte. Wer die Einstellung gesetzt hat, hat einen Grund dafür.
Pause, Stopp, Ausblenden
Bewegung, die von selbst startet, länger als fünf Sekunden läuft und neben anderen Inhalten steht, muss sich anhalten lassen. So verlangt es das Erfolgskriterium 2.2.2 der WCAG. Das betrifft Bild-Slider auf der Startseite ebenso wie Laufschriften mit Urlaubshinweisen. Ein gut sichtbarer Schalter direkt beim Effekt ist besser als eine versteckte Einstellung. Die Wahl sollte für die ganze Website gelten und beim nächsten Besuch noch da sein.
Kein Blitzen
Nichts auf einer Website darf öfter als dreimal pro Sekunde aufblitzen (WCAG 2.3.1). Besonders riskant sind große, gesättigt rote Flächen und harte Wechsel zwischen Hell und Dunkel. Ein Herzschlag- oder EKG-Effekt sollte deshalb weich pulsieren und nie eine ganze Fläche umschalten. Am sichersten ist, gar nicht zu blinken.
Welche WCAG-Kriterien für Animationen gelten
| Kriterium | Stufe | Was es verlangt |
|---|---|---|
| 2.2.2 Pausieren, Beenden, Ausblenden | A | Automatische Bewegung über fünf Sekunden lässt sich anhalten oder ausblenden. |
| 2.3.1 Grenzwert von drei Blitzen | A | Nichts blitzt öfter als dreimal pro Sekunde. |
| 2.3.3 Animation durch Interaktionen | AAA | Bewegung, die durch Scrollen oder Klicken entsteht, lässt sich abschalten. |
Die Stufen A und AA sind der übliche Maßstab, auch für das Barrierefreiheitsstärkungsgesetz, das sich auf die europäische Norm EN 301 549 stützt. Stufe AAA ist freiwillig. Wir setzen 2.3.3 trotzdem um, weil es gerade Patienten mit Schwindel schützt. Ob das BFSG für Ihre Praxis gilt, erklären wir unter Recht und Datenschutz.
Checkliste für Ihre Praxis-Website
- Startet etwas von selbst? Dann gibt es einen Pause-Schalter.
- Steht alles still, wenn „Bewegung reduzieren“ aktiv ist?
- Blitzt irgendetwas schneller als dreimal pro Sekunde?
- Bewegt sich beim Scrollen der ganze Bildschirm?
- Ist jede Information auch ohne Animation lesbar, etwa Sprechzeiten in einem Slider?
- Lassen sich interaktive Effekte per Tastatur bedienen?
- Laufen Videos oder Töne automatisch los?
- Pausieren Animationen außerhalb des Sichtbereichs?
Drei Fragen mit Nein? Dann lohnt ein genauer Blick. Im kostenlosen Website-Check prüfen wir auch Effekte und Bewegung.
So halten wir es auf dieser Website
EKG-Linie, Doppelhelix und das Modell im Praxis-Kreislauf laufen nur, solange sie sichtbar sind. Bei „Bewegung reduzieren“ stehen sie still, und oben im Monitor-Bereich sowie in der Fußzeile lassen sie sich anhalten. Der Puls pulsiert weich, ohne Blitze. Die Seite für Psychotherapie-Praxen verzichtet ganz auf Bewegung, weil Ruhe dort zur Botschaft gehört.
FAQ
Häufige Fragen zu barrierefreien Animationen
Was ist prefers-reduced-motion?
Eine CSS-Abfrage, mit der eine Website erkennt, ob im Betriebssystem „Bewegung reduzieren“ eingestellt ist. Ist das der Fall, sollten Animationen stillstehen oder durch ruhige Überblendungen ersetzt werden.
Wie oft darf etwas auf einer Website blinken?
Höchstens dreimal pro Sekunde, so verlangt es WCAG 2.3.1. Besser ist, gar nicht zu blinken, vor allem nicht mit großen roten Flächen oder harten Hell-Dunkel-Wechseln.
Brauchen Animationen einen Pause-Schalter?
Ja, wenn sie automatisch starten, länger als fünf Sekunden laufen und neben anderen Inhalten stehen (WCAG 2.2.2). Das gilt auch für Bild-Slider und Laufschriften auf der Startseite.
Sind Parallax-Effekte barrierefrei?
Meist nicht. Große Bewegungen beim Scrollen können bei Menschen mit Gleichgewichtsstörungen Schwindel und Übelkeit auslösen. Auf Praxis-Websites verzichten wir deshalb darauf.
Darf eine Praxis-Website Animationen haben?
Ja, dezente und abschaltbare Animationen sind kein Problem. Sie sollten etwas erklären oder den Blick lenken, nicht dekorieren. Für psychotherapeutische Praxen empfehlen wir, ganz auf Bewegung zu verzichten.
Verlangt das BFSG barrierefreie Animationen?
Wenn das Barrierefreiheitsstärkungsgesetz für Ihre Website gilt, ja. Es stützt sich auf die Norm EN 301 549, die die WCAG-Kriterien der Stufen A und AA übernimmt, darunter Pause-Schalter und Blitz-Grenzwert. Den Einzelfall klären Sie rechtlich, eine Rechtsberatung ersetzen wir nicht.
Was kostet es, eine Praxis-Website barrierefrei zu machen?
Prüfung und Umsetzung nach WCAG kosten 950 € netto. Für bestehende Websites gibt es den BFSG-Quick-Fix ab 790 € netto über mannheims-webdesign.de, der die häufigsten Barrieren behebt.
Wie prüfe ich Animationen auf meiner Website selbst?
Schalten Sie in den Systemeinstellungen „Bewegung reduzieren“ ein und laden Sie die Website neu. Bewegt sich noch etwas, fehlt die Abfrage. Danach gehen Sie die Checkliste in diesem Artikel durch oder nutzen unseren kostenlosen Website-Check.
Nächster Schritt
Bewegt sich Ihre Website zu viel?
Im kostenlosen Erstgespräch bis 30 Minuten schauen wir uns Effekte, Slider und Lesbarkeit Ihrer Praxis-Website an.
Hans-Sachs-Ring 215, 68199 Mannheim
0621 981 894-10 · mobil 0179 44088 26