HTML Elemente

Bewegung ausblenden

Bewegter Inhalt kann zu Schwindelgefühl und anderen Irritationen führen. Das Ausblenden bewegter Inhalte verhindert derartige Beeinträchtigungen. Das Verbergen von Animationen ist zulässig, wenn die Inhalte und Funktionalitäten auf der Webseite auch in anderer Form verfügbar sind.

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.

Diashow aus- / einblenden

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

Störfaktor Animation

Die Darstellung von Inhalten in einem Karussell ist aus der Perspektive der Nutzungsfreundlichkeit und Barrierefreiheit selten eine gute Idee. Sie werden trotzdem verwendet, weil viele das machen und weil sie als visuelle Attraktion gelten.

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.

Barrierefreie Alternative für Verborgenes

Mechanismen zum Verbergen von störenden Inhalten sind zulässig, sofern eine konforme Alternative verfügbar ist. Die konforme Alternative befindet sich wohl meist bestenfalls auf derselben Webseite.

Eine Diashow kann im Sinne der WCAG nicht als rein dekorativ eingestuft und ohne Alternative einfach verborgen werden. Selbst wenn viele sehbehinderte Menschen solche Animationen als nervige Behübschung ansehen, interessieren sich andere für die visuelle Realisierung und dargestellte Bilder auf Webseiten. Die verwendeten Bilder benötigen daher im Sinne des Erfolgskriteriums 1.1.1 beschreibende Alternativtexte.