Die 5 Prinzipien einer accessible Slideshow
Kommentare

Slideshows oder Karussels gehören bei vielen Produktpräsentationsseiten heutzutage zum guten Ton. Dabei haben die meisten Slideshows jedoch ein gemeinsames Problem: sie erfüllen nur selten die Grundregeln der Accessibility im Web – sei es, weil sich niemand beim Design-Team drum kümmert, oder weil es zu viele Accessibility-Voraussetzungen gibt, sodass einige einfach übersehen werden.

Dazu kommt, dass viele beliebte Toolkits, die beim Erstellen von Slideshows zum Einsatz kommen, nicht auf Anhieb für die notwendige Accessibilty sorgen, sondern erst deutliche Änderungen vorgenommen werden müssen.

Doch welche Accessibility-Auflagen gibt es überhaupt für Slideshows? Gian Wild verdeutlicht dies anhand von fünf Prinzipien, die beim Erstellen einer zugänglichen Slideshow beachtet werden sollten.

5 Prinzipien für zugängliche Slideshows

Grundsätzlich gibt es zwei verschiedene Arten von Slideshows: einerseits Slideshows, bei denen mit Kreisen auf die einzelnen Slides hingedeutet und zwischen ihnen navigiert wird, andererseits Slideshows, bei denen die Navigation über Rechts- und Linkspfeile erfolgt. Beide Arten werden jedoch schnell zum Stolperstein für die Accessibility, weil sie meist weder pausiert noch mit der Tastatur navigiert werden können.

Tatsächlich sind dies aber nur zwei der Punkte, die bei der Erstellung einer zugänglichen Slideshow beachtet werden müssen. Gian Wild nennt insgesamt fünf Prinzipien, die eine zugängliche Slideshow erfüllen muss.

Prinzip 1: dem User ermöglichen, die Slideshow anzuhalten

Die Slideshow soll durch die Bewegung beim Wechsel der einzelnen Slides vor allem die Aufmerksamkeit des Websitebesuchers auf sich ziehen und wird daher gern genutzt, um neue oder besonders interessante Produkte und Informationen vorzustellen. Allerdings wirkt eine Slideshow oft ablenkend; der User muss darum die Möglichkeit haben, sie komplett anzuhalten – und zwar entweder mit der Maus, der Tastatur oder über Touch auf mobilen Devices.

Prinzip 2: sichtbare Steuerelemente für Tastatur, Maus und Touch bereitstellen

Das Problem vieler Slideshows ist nicht das Fehlen sichtbarer Steuerelemente, sondern deren Größe und Zugänglichkeit. So sind die Steuerelemente meist zu klein oder heben sich farblich nicht oder kaum vom dahinterliegenden Content ab. Bei der Erstellung von zugänglichen Slideshows sollten darum für die Steuerung die folgenden vier Punkte bedacht werden:

  • Gibt es Steuerelemente zum Starten, Stoppen und Navigieren der einzelnen Slides?
  • Sind die Steuerelemente ausreichend groß und erfüllen die Farbkontrast-Auflagen?
  • Hebt sich die Fokus-/Hover-Indikation genügend vom Default-Zustand ab und bietet ausreichend Kontrast zum Content der Slideshow?
  • Können die Steuerelemente mit der Maus, Tastatur und über Touch bedient werden?

Gerade bei der Accessibility von Slideshows auf Mobile Devices müssen bei der Steuerung einige zusätzliche Voraussetzungen erfüllt werden. So muss der Pause-Button nicht nur groß genug sein, um mit Touch problemlos bedient zu werden, sondern es sollte auch visuell angezeigt werden, wenn durch scrollen oder swipen weitere Slides aufgerufen werden können. Genauso sollten alle Aktionen erst beim Entfernen des Fingers vom Device ausgeführt werden, anstatt beim ersten Berühren.

Prinzip 3: eine valide und verständliche Fokus-Reihenfolge bereitstellen

Auch die Fokus-Reihenfolge ist eine wichtige Accessibility-Auflage. Dabei sollte der Fokus zwar das sichtbare Layout widerspiegeln, gleichzeitig aber die Steuerung vor dem Content kommen. Zudem sollte sichergestellt werden, dass die Aktivierung eines Steuerelements nicht den Content vor dem aktuellen Fokus verändert. Ganz ohne Kompromisse wird man hier allerdings wohl nicht auskommen – gerade, wenn HTML-Elemente zum Einsatz kommen, die keinen Keyboard-Fokus akzeptieren. In dem Fall muss ein wenig mit JavaScript nachgeholfen werden.

Prinzip 4: valides Codieren und Stylesheets

Zeigt man nur ein Slide nach dem anderen, ist das meist zwar nicht übermäßig hübsch, aber zweckmäßig – und vor allem accessible. So muss die Slideshow bei deaktivierten Stylesheets nicht funktionieren, ihr Content aber verfügbar sein. Der Content sollte sich bei deaktivierten Stylesheets nicht überlagern; zudem muss der Text innerhalb der Slideshow vergrößert werden, wenn der User die Textgröße im Browser ändert. Für die Verwendung von Slideshows auf Mobile Devices gilt außerdem, dass sie Zoom unterstützen müssen.

Prinzip 5: Alternativen bereitstellen

Angesichts der Tatsache, dass es noch immer zahlreiche ältere Browser gibt, die viele neue Technologien, die in Slideshows zum Einsatz kommen, nicht unterstützen, muss für solche Fälle eine Alternative bereitgestellt werden. So kann beispielsweise der Text der einzelnen Slides sowie zugehörige Links in einem für Screenreader ausgelegten Bereich angelegt und ein „Slideshow überspringen“-Link hinzugefügt werden. Dabei ist es wichtig, dass die Alternative der Slideshow gleichgestellt ist – gerade, was die Einbindung von Links angeht.

Accessibility spielt im Web eine immer größere Rolle. Wer nicht auf die Erstellung einer Slideshow verzichten will, muss daher viele Voraussetzung beachten, um sie so zugänglich wie möglich zu machen. Dann jedoch kann eine Slideshow ein nützlicher Hingucker für die Präsentation auf der eigenen Website werden, anstatt den Websitebesucher bei der Nutzung der Seite unnötig zu beeinträchtigen.

Aufmacherbild: old slides and a magnifying glass on green table von Shutterstock / Urheberrecht: Laborant

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -