Accessibility in Action: Unser barrierefreier Testimonials-Slider nach EAA-Standards
Testimonials sind ein starkes Instrument im Webdesign. Sie schaffen Vertrauen, liefern Social Proof und zeigen, dass hinter einer Zusammenarbeit echte Menschen stehen. Oft sind sie aber in einem Format umgesetzt, das für viele Nutzer:innen nicht zugänglich ist: als animierter Slider oder Carousel. Genau hier zeigt sich, wie wichtig es ist, Design, Technik und Accessibility zusammenzudenken.
Mit dem European Accessibility Act (EAA) ist Barrierefreiheit seit Sommer 2025 für viele digitale Produkte in Europa verpflichtend. Auch kleine UI-Elemente wie ein Slider mit Referenzen von Kund:innen fallen darunter. Für uns war das ein Anlass, unseren eigenen Testimonial-Slider neu zu denken: modern im Design, technisch sauber umgesetzt und für alle Menschen zugänglich.
Warum Testimonials im Webdesign wichtig sind
Unsere Kund:innen geben uns regelmässig gutes Feedback zu unserer Arbeitsweise und empfehlen uns gerne weiter. Viele unserer treuen Kund:innen haben wir durch persönliche Empfehlungen gewonnen. Das ist besonders wertvoll in einem kleinen Land wie der Schweiz und auf einem grossen und unübersichtlichen Markt, wie dem Entwickeln von Internetauftritten.
Diesen Mehrwert wollten wir auch auf unserer Website sichtbar machen. Das Ziel war, dass jedes Projekt in unserem Portfolio zusätzlich auch die Stimme unserer Kund:innen zeigt, in Form einer individuellen Referenz.
«required hat uns dabei unterstützt, unser Online-Stadtmagazin technisch und gestalterisch auf ein neues Level zu heben. Die Zusammenarbeit war jederzeit konstruktiv, lösungsorientiert und angenehm unkompliziert.»
Natascha Klinger, Kommunikation, VBZ
Aus dieser Idee entstand der Testimonials-Slider auf unserer Startseite, der alle Stimmen an einem Ort zusammenführt und so ein authentisches Gesamtbild unserer Arbeit vermittelt. Das hat einen doppelten Nutzen: Interessierte Besucher:innen unserer Website erfahren mehr über unsere Projekte und gleichzeitig sehen sie, wie unsere Zusammenarbeit von Kund:innen wahrgenommen wird.
Warum der EAA auch für Slider relevant ist
Der European Accessibility Act (EAA) verpflichtet Unternehmen, digitale Inhalte so bereitzustellen, dass sie für alle Menschen nutzbar sind, unabhängig von Einschränkungen oder genutzten Geräten. Die Grundlage dafür bilden die Web Content Accessibility Guidelines (WCAG).
Was bedeutet das konkret für einen Slider?
- Er darf nicht automatisch durchlaufen, ohne dass man ihn pausieren kann.
- Er muss mit der Tastatur bedienbar sein.
- Screenreader sollen verständlich ansagen können, welches Element gerade angezeigt wird.
- Inhalte müssen klar strukturiert und lesbar sein.
Gerade bei interaktiven UI-Elementen wie Carousels oder Slidern wird Barrierefreiheit schnell komplex. Aber sie ist lösbar, wenn man sie von Beginn an mitdenkt.
Unser barrierefreier Ansatz für den Testimonials-Slider
Unser Ziel war es, einen ästhetischen, modernen Slider zu bauen, der gleichzeitig alle Accessibility-Anforderungen erfüllt.
Barrierefreies Design
- Visuell ansprechend: Fotos von Kund:innen, Namen, Rollen und Logos der Unternehmen sorgen für Glaubwürdigkeit.
- Lesbarkeit: Klare Typografie, hoher Kontrast und einfache Sprache.
- Sichtbare Steuerung: Buttons zum Weiterklicken sowie ein Play/Pause-Button, damit Autoplay jederzeit gestoppt werden kann.
Technische Umsetzung
- Sauberes HTML: Jedes Testimonial ist als
articleausgezeichnet. - Navigation: Buttons mit
aria-labelwie „nächste Referenz“ oder „vorherige Referenz“. - Screenreader-Support: Das aktive Slide wird durch
aria-live="polite" angekündigt. - Keyboard Support: Der Slider ist komplett mit Tab, Space und Screenreader bedienbar.
- Autoplay mit Kontrolle: Startet sanft und kann jederzeit pausiert werden. Damit erfüllen wir die WCAG-Anforderung, bewegte Inhalte nach spätestens 5 Sekunden stoppen zu können.
- Ihr wollt es ganz genau wissen? Am Ende dieses Artikels folgt ein technischer Deep Dive in die eingesetzten Techniken.
Vorteile für alle Nutzer:innen
- 👀 Menschen mit Sehbehinderungen hören klar, welches Testimonial aktiv ist.
- ⌨️ Menschen mit motorischen Einschränkungen können den Slider per Tastatur bedienen.
- ⏯️ Menschen, die Probleme mit Animationen haben, können die Bewegung mit einem Klick stoppen.
Warum die barrierefreie Umsetzung für Unternehmen wichtig ist
Viele Unternehmen fokussieren sich bei Referenzen auf das Design. Doch spätestens mit dem European Accessibility Act (EAA) reicht das nicht mehr aus. Wer nicht frühzeitig in barrierefreie Weblösungen investiert, riskiert nicht nur rechtliche Probleme, sondern auch, einen Teil der Zielgruppe auszuschliessen.
Ein barrierefreier Slider bringt mehrere Vorteile:
- ⚖️ Rechtliche Sicherheit: Er erfüllt die Anforderungen des EAA.
- ✨ Bessere User Experience: Auch Menschen ohne Einschränkungen profitieren von klarer Struktur und Bedienbarkeit.
- 📈 Imagegewinn: Barrierefreiheit zeigt Verantwortungsbewusstsein und stärkt die Marke.
Unsere wichtigsten Learnings
1. Accessibility muss von Anfang an ins Konzept
Barrierefreiheit lässt sich am besten umsetzen, wenn man sie von Beginn an mitdenkt. Nachträgliche Anpassungen sind nicht nur aufwendiger, sondern sorgen meistens für eine schlechtere Umsetzung, da viel bestehende Arbeit umgeschrieben werden muss.
🛠️
Ein hilfreiches Werkzeug dafür ist HMRC’s Virtual Empathy Hub. Dieses Tool simuliert Personas mit vielfältigen, realistischen Bedürfnissen nach Barrierefreiheit. So bekommt man früh im Projekt ein besseres Gespür dafür, wie vielfältig Nutzer:innen tatsächlich sind und warum Accessibility keine Option, sondern eine Notwendigkeit ist.
2. Design & Technik gehören zusammen
Schöne Animationen und barrierefreie Bedienung schliessen sich nicht aus – im Gegenteil. Mit klaren Steuerungselementen lassen sich beide Ziele erreichen.
3. Testen mit echten Tools
Screenreader, Tastaturnavigation und Farbkontrast-Checks sind Pflicht. Nur so lässt sich sicherstellen, dass eine Lösung wirklich für alle funktioniert.
4. Barrierefreiheit heisst nicht, auf interessante Interaktionen zu verzichten
Um barrierefreie Internetseiten umzusetzen, muss man nicht alle Inhalte schwarz auf weiss und untereinander ausgeben. Man darf sich mit kreativem Design verwirklichen – kein Problem, solange man die Barrierefreiheit stets im Blick hat. So konnten wir ein ansprechendes Karussell mit Autoplay umsetzen, ohne auf die typischen Accessibility-Hürden hereinzufallen.
Technischer Deep-Dive
Ihr wollt es ganz genau wissen? Kein Problem: In diesem Abschnitt teilt der Entwickler unseres barrierefreien Sliders gerne sein Wissen und unsere Herangehensweise.
Hast du auch ein Projekt mit einem ähnlichen Thema?
Brauchst du noch mehr technisches Know-How zu Frontend und Barrierefreiheit?
Jeff ist dein Ansprechpartner. Melde dich bei uns! Wir freuen uns auf neue spannende Herausforderungen.
Accessibility-Herausforderungen bei Testimonials-Slidern
Die Anforderungen an einen barrierefreien Slider mit Autoplay stammen aus den WCAG-2.1-Richtlinien, die die Grundlage für Gesetze wie den European Accessibility Act (EAA) bilden:
- Animationen: Können für manche Menschen störend sein und die Informationsaufnahme beeinträchtigen.
- Autoplay: Kann das Erfassen von Inhalten erschweren und muss jederzeit gestoppt werden können.
- Screenreader: Müssen verstehen, wie viele Slides mit Testimonials es gibt, welche gerade aktiv ist und wie man navigieren kann.
- Tastaturnavigation: Der Slider muss komplett ohne Maus bedienbar sein.
W3C Accessibility Patterns für barrierefreie Slider
Zum Glück muss man sich als Entwickler:in heutzutage nicht mehr selbst den Kopf zerbrechen über jede neue Anforderung. Das World Wide Web Consortium (W3C) – Autor der WCAG-Richtlinien – bietet eine Vielzahl von fertigen Accessibility-Patterns an, unter anderem genau für unseren Fall: Carousels mit Autoplay und Steuerung.
⚠️
Wichtig: Die W3C-Beispiele sind nicht „copy & paste“-fertig für den Einsatz in eigenen Projekten. Aber sie bieten wertvolle Vorlagen. Wir empfehlen es, die Beispiele gründlich durchzulesen und dann eine eigene Implementation vorzunehmen. So kann man verstehen, worauf es technisch tatsächlich ankommt, und die Patterns an das eigene Markup anpassen.
Fünf zentrale Aspekte des Testimonial-Sliders
1. prefers-reduced-motion respektieren
Wenn Besucher:innen in ihren Browsern die Präferenz hinterlegt haben, keine Animationen sehen zu wollen, respektieren wir das und deaktivieren Autoplay komplett. transition’s wird der Browser bei dieser Einstellung von sich aus nicht rendern.
2. Maus- und Tastaturinteraktion
Im W3C-Beispiel ist beschrieben, dass Autoplay sofort stoppen muss, sobald jemand mit dem Slider interagiert. Ansonsten besteht die Gefahr, dass der Inhalt mitten in der Interaktion wechselt und die Besucher:innen aus dem Kontext gerissen werden. Dieses Szenario wäre ärgerlich für alle, nicht nur für Menschen mit Bedürfnissen nach Barrierefreiheit.
Wir stoppen und starten Autoplay also, je nachdem, ob per Maus oder Tastatur mit dem Karussell interagiert wird.
// Pause/resume on interaction.
testimonialsElement.addEventListener( 'mouseenter', pauseOnNavigation );
testimonialsElement.addEventListener( 'focusin', pauseOnNavigation );
testimonialsElement.addEventListener( 'mouseleave', resumeOnNavigation );
testimonialsElement.addEventListener( 'focusout', resumeOnNavigation );Code-Sprache: JavaScript (javascript)3. „Versteckter Consent“ für Autoplay
Spannend im W3C-Beispiel: Sobald jemand erstmals das Karussell selbst pausiert hat, bleibt es pausiert, bis es bewusst wieder gestartet wird. Andersherum wird es nicht mehr automatisch gestoppt, sobald jemand nach der Pause aktiv auf “Play” geklickt hat. Maus- und Tastaturinteraktionen greifen dann nicht mehr.
Das ist ein cleverer Mechanismus, der auf der W3C-Seite gar nicht explizit formuliert wird. Wir nennen ihn “hidden consent” – eine sanfte und pragmatische Art, mit User:innen-Interaktionen umzugehen.
pauseButton.addEventListener( 'click', () => {
autoplayConsent = true;
}
const pauseOnNavigation = () => {
if ( autoplayConsent ) {
return;
}
pauseAutoplay();
};
const resumeOnNavigation = () => {
if ( autoplayConsent ) {
return;
}
resumeAutoplay();
};
Code-Sprache: JavaScript (javascript)4. Bessere UX beim Stoppen und Starten
Beim Umsetzen ist uns ein Stolperstein aufgefallen: Als Entwickler:in liegt es nahe, einen paused-State zu definieren und diesen zu aktivieren, wenn mit dem Slider interagiert wird oder der Pause-Button geklickt. Doch wenn wir Autoplay wirklich bei jeder Interaktion pausieren, verändert das ganze Element seinen Zustand. Der Pause-Button wird dann zum Play-Button, was für Probleme sorgt. Besucher:innen klicken dann ungewollt auf “Play”, statt auf “Pause” und müssen doppelklicken, um zu erreichen, was sie eigentlich wollten.
Unsere Lösung:
- Beim Hovern oder Fokussieren wird Autoplay zwar angehalten, aber der State nicht auf
pausedgesetzt. Dies ist ein eigener Zustand, der sich anders verhält. - Der Pause-Button bleibt visuell Pause-Button. Um noch stärker hervorzuheben, in welchem Zustand sich das Karussell aktuell befindet, läuft Autoplay weiter, sobald man zum Button selbst navigiert.
- Zusätzlich wird der Button dann per Shine-Effekt hervorgehoben.
- Erst ein Klick ändert den Zustand.
Im A/B-Test zwischen beiden Versionen konnten wir deutlich erkennen, dass die zweite und aktuelle Umsetzung für die bessere User Experience sorgt.
5. Screenreader-Output
Damit Screenreader den Inhalt korrekt vorlesen, setzen wir verschiedene HTML-Attribute ein:
| Element | Attribut |
|---|---|
| Container | role="region" |
| Container | aria-roledescription="carousel" |
| Container | aria-label="Referenzen unserer Kund:innen" |
| Liste | aria-live="off" (bei Autoplay) / aria-live="polite" (bei manueller Navigation) |
| Slide | role="group" |
| Slide | aria-roledescription="Folie" |
| Slide | aria-label="*N* von *M*" |
| Buttons | aria-controls="*Container-ID*" |
Besonders wichtig ist aria-live. Das erzeugt eine sogenannte “Live-Region”, deren Inhalte bei Änderungen automatisch vom Screenreader vorgelesen werden. Bei manueller Navigation im Carousel – mit den “Vorherige”- und “Nächste”-Buttons – wird aria-live auf polite gesetzt. Der Screenreader liest dann den Inhalt des neuen aktiven Testimonials vor, was zu einer sehr angenehmen User Experience führt. Er wartet dabei auch noch ab, bis er schon laufende Ankündigungen zu Ende gelesen hat. (Das ist der Unterschied zum anderen möglichen Wert assertive.)
Wenn Autoplay aktiv ist, wird aria-live auf off gesetzt, damit der Screenreader nicht konstant neue Inhalte vorliest, auf die unsere Besucher:innen keinen Einfluss haben. Das würde die Navigation per Screenreader erschweren, wenn nicht unmöglich machen.
Fazit: Accessibility als Chance im Webdesign
Ein Testimonials-Slider mit Autoplay kann modern, glaubwürdig und gleichzeitig barrierefrei sein. Mit unserer Umsetzung zeigen wir, dass Accessibility kein Widerspruch zu gutem Design ist, sondern die Basis für Nutzerfreundlichkeit und Nachhaltigkeit im Web.
Der European Accessibility Act (EAA) macht Barrierefreiheit verpflichtend – wir sehen darin eine Chance, digitale Erlebnisse für alle Menschen besser zu gestalten, von kleinen UI-Komponenten bis hin zu komplexen Plattformen.
Noch mehr zu Barrierfreiheit lesen?
Wir haben einen ausführlichen Artikel über die barrierefreie Umsetzung von Pro Helvetia geschrieben.
-
Barrierefreiheit in freier Wildbahn: Pro Helvetia, ein Schweizer Beispiel
Der begleitende Blogpost zu meinem Talk Accessibility in Reality: Pro Helvetia, a Swiss case study» auf dem WordCamp Europe 2025 in Basel.
