WCAG 2.2.2: Pause, Stopp, Ausblenden

Was diese Regel bedeutet

WCAG 2.2.2 (Pause, Stop, Ausblenden) ist ein Erfolgskriterium der Stufe A unter dem Prinzip „Bedienbar“. Es regelt alle Inhalte auf einer Seite, die sich bewegen, blinken, scrollen oder automatisch aktualisiert werden. Die Regel legt zwei unterschiedliche Anforderungen fest, je nachdem, wie sich der Inhalt verhält:

Für sich bewegende, blinkende oder scrollende Inhalte, die automatisch starten, länger als fünf Sekunden dauern und zusammen mit anderen Inhalten präsentiert werden, muss den Nutzern ein Mechanismus zum Pausieren, Stoppen oder Ausblenden zur Verfügung gestellt werden. Dies umfasst CSS-Animationen, JavaScript-gesteuerte Karussells, Marquee-Text, blinkende Elemente, scrollende Ticker und animierte Banner.

Für automatisch aktualisierte Inhalte – wie Live-Ergebnisanzeigen, Börsenticker, Social-Media-Feeds oder Nachrichtenüberschriften, die in Intervallen aktualisiert werden – müssen Nutzer in der Lage sein, die Aktualisierungen zu pausieren, zu stoppen, auszublenden oder die Häufigkeit der Aktualisierungen zu steuern.

Ein Bestehen setzt voraus, dass eine klar bedienbare Steuerung (eine Schaltfläche, Tastenkombination oder ein ähnlicher Mechanismus) vor oder neben dem animierten Inhalt verfügbar ist, sodass Nutzer ihn einfrieren oder entfernen können, ohne Hilfe zu benötigen. Die Steuerung selbst muss zugänglich sein – per Tastatur erreichbar, korrekt beschriftet und ohne Maus nutzbar.

Ein Nichtbestehen liegt vor, wenn eines der folgenden Elemente vorhanden ist: ein <blink>-Element oder CSS text-decoration: blink, das nicht gestoppt werden kann; ein <marquee>-Element ohne Pausenmechanismus; ein animiertes Karussell, das unbegrenzt abläuft und keine Pausentaste hat; ein sich automatisch aktualisierendes Nachrichten-Widget, das nicht gesteuert werden kann; oder ein in Schleife laufendes Hintergrundvideo, das sich nicht stoppen lässt.

WCAG definiert zwei ausdrückliche Ausnahmen. Erstens gilt die Regel nicht für Animationen, die fünf Sekunden oder weniger dauern, da kurze Bewegungen, die von selbst enden, keine anhaltende Ablenkung erzeugen. Zweitens gilt sie nicht, wenn die Animation wesentlich für die Aktivität ist – zum Beispiel eine Echtzeit-Börsenhandelsoberfläche, bei der Live-Preise der gesamte Zweck der Seite sind und deren Pausieren die Natur des Inhalts grundlegend verändern würde. Diese Ausnahmen sind eng gefasst und sollten nicht als pauschale Ausrede genutzt werden, um auf eine Implementierung zu verzichten.

Warum das wichtig ist

Sich bewegende und blinkende Inhalte schaffen erhebliche Barrieren für mehrere unterschiedliche Gruppen von Menschen mit Behinderungen, und die Folgen reichen von leichter Ablenkung bis hin zu ernsthaften gesundheitlichen Schäden.

Menschen mit Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) oder anderen kognitiven Beeinträchtigungen finden es oft unmöglich, sich auf den Hauptinhalt einer Seite zu konzentrieren, wenn sich animierte Elemente in ihrem peripheren Sichtfeld befinden. Das menschliche Gehirn ist neurologisch darauf ausgelegt, Bewegung als Überlebensmechanismus Aufmerksamkeit zu schenken, und Menschen mit ADHS erleben diesen Sog deutlich intensiver als neurotypische Nutzer. Ein scrollender Ticker am unteren Rand einer Nachrichtenseite oder ein animiertes Banner in einer Seitenleiste kann das Lesen des Hauptartikels faktisch unmöglich machen.

Menschen mit vestibulären Störungen – einschließlich Labyrinthitis, benigner paroxysmaler Lagerungsschwindel (BPPV) und Morbus Ménière – können Übelkeit, Schwindel und Desorientierung erleben, wenn sie bestimmten Arten von Bewegung auf dem Bildschirm ausgesetzt sind. Für diese Nutzer ist ein sich wiederholendes Karussell oder ein Parallax-Scrolling-Effekt nicht nur lästig; er kann körperliche Beschwerden verursachen, die sie zwingen, die Seite vollständig zu verlassen. Vestibuläre Störungen betreffen Schätzungen zufolge allein in den Vereinigten Staaten 35 % der Erwachsenen über 40 Jahren.

Menschen mit photosensitiver Epilepsie sind durch Inhalte gefährdet, die mit bestimmten Frequenzen blinken oder flackern. Während flackernde Inhalte direkter durch WCAG 2.3.1 adressiert werden, können blinkende Inhalte, die unter 2.2.2 fallen, ebenfalls ein auslösender Faktor sein. Die Weltgesundheitsorganisation schätzt, dass Epilepsie weltweit etwa 50 Millionen Menschen betrifft.

Für Screenreader-Nutzer schaffen sich automatisch aktualisierende Inhalte ein ebenso störendes Problem. Wenn eine Live-Region aktualisiert wird, geben Screenreader den neuen Inhalt aus, was den Nutzer mitten im Satz unterbricht, während er etwas anderes anhört. Ohne die Möglichkeit, Aktualisierungen zu pausieren, wird die Navigation auf einer Seite mit Live-Inhalten äußerst schwierig.

Betrachten Sie dieses reale Szenario: Eine Nutzerin mit ADHS führt eine Online-Überweisung auf einem türkischen E-Commerce-Banking-Portal durch. Ein rotierendes Werbebanner im Header wechselt alle drei Sekunden zwischen vier Angeboten. Die Nutzerin kann sich nicht darauf konzentrieren, die korrekte Kontonummer einzugeben. Sie macht einen Übertragungsfehler, die Überweisung schlägt fehl, und sie muss den gesamten Vorgang wiederholen. Hätte das Banner eine Pausentaste enthalten, wäre die Aufgabe unkompliziert gewesen. Dies ist kein hypothetischer Fall – es handelt sich um eine dokumentierte Kategorie von Interaktionsfehlern, auf die Barrierefreiheitsprüfer regelmäßig stoßen.

Über den Zugang für Menschen mit Behinderungen hinaus verbessert das Eliminieren unkontrollierbarer Bewegungen die Benutzerfreundlichkeit für alle, reduziert die kognitive Belastung und kann SEO-Signale wie Core Web Vitals-Werte verbessern, indem Layout-Verschiebungen und unnötige JavaScript-Ausführung reduziert werden.

Verwandte Axe-core-Regeln

• blink: Diese Regel prüft das Vorhandensein des veralteten HTML-Elements <blink> und von CSS-Eigenschaften, die blinkenden Text erzeugen (historisch text-decoration: blink). Das <blink>-Element lässt Text kontinuierlich ein- und ausblenden, ohne dass es einen nativen Mechanismus für den Nutzer gibt, dies zu stoppen. Axe markiert jede Instanz dieses Elements als Verstoß, da es 2.2.2 direkt verletzt – es gibt keinen konformen Anwendungsfall für <blink>. Die Regel warnt auch bei CSS-gesteuerten Blinkeffekten, bei denen die Animation nicht pausiert werden kann. Die automatisierte Erkennung ist hier zuverlässig, da das Element und die Eigenschaft syntaktisch im DOM und in den berechneten Styles identifizierbar sind.
• marquee: Diese Regel prüft das Vorhandensein des HTML-Elements <marquee>, das Text oder Inhalte veranlasst, horizontal oder vertikal in einer Endlosschleife über den Bildschirm zu scrollen. Das <marquee>-Element verfügt über keinen eingebauten, zugänglichen Pausenmechanismus und ist in HTML5 veraltet. Axe markiert jede Instanz als Verstoß. Wie bei <blink> ist die Erkennung unkompliziert, da das Element syntaktisch identifizierbar ist. Automatisierte Tools können jedoch nicht alle Verstöße gegen 2.2.2 erfassen – CSS-Animationen, JavaScript-Karussells, sich automatisch aktualisierende AJAX-Widgets und in Schleife laufende HTML5-Videos erfordern alle eine manuelle Überprüfung, da der Mechanismus zum Pausieren (oder dessen Fehlen) nur von einem menschlichen Tester beurteilt werden kann, der die vollständige interaktive Erfahrung evaluiert.

Wie man testet

1. Automatischer Scan mit axe DevTools oder Lighthouse: Öffnen Sie die Seite in Chrome oder Firefox. Öffnen Sie die DevTools (F12), navigieren Sie zum axe DevTools-Panel oder zum Lighthouse-Accessibility-Audit und führen Sie einen vollständigen Scan durch. Achten Sie in den Ergebnissen speziell auf Verstöße, die als blink oder marquee gekennzeichnet sind. Jeder Verstoß enthält den DOM-Knoten, die Auswirkungsstufe (serious oder critical) und einen Link zu Hinweisen zur Behebung. Beachten Sie, dass ein sauberer automatischer Scan keine vollständige Konformität bedeutet – fahren Sie mit den manuellen Schritten fort.
2. Manuelle Prüfung auf CSS- und JavaScript-Animation: Überprüfen Sie die Seite visuell auf Inhalte, die sich bewegen, scrollen, blinken oder automatisch aktualisiert werden. Prüfen Sie für jede Instanz, ob eine Steuerung zum Pausieren, Stoppen oder Ausblenden vorhanden und sichtbar ist, bevor oder neben dem animierten Inhalt. Vergewissern Sie sich, dass die Steuerung per Tastatur erreichbar ist (mit Tab darauf springen) und dass das Drücken von Enter oder Leertaste sie aktiviert. Prüfen Sie, dass das Aktivieren der Steuerung die Bewegung tatsächlich anhält und nicht nur ihre Geschwindigkeit reduziert.
3. Test nur mit Tastatur: Trennen Sie Ihre Maus. Verwenden Sie die Tab-Taste, um die gesamte Seite zu navigieren. Bestätigen Sie, dass Sie die Pause-/Stopp-Steuerung für jedes animierte Element ausschließlich mit der Tastatur erreichen können und dass die Steuerung einen sichtbaren Fokusindikator hat. Wenn Sie die Steuerung nicht erreichen können oder wenn das Erreichen erfordert, dass Sie zuerst durch den animierten Inhalt tabben (was desorientierend sein kann), ist dies ein Fehler.
4. Screenreader-Test mit NVDA und Firefox: Starten Sie NVDA, öffnen Sie die Seite in Firefox und achten Sie auf Live-Region-Ansagen, die das Lesen unterbrechen. Navigieren Sie zu automatisch aktualisierten Inhalten und bestätigen Sie, dass die Verwendung der Pausensteuerung die NVDA-Ansagen zum Schweigen bringt. Testen Sie mit JAWS und Chrome sowie mit VoiceOver und Safari auf macOS nach demselben Verfahren.
5. Prüfung automatisch aktualisierender Inhalte: Notieren Sie für Inhalte, die in einem Zeitintervall aktualisiert werden (Newsfeeds, Dashboards, Anzeigetafeln), das Aktualisierungsintervall. Bestätigen Sie, dass es einen Mechanismus gibt, um die Aktualisierungen zu pausieren oder die Häufigkeit zu steuern. Lösen Sie die Aktualisierung nach Möglichkeit manuell aus und vergewissern Sie sich, dass Screenreader sie nur dann ansagen, wenn der Nutzer dies wählt, nicht unfreiwillig.
6. Test der Einstellung „Bewegung reduzieren“: Aktivieren Sie in Ihrem Betriebssystem die Barrierefreiheits-Einstellung „Bewegung reduzieren“. Laden Sie die Seite neu und prüfen Sie, ob Animationen die CSS-Media-Query prefers-reduced-motion respektieren. Auch wenn dies nicht strikt von WCAG 2.2.2 gefordert wird, ist es eine starke ergänzende Technik und wird zunehmend von Prüfern erwartet.

Wie man es behebt

Veraltetes <marquee>-Element — Falsch

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Veraltetes <marquee>-Element — Richtig

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Veraltetes <blink>-Element — Falsch

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Veraltetes <blink>-Element — Richtig

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Automatisch abspielendes Karussell ohne Pausensteuerung — Falsch

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Automatisch abspielendes Karussell ohne Pausensteuerung — Richtig

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Automatisch aktualisierendes Live-Daten-Widget — Falsch

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Automatisch aktualisierendes Live-Daten-Widget — Richtig

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Häufige Fehler

• Verwendung von <marquee>- oder <blink>-Elementen irgendwo im produktiven HTML, selbst für „Retro“- oder dekorative Gestaltung – beide Elemente sind veraltet, semantisch bedeutungslos und verstoßen immer gegen 2.2.2, ohne andere Abhilfemöglichkeit als ihre Entfernung.
• Hinzufügen einer Pausentaste, die nur bei Maus-Hover sichtbar ist, wodurch sie für reine Tastaturnutzer, die sie am dringendsten benötigen und typischerweise mit Tab statt mit Hover navigieren, unzugänglich wird.
• Implementierung einer Pausentaste, die per Tab-Taste nicht vor dem animierten Inhalt im DOM erreichbar ist, sodass Nutzer gezwungen sind, zunächst durch die desorientierende Bewegung zu navigieren, bevor sie sie stoppen können.
• Verwendung von animation-play-state: paused in CSS, um die Animation visuell zu stoppen, ohne gleichzeitig die JavaScript-Schleife setInterval oder requestAnimationFrame, die die Inhaltsaktualisierungen steuert, zu deaktivieren – das visuelle Erscheinungsbild stoppt, aber das DOM ändert sich weiter und unterbricht weiterhin Screenreader.
• Setzen von aria-live='polite' auf ein Karussell oder einen Ticker und Belassen dieser Einstellung, selbst wenn der Nutzer auf Pause gedrückt hat – die Live-Region kündigt weiterhin DOM-Änderungen für Screenreader-Nutzer an, obwohl die visuelle Animation eingefroren ist.
• Verlassen auf autoplay=false bei einem <video>-Element, ohne das Verhalten in verschiedenen Browsern zu überprüfen; einige Browser- und Plugin-Kombinationen überschreiben dieses Attribut, sodass Videos automatisch abgespielt werden – entgegen der Absicht des Autors und der Erwartung des Nutzers.
• Behandlung der Fünf-Sekunden-Ausnahme als allgemeine Schonfrist und Erstellung eines Karussells, das jede Folie vier Sekunden lang anzeigt, in der Annahme, dass jede einzelne Folienübergangsphase unter fünf Sekunden liegt – die Animation als Ganzes ist kontinuierlich und dauert weit länger als fünf Sekunden, sodass die Ausnahme nicht gilt.
• Bereitstellung einer Pausensteuerung, die die Animation stoppt, aber den Pausenstatus nicht visuell anzeigt, sodass Nutzer unsicher sind, ob ihre Aktion eine Wirkung hatte – die Schaltfläche muss ihren aktuellen Zustand widerspiegeln, idealerweise mit aria-pressed und einer Beschriftung, die zwischen „Pause“ und „Play“ wechselt.
• Anwendung von prefers-reduced-motion nur auf CSS-Übergänge und Ignorieren von JavaScript-gesteuerten Animationen, die unabhängig von CSS ablaufen, was bedeutet, dass Nutzer, die die systemweite Einstellung „Bewegung reduzieren“ aktiviert haben, weiterhin Bewegung auf der Seite erleben.
• Platzierung der Pausensteuerung außerhalb der Tastatur-Tab-Reihenfolge durch Setzen von tabindex='-1' oder durch Einschließen in einen Container mit display:none, der nur bei Mausinteraktion bedingt angezeigt wird – die Steuerung muss immer über die Tastaturnavigation erreichbar sein.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Der Präsidialerlass Nr. 2025/10 der Türkei, veröffentlicht im Amtsblatt (Resmî Gazete) mit der Nummer 32933 am 21. Juni 2025, legt verbindliche Anforderungen an die Barrierefreiheit von Web- und mobilen Angeboten fest, die an WCAG 2.2 ausgerichtet sind. WCAG 2.2.2 Pause, Stop, Ausblenden ist ein Kriterium der Stufe A, was bedeutet, dass es sich auf der grundlegendsten Ebene der Konformität befindet und für alle vom Erlass erfassten Stellen ausnahmslos verpflichtend ist.

Der Erlass sieht gestaffelte Fristen für die Konformität vor: öffentliche Institutionen und Körperschaften müssen innerhalb eines Jahres nach dem Veröffentlichungsdatum des Erlasses vollständige Konformität mit Stufe A erreichen, und private Unternehmen müssen dies innerhalb von zwei Jahren tun. Es gibt keine freiwillige Teilnahme – der Erlass begründet eine gesetzliche Verpflichtung, und nicht konforme digitale Angebote unterliegen der administrativen Aufsicht und möglichen Durchsetzungsmaßnahmen.

Die vom Erlass erfassten Stellen umfassen einen breiten Querschnitt türkischer digitaler Dienste: alle öffentlichen Institutionen und Regierungsstellen; E-Commerce-Plattformen, die in der Türkei tätig sind; Banken und Finanzdienstleister; Krankenhäuser und private Gesundheitsdienstleister; Telekommunikationsanbieter mit 200.000 oder mehr Abonnenten; Reisebüros; private Transportunternehmen; und Privatschulen mit Genehmigung des Ministeriums für Nationale Bildung (Millî Eğitim Bakanlığı, MoNE).

Für diese Stellen hat WCAG 2.2.2 direkte und praktische Auswirkungen. Eine E-Commerce-Website mit einem automatisch abspielenden Produktkarussell ohne Pausentaste verstößt gegen die Vorgaben. Ein Internetbanking-Portal einer Bank, das einen scrollenden Sicherheitshinweis-Ticker ohne Stopp-Steuerung verwendet, ist nicht konform. Eine Terminbuchungsseite eines Krankenhauses, die animierte Hinweise verwendet, die nicht angehalten werden können, erfüllt die Anforderungen nicht. Die Startseite eines Telekommunikationsunternehmens mit einem in Schleife laufenden Hintergrundvideo ohne sichtbare Stopp-Steuerung muss vor Ablauf der Frist überarbeitet werden.

Über die gesetzliche Verpflichtung hinaus steht das türkische Barrierefreiheitsrecht im Einklang mit dem breiteren europäischen Trend, der durch die EU-Webzugänglichkeitsrichtlinie und den European Accessibility Act (EAA) verkörpert wird. Wenn türkische Unternehmen in europäische Märkte expandieren oder europäische Nutzer bedienen, wird die Konformität mit WCAG 2.2 Stufe A – einschließlich Kriterium 2.2.2 – zu einer doppelten Compliance-Anforderung. Die korrekte Implementierung von Pause, Stop, Ausblenden ist daher sowohl eine inländische rechtliche Notwendigkeit als auch ein strategischer Vorteil für türkische Organisationen mit internationaler digitaler Präsenz.