Ein leichtgewichtiges, barrierefreies und anpassbares Karussell, das mit Vanilla JavaScript erstellt wurde. Es legt den Fokus auf semantisches HTML, ARIA-Attribute für Screenreader-Nutzer und eine vollständige Tastaturbedienbarkeit.
Viele Karussells im Web sind für Menschen mit Behinderungen eine Herausforderung. Dieses Beispiel zeigt, wie man ein Karussell erstellt, das für alle funktioniert, ohne auf moderne Übergänge oder eine ansprechende Optik zu verzichten. Es kommt ohne externe Bibliotheken (wie jQuery oder Swiper.js) aus.
- Vollständig per Tastatur bedienbar: Navigation mit
Tab,Pfeiltasten,Home/EndeundEscape. - Screenreader-optimiert: Nutzt ARIA-Rollen (
region,roledescription,aria-label, etc.) und eine Live-Region, um Änderungen anzukündigen. - Fokus-Management: Der Fokus wird nach einer Interaktion sinnvoll auf das aktive Slide-Element gesetzt.
- Pause/Play-Funktion: Benutzer können die automatische Rotation jederzeit stoppen.
- Unterstützt
prefers-reduced-motion: Animationen werden für Benutzer, die dies wünschen, automatisch deaktiviert. inert-Attribut: Inaktive Slides werden für assistierende Technologien und die Tab-Reihenfolge vollständig verborgen.- Anpassbar: Leicht verständliches CSS und JavaScript, das einfach an eigene Bedürfnisse angepasst werden kann.
- Klone das Repository oder lade die Dateien herunter.
- Binde die
style.cssin den<head>deines HTML-Dokuments ein. - Kopiere die HTML-Struktur aus der
index.htmlan die gewünschte Stelle. Passe die Inhalte der Slides an. - Binde die
script.jsam Ende des<body>ein.
Eine genaue Beschreibung mit einer Checkliste findest Du in CHECKLISTE Karussell 07-10-2025.pdf.
Dieses Projekt steht unter der MIT-Lizenz. Du kannst es frei nutzen, modifizieren und verteilen, solange du die Lizenzbedingungen einhältst.