Widget Karussell (Slider)

HTML-Aufbau

• <div class ="...">: Wrapper für stilistisches Markup (hier: Klasse gs_box für graue Hinterlegung)
  • <div class="...">: Wrapper für Karussell-Seiten (hier: Klasse gs_single_slider als Marker-Klasse für Initialisierung, siehe folgenden Initialisierungscode (Anmerkung: nicht <ul> verwenden, da dies andernfalls zu invalidem HTML nach Karussell-Initialisierung führt) 
    • <div>: Eine Karussell-Seite (Anmerkung: nicht <li> verwenden, da dies andernfalls zu invalidem HTML nach Karussell-Initialisierung führt)

Initialisierungscode

import { tns } from './js/accessible-slider/src/tiny-slider.js';

document.addEventListener('DOMContentLoaded', function() {

  // In diesem Beispiel: Match auf Marker-Klasse ".gs_single_slider"

  const oneColumnSliders = document.getElementsByClassName('.gs_single_slider');
  for (const oneColumnSlider of oneColumnSliders) {

    // Für Konfigurationsoptionen siehe github.com/ganlanyuan/tiny-slider

    tns({
    container: oneColumnSlider,
    items: 1,
    slideBy: 'page',
    controls: true,
    controlsText: ['', ''],
    nav: true,
    navPosition: 'top',
    arrowKeys: true,
    autoplay: true,
    autoplayTimeout: 10000,
    speed: 200,
    autoplayPosition: 'top',
    autoplayText: ['', ''],
    autoplayHoverPause: true,
    autoplayButton: false,
    autoplayButtonOutput: true,
    mouseDrag: true,
    swipeAngle: false,
    rewind: true,
    locale: language,
    useLocalStorage: false
    });
  }

});

GESIS-Web verwendet und pflegt für die Karussellfunktionalität accessible-slider, einen Fork der Open-Source-Karussell-Bibliothek tiny-slider. Das Karussell kann über Initialisierungsoptionen konfiguriert werden.

Barrierefreiheit

• Die GESIS-Web-Library kümmert sich um automatische Umsetzung folgender Barrierefreiheits-Aspekte:
  • Große und visuell prägnante Vor-Zurück-Knöpfe
  • Wenn das Karussell derart konfiguriert ist, dass es automatisch blättert, dann
    • wird auch ein Knopf zum Pausieren dieser Automatik angezeigt
    • wird das Karussell automatisch pausiert, wenn ein Mauszeuger über dem Karussell hovert oder wenn ein Element des Karussells fokussiert ist
  • Vor- und Zurückblättern durch Tastatur-Links-Rechts-Pfeiltasten möglich.
  • Benutzerfreundliches Management der Tabreihenfolge (z.B. sind nur fokussierbare Karusselseiten-Inhalte der aktuellen Karusselseite antabbar.
  • ARIA-Auszeichnungen (aria-Attribute) für verbesserte Screenreader-Unterstützung
  • Beibehaltung der empfohlenen Tab-Reihenfolge Kontroll-Knöpfe → Karusselseiten-Auswahlleiste → aktuelle Karussellseite → fokussierbare Elemente der aktuellen Karussellseite (jedoch abweichende visuelle Reihenfolge der Karussellseiten-Auswahlleiste als unterstes Element aus ästhetischen Gründen) 
• Implementiert W3C-WAI-ARIA-Spezifikation Carousel / ARIA Authroing Practices Guide Pattern Carousel der Art Auto-Rotating Image Carousel with Tabs for Slide.