E-Commerce Barrierefrei

Screenshot: Das Marketing-Karussell auf der Startseite von ecbf.shop.

Wenn man über Animationen im E-Commerce-Kontext spricht, fallen einem meist als erstes Elemente ein, die auch außerhalb von Online-Shops existieren: Sogenannte Karussells, manchmal auch „Slider“ genannt. Diese transportieren entweder Informationen zu Produkten, Produktarten oder Dienstleistungen oder dienen schlicht dazu, Emotionen einzusetzen und Stimmungen zu erzeugen, die letztendlich zu einem Kauf oder Vertragsabschluss führen sollen. Dass diese Informationen oder Emotionen per Bebilderung für alle zugänglich sein müssen, erklärt das Modul zu Medien und Alternativtexten.

Ein Problem mit der Barrierefreiheit entsteht allerdings, wenn sich diese Marketing-Karussells automatisch animieren, also zum Beispiel nach X Sekunden für einen automatischen Folienwechsel sorgen. Animationen dieser Art auf Websites können bei Menschen mit Gleichgewichtsproblemen Störungen der Balance bis sogar Anfälle auslösen (weitere Informationen finden sich zu dem Thema unter dem medizinischen Begriff „vestibular“). Aber auch ohne die genannten Probleme kann ein sich automatisch bewegender Inhalt kognitive Barrieren entstehen lassen, denn er lenkt von einem anderen Seiteninhalt durch seine Animation ab. Das kann insbesondere für Menschen mit Aufmerksamkeitssyndromen (wie ADHD) die Nutzung des Webdokumentes sehr erschweren, mindestens ist es aber ein Nervfaktor, wie wir ihn vermutlich alle von selbststartenden und animierten Werbebannern kennen.

Aus diesem Grund gibt es in der WCAG (Web Content Accessibility Guidelines) seit Version 2.0 (also schon 2008) einen Prüfschritt, der mindestens die Abschaltbarkeit von Animationen erfordert, sollte diese automatisch starten und parallel zu einem anderen Inhalt existieren. Da Erfolgskriterien in der WCAG abstrakt formuliert sind und ein Maximum an Use Cases abdecken wollen, ist die sinngemäße Kern-Formulierung:

Sich bewegende, scrollende oder blinkende Inhalte, deren Animation automatisch startet, länger als fünf Sekunden anhält und parallel zu einem anderen Inhalt existiert, muss Mechanismen anbieten, um diese Bewegung, anzuhalten, sie zu stoppen oder zu verstecken.

Was heißt das für unser Marketingkarussell? Der Meinung von Nutzungs-Expert*innen (englisch), nach ist dieses Muster ohnehin zumeist nicht sehr wirksam und einfach unzugänglich zu bauen. Insofern ist der einfachste Weg, ein Karussell und seine Animationen barrierefrei zu machen einfach ganz auf dieses Pattern zu verzichten. Ist dies aber aus „innenpolitischen“ Gründen nicht möglich und muss das Karussell sogar aufgrund des Konzepts automatisch starten, so ist es das Mindeste, eine deutliche, gut erreichbare und einfach wahrnehmbare Möglichkeit zum Pausieren des automatischen Folienwechsels anzubieten. Unter dieser Adresse mit URL-Parameter lässt sich eine solche Implementierung im ecbf.shop-Dummy einsehen.. Das dortige Karussell-Skript selbst basiert auf dem W3C-Carousel-Tutorial von Eric Eggert und ist nur minimal für Demonstrationszwecke angepasst.

Neben den ausdrücklichen Abstell- oder Versteckmöglichkeiten von Animationen, wie sie von der WCAG gefordert und weiter oben erläutert sind, gibt es auch eine Möglichkeit, im Betriebssystem gesetzte Präferenzen für Animationen zu setzen und diese mit Webtechnologien auszulesen. Dies passiert in Form eines Media Queries, der prefers-reduced-motion heißt (was sich mit „bevorzugt reduzierte Bewegungen“ übersetzen lässt). Diese Animations-Präferenz lässt sich auf allen Desktop- wie Mobilbetriebssystemen vornehmen und per CSS und auch JavaScript auslesen. Während wahrscheinlich die meisten diese Abfragen im Zusammenhang mit „responsiven Design“ und der aktuellen Viewport-Breite kennen, kann man diese Art der Abfrage von Nutzerpräferenzen einer neuen Generation von Media Queries zuordnen, die man mit gutem Gewissen „Preference Queries“ (also im weitesten Sinne: Einstellungs-Abfragen) nennen kann. Neben zentralen Präferenzen im Bezug auf Animationen sind aktuell schon Abfragen zum systemweiten Kontrast, Farbschema oder Datenlimits konzipiert.

Der Beispiel-Shop-Dummy demonstriert dies auf einer Sonderseite zum Thema Weihnachtsgeschenke. Hat der oder die Benutzer*in keine Animations-Präferenz gesetzt (also auch keinen ausdrücklichen Wunsch in Richtung „wenig Animationen“ ausgesprochen), so wird dies per JavaScript ausgelesen, und der body bekommt die Klasse allows-animation:

const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)');

if (mediaQuery.matches ) {
    document.body.classList.add('allows-animation');
}
// usw.

Im CSS wiederum reagiert die Animation auf die Existenz der Klasse und startet die Animation:

.allows-animation {
    // usw.

  .xmas-pine_branch {
    animation: color 5s linear infinite;
  }
}

Selbstverständlich muss - für diese Animation allein - man nicht den Umweg über eine Erkennung per JavaScript gehen; ein direktes Reagieren per CSS-Media Query ist ebenfalls ein denkbarer Weg. Allerdings bietet die Shop-Beispielimplementation zusätzlich noch einen Button an, der die Klasse allows-animation ebenfalls eben mithilfe von JavaScript ergänzen oder entfernen kann:

button.addEventListener('click', () => {

      if (button.getAttribute('aria-pressed') === "false") {
        // Animation ausstellen
        document.body.classList.remove('allows-animation');
        button.setAttribute('aria-pressed', 'true');
        localStorage.setItem('animating', 'false');
      } else {
        // Animation anstellen
        document.body.classList.add('allows-animation');
        button.setAttribute('aria-pressed', 'false');
        localStorage.setItem('animating', 'true');
      }
    }

Außerdem ist im obigen Codebeispiel zu sehen, dass wir die Einstellung – wenn sie durch einen ausdrücklichen Klick auf eine Schaltfläche deutlich wird – lokal im localStorage zwischen speichern. Wird dann die Seite erneut aufgerufen, startet die Animation nur, wenn sich im Local Storage oder in den Betriebssystem-Präferenzen kein ausdrücklichen Animationsverbote finden (sei das durch eine in der Vergangenheit ausgestellte Animation oder eine allgemeine Präferenz, was bewegte Inhalte angeht).

Im Gegensatz zu eindeutigen Klicks (und etwaig gespeicherten Animationseinstellungen) ist aktuell in der Diskussion, ob das „Hören“ auf prefers-reduced-motion allein ein Weg ist, WCAG Erfolgskriterium 2.2.2 zu erfüllen. Der geschätzte Kollege Hidde de Vries kam schon Ende 2021 zum Schluss: Ja, rein dogmatisch kann es ausreichen, um 2.2.2 zu erfüllen, aber in Anbetracht der Usability und der allgemeinen Bekanntheit dieser Einstellungen sind ausdrückliche Schaltflächen in unmittelbarer Nähe wohl der empfehlenswertere Weg (englisch). Und dieser Einschätzung schließe ich mich an. Somit sollten beispielsweise Marketing-Karussells, wenn sie schon automatisch startend existieren müssen, mit expliziten Einstellungen zum Pausieren aufwarten. Zusätzlich sollte aber auch die Animationseinstellung des Betriebssystems berücksichtigt werden. Anhand des Beispielcodes auf ecbf.shop ist zu sehen, wie diese Präferenz per JavaScript ausgelesen und im Idealfall beim Berücksichtigen eines Karussell-Autostarts berücksichtigt werden kann.

Übung

Lückentext

Animationen ohne eine vorherige User-Interaktion zu starten kann eine Beispiellücke sein. Man sollte sie am besten vermeiden, aber wenn man schon ein Karussell („Slider“) mit Autostart einsetzt, ist das mindeste, Beispiellücke anzubieten. Dieser muss allerdings deutlich erkennbar, im Kontext Beispiellücke und natürlich selbst barrierefrei sein.

Weiterhin bieten Betriebssysteme auch Einstellungen zu Animations-Vorlieben an. Mit der Abfrage Beispiellücke kann diese als Mediaquery in CSS und Beispiellücke ausgelesen werden.

Zusammenfassung

Animationen sind im Web verbreitet, in Online-Shops häufig in Form von Marketing-Karussells (auch häufig „Slider“ genannt).
Automatisch startende Animationen, wie z. B. Folienwechsel in diesen Karussells können für eine bestimmte Nutzer*innengruppe problematisch sein. Deswegen verlangt die WCAG, dass automatisch startende Animationen über fünf Sekunden dauer pausier-, stop- oder versteckbar sein müssen.
Dieser Mechanismus muss im direkten Kontext der Animation stehen, konkret im Karussell heißt das meist, dass die Foliennavigation ein guter Ort für eine solche Schaltfläche ist.
Mit dem Mediaquery prefers-reduced-motion lassen sich im Betriebssystem hinterlegte Präferenzen zu Animationen per CSS und JavaScript abfragen. Diese Einstellung sollte z. B. bestimmen, ob ein Karussell mit automatischen Folienwechseln startet.