Werkstatt für barrierefreie Sliders

Werkstattprotokoll

HTML-Code dieses Projekts

  1. Der gesamte Inhalt des Sliders ist in einem DIV-Bereich mit der CSS Klassenbezeichnung slider-container realisiert.
  2. Der eigentliche Slider ist in einem DIV-Bereich mit der CSS Klassenbezeichnung slider realisiert.
  3. Der Bereich slider besteht aus den einzelnen Slides und dem Navigationsbereich (CSS-Klasse slider-panel).
  4. Die einzelnen Slides sind in einer unnummerierten Liste gesammelt.
  5. Jeder einzelne Slide ist als Ganzes eine Schaltfläche zu dem jeweils verlinkten Bereich. Da dies nicht intuitiv erkannt werden kann, wird eine Quasi-Schaltfläche mit Effekten für Schaltflächen angezeigt.
  6. Jedes einzelne Slide besteht aus linken (CSS-Klasse left) und einem rechten Bereich (CSS-Klasse right).
  7. Der linke Bereich besteht jeweils aus einer Überschrift der Ebene 2, einem kurzen erläuternden Text und der Quasi-Schaltfläche.
  8. Rechts befindet sich jeweils eine Symbolgrafik für den Inhalt.
  9. Unter dem Slider befindet sich ein Navigationspanel mit der CSS-Klasse slider-panel. Die Inhalte des Panels werden mit der Datei slider.js eingebaut.
  10. Die Punkte im Navigationspanel werden in der CSS-Klasse slider-point formatiert.

CSS-Code dieses Projekts

  1. overflow: hidden ist notwendig, damit beim Hinaus sliden kein Inhalt über den Bereich hinaus streicht.
  2. Die Punkte im Navigationspanel werden in der CSS-Klasse slider-point formatiert.

Scripts in diesem Projekt

  1. Nachdem ich selbst nicht JavaScripts programmieren kann, bin ich froh, ein jQuery-Script (jquery-2.1.4.min.js) gefunden zu haben, das einige wichtige Funktionalitäten bereitstellt. Welche genau, konnte ich noch nicht herausfinden.
  2. Daneben versuche ich eine slider.js für mein Beispiel und die Bedürfnisse der Barrierefreiheit zu analysieren und modifizieren. Tipps oder eine Mitarbeit sind ausdrücklich erwünscht.

Agenda

Vorheriges und Nächstes im Navigationspanel

Die Schaltflächen für das vorherige oder nächste Slide müssen noch in das Navigations-Paneel eingebaut werden.

Folgende CSS-Klassen müssen in diesem Zusammenhang adaptiert werden:

TITLE vergeben

Folgende Elemente benötigen noch ein TITLE-Attribut:

Weiters