2.2.2 - Pause, Stopp, Ausblenden

A 2.0 Umsetzung

Ziel

Benutzern die Möglichkeit geben, bewegte, blinkende, scrollende oder automatisch aktualisierte Inhalte zu pausieren, zu stoppen oder auszublenden, um Ablenkung zu minimieren und die Nutzung der Webseite zu erleichtern.

Beschreibung

Bewegen, Blinken, Scrollen:
- Automatisch startende Inhalte, die länger als fünf Sekunden dauern und parallel zu anderen Inhalten dargestellt werden, müssen pausierbar, stoppbar oder ausblendbar sein.
- Ausnahme: Wenn die Bewegung, das Blinken oder das Scrollen wesentlicher Bestandteil einer Aktivität ist.
Automatische Aktualisierung:
- Automatisch aktualisierte Inhalte, die parallel zu anderen Inhalten dargestellt werden, müssen steuerbar (Pausieren, Stoppen oder Frequenzsteuerung) sein.
- Ausnahme: Wenn die automatische Aktualisierung für die Aktivität unerlässlich ist.
Zusätzliche Anforderungen:
- Inhalte dürfen nicht automatisch starten, wenn sie nicht durch den Benutzer ausgelöst wurden.
- Blinkende Inhalte müssen nach spätestens fünf Sekunden enden.
- Mechanismen wie Pause-, Stop- oder Ausblenden-Schaltflächen müssen gut sichtbar und zugänglich sein.

Anforderungen

Sichtbare und intuitive Steuerelemente bereitstellen, die bewegte, blinkende oder scrollende Inhalte stoppen, pausieren oder ausblenden können.
Fokusindikatoren und Tastaturbedienbarkeit der Steuerelemente sicherstellen.
Animationen bei Bedarf mit CSS prefers-reduced-motion berücksichtigen.
Implementierung einer Pause- oder Stoppfunktion für animierte Inhalte mit klarer Beschriftung.
Implementierung einer Frequenzsteuerung oder eines Mechanismus zum Anhalten.

Code-Beispiele

Pausierbare Animation:

<div id="animation" style="animation: move 5s infinite;">
  Bewegter Inhalt
</div>
<button onclick="pauseAnimation()">Pause</button>
<button onclick="resumeAnimation()">Weiter</button>
<script>
  function pauseAnimation() {
    document.getElementById('animation').style.animationPlayState = 'paused';
  }
  function resumeAnimation() {
    document.getElementById('animation').style.animationPlayState = 'running';
  }
</script>
<style>
  @keyframes move {
    0% {transform: translateX(0);}
    100% {transform: translateX(100px);}
  }
  #animation {
    width: 100px;
    height: 20px;
    background-color: blue;
  }
</style>

Automatische Aktualisierung steuerbar machen:

<div id="ticker">Aktuelle Nachricht: ...</div>
<button onclick="stopUpdates()">Updates stoppen</button>
<script>
  let tickerInterval = setInterval(() => {
    document.getElementById('ticker').textContent = "Aktualisierte Nachricht: " + new Date().toLocaleTimeString();
  }, 5000);

  function stopUpdates() {
    clearInterval(tickerInterval);
    document.getElementById('ticker').textContent = "Updates gestoppt.";
  }
</script>