Auswahlleisten für Bildkarusselle
(Materialsammlung)
Bildkarusselle verfügen am unteren Rand gewöhnlich über Steuerelemente zur Auswahl eines Bildes in einer horizontalen Leiste. Für deren barrierefreier Realisierung sind grafische und technische Anforderungen zu berücksichtigen.
Grafische Realisierung
Die Position des aktuell angezeigten Bildes verfügt gewöhnlich über einen Indikator mit einer Füllung innerhalb des Kreises. Daneben stehen Indikatoren zur Auswahl anderer verfügbarer Bilder bereit.
Als Basis für eine barrierefreie grafische Darstellung eines Indikators kann die hier verwendete SVG-Grafik heruntergeladen und für individuelle Darstellungswünsche angepasst werden.
Kontrastanforderungen
Der Indikator für das aktuelle Bild und die Indikatoren für verfügbare Bilder stellen für sich stehende Steuerelemente dar. Als Komponenten der Nutzungsoberfläche müssen sie zum Hintergrund ein Kontrastverhältnis von mindestens 3 ∶ 1 aufweisen, um das Erfolgskriterium 1.4.11 für nicht-textuellen Kontrast zu erfüllen.
Indikatoren weisen in Bildkarussellen häufig einen zu geringen Kontrast zum Hintergrundbild auf. Insbesondere einfärbige Indikatoren fallen visuell kaum auf, wenn die benachbarten Flächen des Hintergrundbildes wie im folgenden Beispiel einen sehr ähnlichen Helligkeitswert aufweisen:
In den folgenden Beispielen dient das horizontal dargestellte Farbspektrum exemplarisch für den Hintergrund der Auswahlleiste.
Indikatoren mit einem dunklen und hellen Anteil im Außenbereich erfüllen die Kontrastanforderungen.
Damit die horizontale Leiste mit den Indikatoren als Gruppe von Steuerelementen spontaner erkannt wird, kann sie farblich hinterlegt werden:
Kontrast ist in diesem Beispiel nicht das einzige Mittel zur Darstellung der Gruppierung der Indikatoren. Eine zusätzliche kontrastreiche Umrandung der Hintergrundleiste scheint daher nicht erforderlich.
Der Hintergrund der Leiste kann auch transparent gestaltet werden. Voraussetzung ist lediglich, dass das Mindestkontrastverhältnis von Teilen der Indikatoren zu benachbarten Teilen, insbesondere dem Hintergrundbild gewährleistet bleibt:
Größenanforderungen
Auswahlelemente sind Steuerelemente benötigen daher selbst eine Mindestgröße oder einen Mindestabstand zum nächsten Steuerelement. Kreisförmige Indikatoren für die Auswahl eines Bildes müssen zwischen den einzelnen Kreismittelpunkten einen Abstand von 24px aufweisen. Dies ist zur Erfüllung des Erfolgskriteriums 2.5.8 Zielgröße (Minimum) erforderlich.
Für den Touch Screen wird im Erfolgskriterium 2.5.5 eine Mindestgröße von 44 × 44px empfohlen.
Für die Größe des visuellen Indikators innerhalb des Steuerelements gibt es leider keine Mindestanforderungen in den WCAG. Es empfiehlt sich jedoch, die verfügbaren Dimensionen weithin auszunützen.
Optimaler Weise stellen die Auswahlindikatoren für einzelne Bilder selbst eine Bildvorschau dar (Thumbnail). Die aktuelle Auswahl sollte dabei hervorgehoben werden. Insbesondere Menschen mit Sehbehinderung profitieren davon, wenn sich in der Auswahlleiste für das aktuelle Element ein visuell klar erkennbares Unterscheidungsmerkmal befindet. Das Unterscheidungsmerkmal kann auch lediglich aus einem kontrastierendem Rahmen bestehen.
Technische Realisierung
Aktuelle Auswahl
Visuell wird das aktuell angezeigte Element in der Auswahlleiste typischerweise mit einem gefüllten Indikator dargestellt.
Technisch wird die aktuelle Auswahl mit dem Attribut
aria-current
im Element vermittelt:
aria-current="true"
Sofern die Position der aktuellen Anzeige innerhalb der verfügbaren Elemente eetwa in einer Anleitung relevant ist, sollte dies mit dem entsprechenden Wert im Attribut klar gemacht werden:
aria-current="step"