Zusammengesetzte Bedienelemente

Synonyme: Blätter-Navigation, Seiten-Navigation, Page navigation, pagination

Siehe auch: Scrollbalken

Die Paginierung dient der Navigation durch Seiten oder sequenziellen Elementen (z. B. bei Tabellen).

Die Anforderungen an die einzelnen Bedienelemente werden beim jeweiligen Bedienelement beschrieben.

Zusammengesetzte Formularfelder bestehen aus zwei oder mehr Formularfeldern, die visuell eine Beschriftung besitzen.

Die Anforderungen an die einzelnen Formularfelder werden beim jeweiligen Formularfeldtyp beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass sich eine Beschriftung auf mehrere Felder bezieht.

Bei zusammengesetzten Formularfeldern können folgende Probleme auftreten:

• Der Abstand zwischen Beschriftung und Formularfeld ist häufig größer, wodurch der Zweck der Formularfelder z. B. bei Verwendung einer Bildschirmlupe oder für kognitiv beeinträchtigte Menschen schwerer zu erkennen ist.
• Jedes Feld benötigt einen aussagekräftigen Accessible Name, der an die Accessibility API übermittelt wird, selbst wenn das Feld visuell keine explizite Beschriftung besitzt.
• Die sichtbare Beschriftung muss mit dem Accessible Name übereinstimmen oder in diesem enthalten sein, selbst wenn die sichtbare Beschriftung sich auf mehrere Felder bezieht.
• In Anwendungen, die den virtuellen Cursor unterstützen, ist ggf. die Lesereihenfolge mit dem Screenreader nicht korrekt, weil z. B. zuerst die Beschriftungen der Felder und anschließend die Formularfelder (ohne erneute Ausgabe der Beschriftung) ausgegeben werden.

Aus diesen Gründen wird empfohlen, zusammengesetzte Formularfelder zu vermeiden und jedem Feld eine Beschriftung visuell und programmatisch zuzuordnen.

Andernfalls sollten zumindest folgende Hinweise beachtet werden:

• Wenn die visuelle Beschriftung lediglich eine übergreifende Beschriftung enthält (z. B. „Datum“ für drei Datumsfelder, in denen der Tag, der Monat und das Jahr eingetragen werden), soll diese zusammen mit einer eindeutigen Beschriftung im Accessible Name enthalten sein (z. B. „Datum Tag“, „Datum Monat“, „Datum Jahr“). Alternativ kann ein Feld für die Eingabe z. B. des gesamten Datums verwendet werden.
• Wenn die visuelle Beschriftung die Beschriftung der einzelnen Felder enthält (z. B. „PLZ und Ort“), soll der Accessible Name mit den Einzelbeschriftungen übereinstimmen (z. B. „PLZ“ und „Ort“).
• Komplexe Formulare sollten grundlegend umgestaltet werden, um die Anforderungen der Barrierefreiheit zu erfüllen. Im folgenden Screenshot befinden sich z. B. zwei Radiobuttons mit der Beschriftung „Am“ in einer unbeschrifteten Gruppe. Aus dem visuellen Kontext ist zu erkennen, dass sich der erste Radiobutton auf einer Wiederholung eines Serientermins zu einem explizit definierten Datum bezieht, der zweite hingegen auf die Wiederholung an einem implizit definierten Wochentag. Die Gruppenbeschriftung der Radiobuttons könnte „Wiederholung an einem“ lauten und die Radiobuttons selbst könnten visuell und programmatisch mit „Datum“ und „Wochentag“ beschriftet sein, wobei das aktuell gewählte Datum oder der aktuell gewählte Wochentag als Accessible Description übermittelt werden kann. Die Formularfelder, die sich hinter den beiden Radiobuttons befinden und die Auswahl des Datums oder Wochentags ermöglichen, sollten explizit beschriftet werden.

Synonyme: Accordion

Siehe auch: Schalter, Registerkarten, Karussell

Ein Akkordeon vereint mehrere, untereinander angeordnete Bereiche, die über Schalter ein- und ausgeblendet werden können. Die Beschriftung der Bereiche ist dabei dauerhaft sichtbar (siehe DIN EN ISO 9241-161: 8.1). Die Beschriftung besitzt meist einen visuellen Indikator, welcher auf den Status des Bereichs (ein- oder ausgeblendet) hinweist.

Für ein Akkordeon sind verschiedene Umsetzungsvarianten bezüglich der minimalen oder maximalen Anzahl der geöffneten Bereiche möglich, z. B.

• Initial sind alle Bereiche geschlossen und es kann jeweils nur ein Bereich geöffnet werden. Wird ein Bereich geöffnet, wird der zuvor geöffnete Bereich automatisch geschlossen.
• Es ist immer mindestens ein Bereich geöffnet und es können alle Bereiche geöffnet werden.

• JAWS: [Beschriftung] Schalter [reduziert | erweitert] [Hinweis zur Bedienung mit der Eingabetaste]
• NVDA: [Beschriftung] Schalter [reduziert | erweitert]
• Windows Sprachausgabe: [Beschriftung] Schaltfläche [ausgeblendet | erweitert]

Hinweis: Bei Verwendung des <details>-Element ohne Beschriftung sind der Beginn und das Ende des Seitenbereichs mit Assistenztechnologie nicht wahrnehmbar. Wird das <details>-Element explizit beschriftet (z. B. per aria-label oder aria-labelledby) wird der Bereich als „Gruppe“ (JAWS) oder „Gruppierung“ (NVDA) ausgegeben. Die Windows Sprachausgabe gibt auch beschriftete Gruppen nicht aus.

In HTML existiert kein Element für Akkordeons. Stattdessen können mehrere Bereiche verwendet werden, die über Schalter ein- und ausgeblendet werden. Die Bereiche werden mit <details> und die Schalter mit <summary> ausgezeichnet. Das <summary>-Element befindet sich als erstes Kindelement innerhalb von <details>. Die Beschriftung der Schalter ergibt sich aus dem Textinhalt im <summary>-Element. Der initiale Status des Bereichs (geöffnet oder geschlossen) wird mit dem open-Attribut festgelegt.

Damit die Zusammengehörigkeit der Bereiche und Schalter mit Assistenztechnologie wahrnehmbar ist, können sie in einer beschrifteten Gruppe verschachtelt werden.

Gemäß HTML-Spezifikation darf das <summary>-Element z. B. Links, Überschriften, Eingabefelder und viele andere Elemente enthalten – es sollte jedoch beachtet werden, dass alle Elemente, die sich innerhalb von <summary> befinden, mit dem Screenreader nicht wahrnehmbar und bedienbar sind, weil das <summary>-Element an die Accessibility API als Schalter übermittelt wird. Somit sollte das <summary>-Element ausschließlich eine knappe und aussagekräftige Beschriftung in Textform enthalten.

Weitere Informationen: 4.11.1 The details element - HTML Standard (whatwg.org), 4.11.2 The summary element - HTML Standard (whatwg.org)

In ARIA existiert keine Rolle für Akkordeons. Stattdessen können mehrere Bereiche verwendet werden, die über Schalter ein- und ausgeblendet werden. Dabei sollte Folgendes beachtet werden:

• Die Schalter, die dem Ein- und Ausblenden von Bereichen dienen, sollten mit dem Attribut aria-expanded ausgezeichnet werden. Per aria-controls kann auf die ID des Bereichs, der ein- oder ausgeblendet wird, verwiesen werden.
• Die Beschriftung der Schalter sollte per Textinhalt oder aria-labelledby erfolgen.
• Damit die Zusammengehörigkeit der Bereiche und Schalter mit Assistenztechnologie wahrnehmbar ist, können sie in einer beschrifteten Gruppe verschachtelt werden
• Die Darstellung des Akkordeons sollte im Hochkontrast-Modus von Windows überprüft werden. So sollten die Bereiche einen Rahmen besitzen.
• Der sichtbare Schalter und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Alternativ kann anstelle eines Akkordeons eine Registerkartengruppe verwendet werden.

Weitere Informationen: aria-expanded state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Accordion Pattern (Sections With Show/Hide Functionality) | APG | WAI | W3C

Synonyme: Datepicker, Calendar-Date-Picker, Kalender, Kalenderelement, Kalendersteuerelement, Uhrzeitwähler, Timepicker, Uhr, Datums- und Uhrzeitwähler, Date-Time-Picker

Siehe auch: Kombiniertes Eingabefeld, Farbwähler

Hinweis: Alle folgenden Ausführungen gelten analog für den Uhrzeitwähler oder für Bedienelemente für die Auswahl von Wochen, Monaten oder Jahren.

Ein Datumswähler dient der unterstützten Eingabe eines Datums (siehe DIN EN ISO 9241-161: 8.9 und 8.46).

Datumswähler können unterschiedlich umgesetzt werden, z.B. als

• Eingabefeld für ein Datum kombiniert mit einem Schalter, über den sich ein Dialog zur Auswahl eines Datums öffnen lässt,
• schreibgeschütztes Eingabefeld für ein Datum kombiniert mit einem Schalter, über den sich ein Dialog zur Auswahl eines Datums öffnen lässt,
• kombiniertes Eingabefeld für ein Datum, über das sich ein Dialog zur Auswahl eines Datums öffnen lässt,
• Tabelle zur Auswahl eines Datums innerhalb eines bestimmten Zeitraums und Schalter, um den Zeitraum zu wechseln,
• getrennte Eingabefelder zur Eingabe von Tag, Monat und Jahr, kombiniert mit einem Schalter, über den sich ein Dialog zur Auswahl eines Datums öffnen lässt,
• getrennte Drehfelder zur Eingabe und Auswahl von Tag, Monat und Jahr,
• getrennte Auswahllisten zur Auswahl von Tag, Monat und Jahr,
• getrennte Ausklapplisten zur Auswahl von Tag, Monat und Jahr.

Der Dialog zur Auswahl eines Datums kann folgende Elemente enthalten:

• Tabellen, Schalter, Radiobuttons, Drehfelder, Auswahllisten oder Ausklapplisten zur Auswahl eines Datums innerhalb eines bestimmten Zeitraums (z.B. Tage innerhalb eines Monats, Monate innerhalb eines Jahres, Jahre innerhalb eines Jahrzehnts),
• Schalter zur Auswahl eines anderen Zeitraums,
• visuelle Markierungen der Tage und Zeiträume (z.B. „heute“, „gewählter Tag“, „Urlaubstag“, „Feiertag“, „Wochenende“, „Tag mit freien Terminen“).

Die Anforderungen an die einzelnen Bedienelemente innerhalb des Datumswählers werden beim jeweiligen Bedienelement beschrieben. Hier werden nur zusätzliche Anforderungen für das gesamte Element beschrieben.

Beispiele:

Synonyme: Colorpicker

Siehe auch: Schieberegler, Datumswähler

Ein Farbwähler dient der Auswahl einer Farbe (siehe DIN EN ISO 9241-161: 8.6). Farbwähler können unterschiedlich umgesetzt werden, z.B. als

• Tabelle, Ausklappliste oder Auswahlliste zur Auswahl einer Farbe,
• einzelnes Eingabefeld zur Eingabe eines Farbwertes (z.B. HEX-Wert),
• mehrere Eingabefelder oder Drehfelder zur Eingabe einzelner Farbkanäle (z.B. RGB, RGBA, CMYK oder HSB),
• zweidimensionales Farbverlaufsfeld zur Auswahl eines Werts,
• einzelner Schieberegler zur Auswahl einer Farbe,
• mehrere Schieberegler zur Auswahl einzelner Farbkanäle (z.B. RGB, RGBA, CMYK oder HSB)
• Schalter, über den sich ein Dialog zur Auswahl einer Farbe öffnen lässt (der Dialog enthält eines der oben genannten Elemente),
• eine Kombination aus den oben genannten Elementen.

Die Anforderungen an die einzelnen Bedienelemente innerhalb des Farbwählers werden beim jeweiligen Bedienelement beschrieben. Hier werden nur zusätzliche Anforderungen für das gesamte Element beschrieben.

Der Farbwähler kann mit dem HTML-Element <input type=color> umgesetzt werden.

Der initiale Wert wird über das value-Attribut übermittelt. Als Werte sind nur die Hexadezimal-Farbwerte, die mit einer Raute beginnen und von 6 Zeichen gefolgt werden, erlaubt.

Die Beschriftung des Farbwählers sollte mit dem Element <label for=ID> mit dem Farbwähler verknüpft werden.

Der Farbwähler kann als deaktiviert (disabled) ausgezeichnet werden, jedoch nicht als Pflichtfeld (required) oder schreibgeschützt (readonly).

Achtung: Je nach verwendetem Browser und Screenreader ist der HTML-Farbwähler entweder gar nicht (z. B. JAWS mit Chrome und Edge) oder nur eingeschränkt wahrnehmbar und bedienbar (z. B. NVDA mit Chrome, Edge und Firefox). Es wird davon abgeraten, den HTML-Farbwähler zu verwenden, außer die Anwendung soll nur mit einem Browser und bestimmten Assistenztechnologien funktionieren und die Barrierefreiheit in dieser Umgebung kann gewährleistet werden. Ansonsten können je nach Anforderung z. B. ein Schalter, der einen modalen Dialog zur Farbauswahl öffnet, ein oder mehrere Eingabefelder, eine Ausklappliste, Schieberegler oder eine Kombination aus diesen Elementen verwendet werden.

Weitere Informationen: 4.10.5.1.14 Color state (type=color) - HTML Standard (whatwg.org)

In ARIA existiert keine Rolle für Farbwähler. Stattdessen können je nach Anforderung z. B. ein Schalter, der einen modalen Dialog zur Farbauswahl öffnet, ein oder mehrere Eingabefelder, eine Ausklappliste, Schieberegler oder eine Kombination aus diesen Elementen verwendet werden.

Synonyme: Slide Show, Diashow, Image Rotator, Carousel, Cover Flow, Element Flow, Slider

Siehe auch: Akkordeon, Registerkarten

Ein Karussell dient der Gruppierung von Inhaltsblöcken, durch die geblättert werden kann (siehe DIN EN ISO 9241-161: 8.3).

Viele Umsetzungsvarianten sind möglich, u.a. folgende:

• Es ist jeweils nur ein Inhaltsblock sichtbar, mehrere Inhaltsblöcke oder alle Inhaltsblöcke sind sichtbar.
• Die sichtbaren Inhaltsblöcke sind vollständig sichtbar, verdecken sich gegenseitig oder sind am Maskenrand angeschnitten.
• Die Inhaltsblöcke sind vertikal oder horizontal nebeneinander, kreisförmig oder übereinander angeordnet.
• Alle sichtbaren Inhaltsblöcke werden gleich dargestellt oder ein zentraler Inhaltsblock wird hervorgehoben, während die Inhaltsblöcke daneben kleiner oder ausgegraut dargestellt werden.
• Das Blättern durch die Inhaltsblöcke kann automatisch erfolgen oder durch die Bedienung der Benutzenden.
• Das Blättern durch die Inhaltsblöcke erfolgt über einen Scrollbalken, Schalter zum Zurück- und Weiterblättern oder über eine Paginierung.
• Die Inhaltsblöcke können grafische Elemente, Text und Bedienelemente enthalten.

Beispiele:

Informationen zu diesem Artikel

Datum:

21.04.2023

Lizenz:

CC-BY-SA 4.0