Animationen ausblenden

Bewegter Inhalt kann zu Schwindelgefühl und anderen Irritationen führen. Das Ausblenden bewegter Inhalte verhindert derartige Beeinträchtigungen. Ein entsprechender Mechanismus ist insbesondere für Inhalte geeignet, die überwiegend zur Behübschung einer Webseite dienen.

Beispiel: Bildkarussell mit Ausblendmechanismus

Ein Bildkarussell , auch als Diashow bezeichnet, ist eine animierte Darstellung von Bildern. Gewöhnlich werden einzelne Fotos automatisch in einer Endlosschleife eingeblendet.

Im folgenden Beispiel wird eine Diashow mit vier Landschaftsfotos dargestellt. Vor der Diashow befindet sich ein Schalter zum Ausblenden der gesamten Animation. Der Schalter dient gleichzeitig zum erneuten Einblenden der Animation und ist entsprechend beschriftet.

Das gesamte Bildkarussell wird für Screen Reader im Folgenden als einzelnes Bild realisiert. Im Karussell werden Serpentinen, eine Küstenlandschaft, eine blumige Dorfstaße und Distelköpfe angezeigt.

Technische Realisierung

Der Mechanismus zum Verbergen des Bildkarussells wurde in diesem Beispiel mit dem details -Element realisiert. Damit die Animation zunächst sichtbar ist, wird im Element das Attribut open hinzugefügt:

<details open>

WCAG Kontext

Das Erfolgskriterium 2.2.2 verlangt für Animationen einen Mechanismus zum Anhalten, Abbrechen oder Verbergen. Eine Verletzung der Anforderungen wird im Konformitätserfordernis 5 als absoluter Störfaktor eingestuft. Animationen können das Surfen auf einer Webseite rundum verunmöglichen.