Bedienelemente

Synonyme: Trenner, Separator, Window Splitter, Splitter

Siehe auch: Griff, Schieberegler, Scrollbalken

Ein Bereichstrenner dient dem Skalieren eines Seitenbereichs oder von zwei benachbarten Seitenbereichen. Bereichstrenner werden auch zum Skalieren von Tabellenspalten und -zeilen verwendet.

Ein Bereichstrenner befindet sich zwischen zwei Seitenbereichen und besteht aus einem Balken und ggf. einem Griff. Bereichstrenner können verschiedene Ausprägungen besitzen:

• horizontal oder vertikal angeordnet,
• kontinuierliche oder schrittweise Skalierung,
• Skalierung im Bereich von 0 bis 100% (d.h. zwischen ausgeblendet und Vollbild) oder mit einem beschränkten Bereich,
• Skalierung beider Bereiche oder nur eines der beiden Bereiche (der andere Bereich wird dann lediglich verschoben, bleibt jedoch in seiner Größe unverändert).

Hinweis: Die folgenden Anforderungen gelten nur, wenn der Bereichstrenner mit der Tastatur den Fokus erhält.

Synonyme: Querverweis, Verweis, Verknüpfung, Hypertext-Link, Hyperlink

Siehe auch: Schalter, Menü, Image Map

Links ermöglichen die Navigation zu einer festgelegten Stelle (siehe DIN EN ISO 9241-161: 8.23).

Ein Link besitzt eine textliche oder grafische Beschriftung (z.B. ein Icon). Links besitzen meist einen visuellen Indikator, um den Link als solchen kenntlich zu machen, dies gilt insbesondere für Textlinks. Als visueller Indikator für Textlinks wird in der Regel eine Unterstreichung und eine abweichende Farbe verwendet.

• JAWS: [Beschriftung] Link | Link diese Seite | besuchter Link | Mail senden Link | FTP Link
• NVDA: [Beschriftung] Link | besucht Link
• Windows Sprachausgabe: Link [Beschriftung] Wert [URL]

Hinweis:

• JAWS und NVDA unterscheiden zwischen besuchten und nicht-besuchten Links.
• Mit JAWS ist der Link-Typ einiger Links wahrnehmbar (Link zu Email- und FTP-Adressen, seiteninterne Links).
• Mit der Windows Sprachausgabe ist der Link-Typ bei den meisten Links wahrnehmbar, weil die URL als Wert des Links ausgegeben wird. Die Ausgabe der URL erfolgt jedoch nicht korrekt, so wird z. B. „http://“ als „http skeptischer Smiley“ ausgegeben.

Der Link sollte mit dem HTML-Element <a href=URL> umgesetzt werden. Das href-Attribut ist verpflichtend.

Beschriftung:

• Die Beschriftung des Links sollte über den Textinhalt erfolgen.
• Bei grafischen Links erfolgt die Beschriftung über den Alternativtext der Grafik oder per aria-label. Dabei sollte beachtet werden, dass die Linkbeschriftung nicht die Grafik beschreibt, sondern den Linkzweck. Wenn der Inhalt der Grafik ebenfalls relevant ist, sollten die Grafik nicht verlinkt werden, sondern sich der Link vor oder nach der Grafik befinden.
• Die Beschriftung der Links sollte knapp sein. Beispiel: Bei einer Kachel mit Überschrift, Grafik, Teaser-Text, Schlagworten etc. sollte nicht die gesamte Kachel verlinkt werden, sondern lediglich die Überschrift.
• Die Beschriftung der Links sollte eindeutig und aussagekräftig sein. Links, die mit „Hier klicken“ oder „Weitere Informationen“ beschriftet sind, sind nicht aussagekräftig. Die Beschriftung sollte entweder aussagekräftig formuliert werden (z. B. „Weitere Informationen zur Barrierefreiheit“) oder die Beschreibung sollte den Linkzweck erläutern (z. B. indem per aria-describedby auf den relevanten Linkkontext verwiesen wird).

Status und Typ:

• Links können nicht als deaktiviert (disabled) ausgezeichnet werden. Links, die nicht bedienbar sind, können mit dem -Element ohne das href-Attribut ausgezeichnet werden.
• Bei Links, die der Seitennavigation dienen, kann mit aria-current=page der Link ausgezeichnet werden, der auf die aktuelle Seite verweist.
• Links, die zum Ein- und Ausblenden von Bereichen dienen, sollten mit aria-expanded ausgezeichnet werden, um den Status der Bereiche (ein- oder ausgeblendet) zu übermitteln.
• Links, über die ein Pop-up geöffnet wird, sollten mit aria-haspopup ausgezeichnet werden.
• Sofern der Link nicht eine neue Webseite im aktuellen Browserfenster öffnet, sollte auf das abweichende Linkziel visuell hingewiesen werden (z. B. Link öffnet Seite im neuen Browserfenster, Link verweist auf ein PDF-Dokument).
• Besitzen die Links einen grafischen Hinweis, der auf den Linktyp hinweist (z. B. Link zu einer externen Seite, Link öffnet Seite im neuen Browserfenster, Link verweist auf ein PDF-Dokument, verlinkte E-Mail-Adresse), sollte diese Information auch mit Assistenztechnologien wahrnehmbar sein. In der Regel handelt es sich bei dem Linktyp um eine sekundäre Information, so dass sie dementsprechend nicht als Teil der Beschriftung, sondern als Beschreibung (z. B. per title- oder aria-describedby-Attribut) oder zumindest erst am Ende der Beschriftung ausgegeben werden sollte.

Weitere Informationen: 4.6 Links - HTML Standard (whatwg.org)

Wird der Link nicht mit dem HTML-Element umgesetzt, sollte zusätzlich zu den Hinweisen zu HTML-Links Folgendes beachtet werden:

• Die Rolle wird mit role=link übermittelt.
• Deaktivierte Links können mit aria-disabled ausgezeichnet werden.
• Die Übermittlung der Information, dass ein Link bereits besucht wurde oder dass es sich um einen seiteninternen Link handelt, ist mit ARIA-Links nicht möglich.
• Die Links sollten visuell so gekennzeichnet werden (z. B. mit einem Icon oder einer Unterstreichung), damit deren Rolle auch bei Verwendung der Windows-Kontrastanpassung wahrnehmbar ist.

Weitere Informationen: [link role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)[(https://www.w3.org/TR/wai-aria-1.2/#link)], Link Pattern | APG | WAI | W3C

Synonyme: Schaltfläche, Befehlsschaltfläche, Button, Push Button

Siehe auch: Menüschaltfläche, Link, Umschalter, Wechselschalter, Registerkarte, Akkordeon

Schalter dienen der Ausführung eines Befehls (siehe DIN EN ISO 9241-161: 8.32).

Ein Schalter besitzt eine textliche oder grafische Beschriftung sowie einen visuellen Indikator, um den Schalter als solchen kenntlich zu machen. Als visueller Indikator für Schalter wird meist ein Rahmen verwendet.

Schalter können innerhalb anderer Elemente verwendet werden, z. B. in Tabellen, Baumstrukturen, Werkzeugleisten, Scrollbalken, Karteireitern von Registerkarten, Akkordeons, Eingabefeldern, Drehfeldern, Ausklapplisten und kombinierten Eingabefeldern. Abweichende Anforderungen an die Schalter werden in den Abschitten zu diesen Elementen beschrieben.

• JAWS: [Beschriftung] Schalter [Hinweis zur Bedienung mit der Eingabetaste]
• NVDA: [Beschriftung] Schalter | Grafik Schalter
• Windows Sprachausgabe: [Beschriftung] Schaltfläche Hinweise:
• Der Schaltertyp (type=reset, type=submit, type=button) ist mit den Screenreadern nicht wahrnehmbar.
• Lediglich NVDA gibt das Element <input type=image> als „Grafik Schalter“ aus.

Der Schalter sollte mit den HTML-Elementen <button> oder <input type=button> umgesetzt werden. Für grafische Schalter kann <input type=image> verwendet werden. In Formularen können für die Schalter zum Absenden und Zurücksetzen der Eingaben außerdem <input type=submit> bzw. <input type=reset> verwendet werden. Beschriftung:

• Die Beschriftung der Schalter, die mit <button> ausgezeichnet sind, sollte über den Textinhalt erfolgen.
• Die Beschriftung der Schalter, die mit <input> ausgezeichnet sind, sollte über das value-Attribut erfolgen.
• Schalter, die mit <input type=submit> oder <input type=reset> ausgezeichnet sind, müssen nicht explizit beschriftet werden, weil sie automatisch durch den Browser beschriftet werden (z. B. mit „Senden“ und „Zurücksetzen“). Die Standard-Beschriftung der Browser kann jedoch mit dem value-Attribut überschrieben werden. Dies wird empfohlen, wenn in der Anwendung oder Hilfe auf diese Schalter Bezug genommen wird, weil je nach Browser die Schalterbeschriftung sonst unterschiedlich ist.
• Bei grafischen Schaltern erfolgt die Beschriftung über den Alternativtext der Grafik (z. B. <input type=image alt=…> bzw. <button><img alt=…></button>) oder per aria-label. Dabei sollte beachtet werden, dass die Schalter-Beschriftung nicht die Grafik beschreibt, sondern den Zweck des Schalters.
• Die Beschriftung der Schalter sollte knapp, eindeutig und aussagekräftig sein. Schalter, die mit „Hier klicken“ oder „Detailansicht“ beschriftet sind, sind nicht aussagekräftig. Die Beschriftung sollte entweder aussagekräftig formuliert werden (z. B. „Detailansicht zu Erika Mustermann“) oder die Beschreibung sollte den Zweck des Schalters erläutern (z. B. per aria-describedby oder title). Status und Typ:
• Schalter können als deaktiviert (disabled) ausgezeichnet werden.
• Bei Schaltern, die der Navigation oder Paginierung dienen, kann mit aria-current der Schalter ausgezeichnet werden, der auf das aktuelle Element verweist.
• Schalter, die zum Ein- und Ausblenden von Bereichen dienen, sollten mit aria-expanded ausgezeichnet werden, um den Status der Bereiche (ein- oder ausgeblendet) zu übermitteln.
• Schalter, die ein Pop-up öffnen, sollten nicht mit aria-haspopup ausgezeichnet werden, auch wenn das Attribut dafür gedacht ist. Der Grund dafür ist, dass aria-haspopup in Verbindung mit einem Schalter dazu führt, dass das Element als Menü-Schalter ausgegeben wird. Stattdessen sollten Links mit aria-haspopup verwendet werden oder Schalter mit einem textlichen Hinweis in der Beschreibung.

Weitere Informationen: 4.10.6 The button element - HTML Standard (whatwg.org), 4.10.5.1.21 Button state (type=button) - HTML Standard (whatwg.org), 4.10.5.1.19 Image Button state (type=image) - HTML Standard (whatwg.org), 4.10.5.1.18 Submit Button state (type=submit) - HTML Standard (whatwg.org), 4.10.5.1.20 Reset Button state (type=reset) - HTML Standard (whatwg.org)

Wird der Schalter nicht mit dem HTML-Element umgesetzt, sollte zusätzlich zu den Hinweisen zu HTML-Schaltern Folgendes beachtet werden:

• Die Rolle wird mit role=button übermittelt.
• Deaktivierte Schalter können mit aria-disabled ausgezeichnet werden.
• Die Schalter sollten visuell so gekennzeichnet werden (z. B. mit einem Rahmen), damit deren Rolle auch bei Verwendung der Windows-Kontrastanpassung wahrnehmbar ist.

Weitere Informationen: button role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Button Pattern | APG | WAI | W3C

Synonyme: Kippschalter, Umschalter, Switch, Switch Button, Toggle Switch

Siehe auch: Schalter, Checkbox, Menüschalter, Umschalter

Ein Wechselschalter dient der Auswahl der Werte „An“ oder „Aus“. Der Wechselschalter kann auch für andere Werte-Paare verwendet werden, sofern diese Werte in Textform vermittelt werden.

Ein Wechselschalter besitzt einen Rahmen, in dem sich ein visueller Indikator befindet, der aufgrund seiner Position den gewählten Wert anzeigt. Der Indikator ist meist ein Kreis, der sich links (Wert „Aus“) oder rechts (Wert „An“) im Rahmen befindet.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

• JAWS: [Beschriftung] Umschalter [aus | gedrückt an]
• NVDA: [Beschriftung] Kontrollfeld [nicht aktiviert | aktiviert]
• Windows Sprachausgabe: [Beschriftung] Schaltfläche [aus | ein]

Hinweis:

• Obwohl mit role=switch eine eigene Rolle für Wechselschalter existiert, wird diese von den Screenreadern nicht ausgegeben. Stattdessen werden die Wechselschalter als Umschalter bzw. Checkboxen ausgegeben. Dies ist nicht problematisch, da die Funktionalität analog ist.
• Problematisch ist lediglich, dass der Wert in Textform (sofern vorhanden) mit dem Screenreader nicht wahrnehmbar ist.

In HTML existiert kein Element für Wechselschalter. Stattdessen können Umschalter oder Checkboxen verwendet werden.

Bei Wechselschaltern sollte Folgendes beachtet werden:

• Die Rolle wird mit role=switch übermittelt.
• Der Status wird mit aria-checked=true|false übermittelt und muss bei Bedienung aktualisiert werden.
• Die Beschriftung kann per Textinhalt oder aria-labelledby erfolgen.
• Der Wechselschalter kann mit aria-readonly als schreibgeschützt und mit aria-disabled als deaktiviert ausgezeichnet werden.
• Ein Wechselschalter kann mit aria-required als Pflichtfeld ausgezeichnet werden. Dies ist nur in Fällen sinnvoll, in denen der Wechselschalter im Status „An“ (aria-checked=true) abgesendet werden muss. Wenn hingegen in einer Gruppe von Wechselschaltern mindestens einer ausgewählt werden muss, sollte die Pflichtfeldkennzeichnung bei der Gruppe vorgenommen werden (z. B. Stern innerhalb der Gruppenbeschriftung).
• Der Status des Wechselschalters sollte in Textform angezeigt werden, weil Farbinformationen (wie z. B. grün = an und rot = aus) für sehbeeinträchtigte Menschen ggf. nicht wahrnehmbar sind.
• Der Wechselschalter sollte nur für den Status „an“ und „aus“ verwendet werden, weil andere Status-Informationen vom Screenreader nicht übermittelt werden. Alternativ sollten andere Statusinformationen als Teil der Beschriftung oder Beschreibung übermittelt werden. In diesem Fall sollte jedoch beachtet werden, dass zusätzlich der programmatische Status ausgegeben wird, was zu einer redundanten Ausgabe führt.
• Die Darstellung des Wechselschalters sollte im Hochkontrast-Modus von Windows überprüft werden. So sollte der Wechselschalter selbst und der visuelle Indikator für den Status einen Rahmen besitzen und nicht nur per Hintergrundfarbe gekennzeichnet sein.
• Der sichtbare Wechselschalter und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: switch role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Switch Pattern | APG | WAI | W3C

Synonyme: Toggle-Schalter, Toggle Button

Siehe auch: Schalter, Checkbox, Menüschalter, Wechselschalter

Umschalter dienen der Auswahl der Zustände „gedrückt“ oder „nicht gedrückt“ (siehe DIN EN ISO 9241-161: 8.48).

Ein Umschalter besitzt eine textliche oder grafische Beschriftung sowie einen visuellen Indikator, um den Umschalter als solchen kenntlich zu machen. Als visueller Indikator für Umschalter wird meist ein Rahmen verwendet. Darüber hinaus besitzt der Umschalter einen visuellen Indikator für den Status, z.B. eine abweichende Hintergrundfarbe.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

• JAWS: [Beschriftung] Umschalter [ | gedrückt] [Hinweis zur Bedienung mit der Leertaste]
• NVDA: [Beschriftung] Umschalter [ Nicht gedrückt | gedrückt]
• Windows Sprachausgabe: [Beschriftung] Schaltfläche [aus | ein]

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

In HTML existiert kein Element für Umschalter. Stattdessen können Schalter mit alternierender Beschriftung (z. B. „Auswählen“ bzw. „Auswahl aufheben“), Checkboxen oder ARIA-Umschalter verwendet werden. Umschalter, die dem Ein- und Ausblenden von Bereichen dienen, sollten mit <details> und <summary> ausgezeichnet werden (4.11.1 The details element - HTML Standard (whatwg.org), 4.11.2 The summary element - HTML Standard (whatwg.org)). 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.

Bei Umschaltern sollte Folgendes beachtet werden:

• Die Rolle wird bei einem Schalter (z. B. <button> oder role=button) mit dem Attribut aria-pressed übermittelt.
• Umschalter, die dem Ein- und Ausblenden von Bereichen dienen, können stattdessen mit dem Attribut aria-expanded ausgezeichnet werden. In diesem Fall kann per aria-controls auf die ID des Bereichs, der ein- oder ausgeblendet wird, verwiesen werden.
• Der Status (aria-pressed=true|false bzw. aria-expanded=true|false) muss bei Bedienung aktualisiert werden.
• Die Beschriftung kann per Textinhalt oder aria-labelledby erfolgen.
• Der Umschalter kann mit aria-disabled als deaktiviert ausgezeichnet werden.
• Ein Umschalter kann nicht mit aria-readonly als schreibgeschützt oder mit aria-required als Pflichtfeld ausgezeichnet werden, weil er im Gegensatz zum Wechselschalter nicht als Formularelement gilt.
• Die Darstellung des Umschalters sollte im Hochkontrast-Modus von Windows überprüft werden. So sollte der Umschalter selbst einen Rahmen besitzen und der visuelle Indikator für den Status nicht nur per Farbe vermittelt werden.
• Der sichtbare Umschalter und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: aria-pressed state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), aria-expanded state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Button Examples | APG | WAI | W3C, Disclosure (Show/Hide) Pattern | APG | WAI | W3C

Synonyme: Zweigeteilter Schalter, Splitbutton

Siehe auch: Ausklappliste, Menü-Schalter, Kontextmenü, Schalter

Aufteilungsschalter dienen der Ausführung eines Befehls, der über ein Menü, eine Auswahlliste oder ein Dialogfenster konfiguriert werden kann.

Alternativ dienen Aufteilungsschalter zum Gruppieren von verwandten Funktionen, wobei die Primärfunktion direkt über den Schalter und die Sekundärfunktionen über das Menü beim Schalter aufgerufen werden können.

Ein Aufteilungsschalter besitzt eine textliche oder grafische Beschriftung sowie einen visuellen Indikator, um den Schalter als solchen kenntlich zu machen (meist ein Rahmen). Darüber hinaus besitzt der Aufteilungsschalter weiteren Schalter (mit Pfeil-Icon), über den die Sekundärfunktionen ein- und ausgeblendet werden können.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter mit Primär- und Sekundärfunktionen handelt. Die Anforderungen an die einblendbaren Elemente werden beim jeweiligen Element beschrieben.

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter mit Primär- und Sekundärfunktionen handelt. Die Anforderungen an die einblendbaren Elemente werden beim jeweiligen Element beschrieben

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter mit Primär- und Sekundärfunktionen handelt. Die Anforderungen an die einblendbaren Elemente werden beim jeweiligen Element beschrieben.

In HTML existiert kein Element für Aufteilungsschalter. Stattdessen können zwei Schalter mit aussagekräftiger Beschriftung (z. B. „Textfarbe zuweisen“ bzw. „Textfarbe auswählen“) verwendet werden, die jeweils mit TAB den Fokus erhalten.

In ARIA existiert keine Rolle für Aufteilungsschalter. Stattdessen können wie oben beschrieben zwei separate Schalter verwendet werden.

Synonyme: Pop-up-Menü, Tortenmenü, Context menu

Siehe auch: Menü-Schalter, Menü

Kontextmenüs dienen dem Einblenden eines kontextspezifischen Menüs mit Funktion für das aktuell mit der Tastatur fokussierte oder mit dem Zeigeinstrument überfahrene Element (siehe DIN EN ISO 9241-161: 8.29).

Ein Kontextmenü besitzt ein oder mehrere Menüeinträge, die meist vertikal sind. Ein Menüeintrag kann ein Untermenü besitzen. Die Menüeinträge eines Untermenüs sind ebenfalls vertikal angeordnet. Untermenüs können wiederum mehrfach verschachtelt sein, d.h. ein Menüeintrag in einem Untermenü kann ebenfalls ein Untermenü besitzen.

Die Anforderungen an das Menü werden im Abschitt „Menü“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Kontextmenü handelt.

Die Anforderungen an das Menü werden im Kapitel „Menü“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Kontextmenü handelt.

Die Anforderungen an das Menü werden im Kapitel „Menü“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Kontextmenü handelt.

Synonyme: Menüleiste, Menu, Menu bar

Siehe auch: Kontextmenü, Menü-Schalter, Werkzeugleiste, Baumstruktur, Registerkartengruppe

Menüs dienen der Auswahl von Funktionen oder der Navigation (siehe DIN EN ISO 9241-161: 8.26).

Ein Menü besitzt mehrere Menüeinträge, die meist horizontal nebeneinander angeordnet sind. Ein Menüeintrag kann ein Untermenü besitzen. Die Menüeinträge eines Untermenüs sind vertikal angeordnet. Untermenüs können mehrfach verschachtelt sein, d.h. ein Menüeintrag in einem Untermenü kann ebenfalls ein Untermenü besitzen. Pro Hierarchieebene kann jeweils nur ein Untermenü angezeigt werden. Ein Menü kann Menüeinträge enthalten, die sich wie Checkboxen oder Radiobuttons auswählen lassen. Die Menüeinträge können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden

Synonyme: Menü-Button, Schalter mit Menü, Listenschaltfläche, Menüschaltfläche, Menu button

Siehe auch: Aufteilungsschalter, Ausklappliste, Menü, Kontextmenü, Schalter

Menü-Schalter dienen dem Einblenden eines Menüs (siehe DIN EN ISO 9241-161: 8.25).

Ein Menü-Schalter besitzt eine textliche oder grafische Beschriftung sowie einen visuellen Indikator, um den Menü-Schalter als solchen kenntlich zu machen (meist ein Rahmen). Darüber hinaus besitzt der Menü-Schalter einen visuellen Indikator, der auf die Möglichkeit, ein Menü einzublenden hinweist (Pfeil-Icon).

Die Anforderungen an den Schalter und das Menü werden im Abschitt „Schalter“ bzw. „Menü“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über den Schalter ein Menü geöffnet werden kann.

Die Anforderungen an den Schalter und das Menü werden im Abschitt „Schalter“ bzw. „Menü“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über den Schalter ein Menü geöffnet werden kann.

Hinweis: Die Anforderungen an das Menü und die darin enthaltenen Menüeinträge gelten nur, wenn das Menü geöffnet ist.

Synonyme: Registerkarte, Reiter, Karteireiter, Tab

Siehe auch: Akkordeon, Karussell

Registerkartengruppen dienen der Gruppierung und alternierenden Anzeige von Seitenbereichen (siehe DIN EN ISO 9241-161: 8.43).

Eine Registerkartengruppe besteht aus mehreren Registerkarten, deren Inhalt alternierend angezeigt werden. Jede Registerkarte besitzt einen Karteireiter mit Beschriftung, welcher dauerhaft angezeigt wird. Die Auswahl der einzelnen Registerkarten erfolgt über die Karteireiter. Die Karteireiter sind meist horizontal oberhalb der Registerkarten angeordnet. Karteireiter können interaktive Elemente enthalten, z.B. Schalter zum Entfernen des Karteireiters und der zugehörigen Registerkarte.

• JAWS: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkarte [ | gewählt] [Position] von [Anzahl]
• NVDA: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkarte [ | ausgewählt] [Position] von [Anzahl]
• Windows Sprachausgabe: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkartenelement [Position] von [Anzahl] [ | ausgewählt]

Hinweis: Durch JAWS und NVDA erfolgt zwei Mal die Ausgabe „Registerkarte“, zuerst für die Rolle tablist und dann für die Rolle tab. Lediglich die Windows-Sprachausgabe unterscheidet zwischen den beiden Rollen. Die Ausgabe für die Rolle tab wäre ausreichend.

• JAWS: -
• NVDA: -
• Windows Sprachausgabe: [Beschriftung] Registerkartenpanel … Beende [Beschriftung] Registerkartenpanel

Hinweis: Mit JAWS und NVDA ist Beginn und Ende der Registerkarte nicht wahrnehmbar. Die Registerkarten oder Inhalte nach dieser sollten als Regionen ausgezeichnet werden, damit mit dem Screenreader wahrnehmbar ist, welche Inhalte sich innerhalb und außerhalb der Registerkarten befinden.

In HTML existiert kein Element für Registerkartengruppen. Stattdessen kann Folgendes verwendet werden:

• Aufteilung der Informationen auf verschiedene Seiten, die untereinander verlinkt werden,
• Akkordeon,
• Nutzung der entsprechenden ARIA-Rollen.

Bei Registerkartengruppen sollte Folgendes beachtet werden:

• Die Leiste der Karteireiter wird mit role=tablist ausgezeichnet, die einzelnen Karteireiter, die sich als Kindelemente innerhalb der Leiste befinden, mit role=tab.
• Die Leiste der Karteireiter darf außer den Karteireitern keine anderen Elemente enthalten.
• Enthalten die Karteireiter außer ihrer Beschriftung weitere Bedienelemente, so sollte beachtet werden, dass diese mit Assistenztechnologie nicht wahrnehmbar und bedienbar sind. Diese Elemente sollten nicht den Tastaturfokus erhalten können. Stattdessen sollte eine Bedienalternative implementiert und dokumentiert werden. Wenn die Karteireiter z. B. einen Schalter zum Entfernen einer Registerkarte enthalten, so kann z. B. das Entfernen über die ENTF-Taste ermöglicht werden.
• Die Registerkarten werden mit role=tabpanel ausgezeichnet. Die Registerkarten befinden sich im Quellcode unmittelbar nach dem Bereich, der mit role=tablist ausgezeichnet ist. Aus diesem und dem vorhergehenden Grund darf eine Registerkartengruppe nicht für Akkordeons verwendet werden.
• Der aktive Karteireiter, dessen Registerkarte sichtbar ist und der mit TAB den Fokus erhält, wird mit aria-selected=true ausgezeichnet. Alle anderen Karteireiter werden mit aria-selected=false ausgezeichnet. Per aria-controls kann vom Karteireiter auf die ID der Registerkarte verwiesen werden.
• Die Beschriftung der Karteireiter sollte per Textinhalt erfolgen. Die Leiste der Karteireiter und die Registerkarten können mit aria-label oder aria-labelledby beschriftet werden.
• Eine vom Standard abweichende Ausrichtung der Registerkartenleiste kann mit aria-orientation=vertical angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass bei einer vertikal ausgerichteten Registerkartenleiste die Bedienung mit allen Pfeiltasten möglich sein sollte.
• Die Registerkartenleiste sollte auch visuell als solche erkennbar sein, damit sehende Tastaturnutzende die Bedienung mit den Pfeiltasten erkennen können.
• Die Registerkartengruppe sollte mindestens zwei Registerkarten enthalten.
• Karteireiter können mit aria-disabled als deaktiviert ausgezeichnet werden. Es wird empfohlen, deaktivierte Karteireiter in der Tastaturerreichbarkeit mit den Pfeiltasten zu belassen.
• Die gewählte Registerkarte (role=tabpanel) kann mit tabindex=0 ausgezeichnet werden, damit sie nach dem aktiven Karteireiter den Fokus erhält, selbst wenn es sich bei einer Registerkarte nicht um ein Bedienelement handelt.
• Die Darstellung der Registerkartengruppe sollte im Hochkontrast-Modus von Windows überprüft werden. So sollten die Karteireiter und die Registerkarten einen Rahmen besitzen und der visuelle Indikator für den aktiven Karteireiter nicht nur per Farbe vermittelt werden.
• Die sichtbaren Karteireiter und die programmatisch fokussierten Elemente sollten die gleiche Position und Größe besitzen.

Weitere Informationen: tab role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), tablist role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), tabpanel role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Tabs Pattern | APG | WAI | W3C

Synonyme: Textfeld, Edit, Input, Inputfield, Textbox, one line plain text edit control

Siehe auch: Eingabefeld (mehrzeilig), Kennwort-Eingabefeld, Drehfeld, Eingabefeld mit Autocomplete-Funktion, kombiniertes Eingabefeld

Eingabefelder ermöglichen die Eingabe und Bearbeitung von Zeichen (Zahlen, Buchstaben, Sonderzeichen) (siehe DIN EN ISO 9241-161: 8.12).

Ein Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z.B. durch einen Rahmen, eine Linie oder eine abweichender Hintergrundfarbe von der Umgebung abhebt. Im Eingabefeld können sich weitere Bedienelemente befinden, die im Bezug zur Werteingabe stehen.

• JAWS: [Beschriftung] Eingabefeld [Wert] [Hinweis zur Texteingabe]
• NVDA: [Beschriftung] Eingabefeld [Wert]
• Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]

Das Eingabefeld sollte mit dem HTML-Element <input type=text> umgesetzt werden. Für ein Eingabefeld, welches zur Eingabe von Suchbegriffen dient, kann <input type=search> verwendet werden. Die Screenreader geben das Suchfeld als normales Eingabefeld aus, d. h. die Beschriftung muss auf den Zweck, die Suche, hinweisen. Der initiale Wert wird über das value-Attribut übermittelt. Die Beschriftung des Eingabefeldes sollte mit dem Element <label for=ID> mit dem Eingabefeld verknüpft werden. Die maximal erlaubte und minimal erforderliche Länge des Werts kann mit maxlength und minlength festgelegt werden. Beide Werte sind weder visuell noch mit Assistenztechnologien wahrnehmbar. Werden sie verwendet, sollte beim Eingabefeld ein entsprechender Hinweis erfolgen. Wird ein besonderes Eingabeformat verlangt, können anstelle von <input type=text> u. a. die folgenden Elemente verwendet werden:

• <input type=tel> für Telefonnummern,
• <input type=email> für Email-Adressen,
• <input type=url> für Internet-Adressen,
• <input type=text pattern=…> für Eingaben, die dem regulären Ausdruck im pattern-Attribut entsprechen müssen,
• <input type=number> für Zahlen (siehe Drehfeld),
• <input type=date>, <input type=time> usw. für Datums- und Zeitangaben (siehe Datumswähler).

Diese Eingabefelder mit einem vordefinierten Format werden vom Browser automatisch validiert. Die Fehlermeldungen der Browser sind jedoch nicht barrierefrei und sollten somit durch eigene Fehlermeldungen der Anwendung ersetzt oder ergänzt werden (siehe auch: Browser-Validierung des required-Attributs im Praxistipp programmatische Kennzeichnung von Pflichtfeldern in Web-Anwendungen).

Die Eingabefelder für Telefonnummern, Email- und Internet-Adressen sowie Eingabefelder mit dem pattern-Attribut sind weder visuell noch mit Assistenztechnologie als solche zu erkennen – sie werden als normale Eingabefelder angezeigt bzw. vom Screenreader ausgegeben. Deshalb müssen sie aussagekräftig beschriftet werden und sollten zusätzlich Bedienhinweise zum erforderlichen Eingabeformat erhalten.

Mit dem Attribut inputmode kann festgelegt werden, welche virtuelle Tastatur auf Mobilgeräten angezeigt werden soll, weil entsprechende Eingaben erwartet werden (z. B. Eingabe von Zahlen, Text, URLs, Email-Adressen). Die Verwendung von inputmode bewirkt keine automatische Browser-Validierung. Sofern sich die zu verwendende Tastatur nicht bereits aus dem type-Attribut des Eingabefeldes ergibt, wird die Verwendung von inputmode empfohlen, da auch Assistenztechnologien diese Information sinnvoll nutzen können, um z. B. entsprechende virtuelle Tastaturen anzuzeigen. Es sollte jedoch beachtet werden, dass das Attribut inputmode nicht notwendige Eingabehinweise ersetzt.
Für einen Platzhalter kann das Attribut placeholder verwendet werden. Es wird allerdings empfohlen, Eingabehinweise neben dem Feld anzuzeigen und per aria-describedby mit dem Eingabefeld zu verknüpfen. Das placeholder-Attribut hat folgende Nachteile:

• Die Kontraste sind häufig nicht ausreichend (entweder zum Hintergrund oder zum Text im Eingabefeld, so dass Platzhalter und Wert schlecht zu unterscheiden sind).
• Der Platzhalter wird nicht angezeigt, sobald das Feld einen Wert enthält.

Ein Eingabefeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden.

Ein Eingabefeld kann mit required als Pflichtfeld ausgezeichnet werden.

Weitere Informationen: 4.10.5 The input element - HTML Standard (whatwg.org)

Wird das Eingabefeld nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=textbox übermittelt.
• Für ein Eingabefeld, welches zur Eingabe von Suchbegriffen dient, kann role=searchbox verwendet werden. Die Screenreader geben das Suchfeld als normales Eingabefeld aus, d. h. die Beschriftung muss auf den Zweck, die Suche, hinweisen.
• Die Beschriftung des Eingabefeldes kann per aria-label oder aria-labelledby erfolgen.
• Der Wert des Eingabefeldes ergibt sich aus dem Textinhalt des Elements, welches mit role=textbox ausgezeichnet ist.
• Das Eingabefeld kann mit aria-required als Pflichtfeld, mit aria-disabled als deaktiviert und mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Für einen Platzhalter wird aria-placeholder verwendet.
• Die Darstellung des Eingabefeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare Eingabefeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
  

Weitere Informationen: textbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Synonyme: Textfeld, Textarea, multi-line text input, multiline plain text edit control

Siehe auch: Eingabefeld (einzeilig), Rich Text Editor

Mehrzeilige Eingabefelder ermöglichen die Eingabe von langen Textinhalten (siehe DIN EN ISO 9241-161: 8.45).

Ein mehrzeiliges Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z.B. durch einen Rahmen vom Hintergrund abhebt. Der Rahmen kann einen Griff zum Skalieren des Eingabefeldes besitzen. Ein mehrzeiliges Eingabefeld kann Scrollbalken besitzen. Die Anforderungen an den Griff und Scrollbalken sind in den entsprechenden Abschnitten beschrieben.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

• JAWS: [Beschriftung] Eingabefeld [Hinweis auf enthaltenen Wert] [Hinweis zur Texteingabe]
• NVDA: [Beschriftung] Eingabefeld mehrzeilig [Inhalt der aktuellen Zeile]
• Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]

Hinweise:

• Mit JAWS ist der Wert des Eingabefeldes beim Fokussieren mit TAB nicht wahrnehmbar. Erst bei der Navigation durch das Feld wird der Inhalt zeilenweise ausgegeben.
• Mit NVDA ist der Wert des Eingabefeldes beim Fokussieren mit TAB nur teilweise wahrnehmbar, weil lediglich die aktuelle Zeile ausgegeben wird. Erst bei der Navigation durch das Feld wird der Inhalt zeilenweise ausgegeben.
• Wenn das Eingabefeld leer ist, ist mit JAWS und der Windows Sprachausgabe der Unterschied zwischen einem ein- und mehrzeiligem Eingabefeld nicht wahrnehmbar.
• Wenn der Wert des Eingabefeldes Leerzeilen enthält und sich der Textcursor in einer leeren Zeile befindet, ist mit NVDA beim Fokussieren mit TAB nicht wahrnehmbar, dass das Eingabefeld einen Wert enthält, weil lediglich „leer“ ausgegeben wird.

Hinweis: Mehrzeilige Eingabefelder sollten nur verwendet werden, wenn sehr lange Eingaben erwartet werden oder die Eingabe von Absatzumbrüchen (EINGABE-Taste) ermöglicht werden muss. Ansonsten sollte ein einzeiliges Eingabefeld verwendet werden, weil die Zugänglichkeit der mehrzeiligen Eingabefelder für Screenreader-Nutzende schlechter ist.

Das Eingabefeld sollte mit dem HTML-Element <textarea> umgesetzt werden.
Der initiale Wert wird über den Textinhalt des Elements übermittelt.
Die Beschriftung des Eingabefeldes sollte mit dem Element <label for=ID> mit dem Eingabefeld verknüpft werden.
Die maximal erlaubte und minimal erforderliche Länge des Werts kann mit maxlength und minlength festgelegt werden. Beide Werte sind weder visuell noch mit Assistenztechnologien wahrnehmbar. Werden sie verwendet, sollte beim Eingabefeld ein entsprechender Hinweis erfolgen.
Die visuelle Größe des Eingabefeldes kann mit den Attributen cols und rows festgelegt werden. Es wird empfohlen, die Größe stattdessen per CSS zu definieren, damit das mehrzeilige Eingabefeld responsiv gestaltet werden kann, um horizontales Scrollen bei 320 px Bildschirmbreite zu vermeiden. Die initiale Größe des Eingabefeldes sollte ausreichend groß sein, weil Tastaturnutzende die Größe des Feldes nicht ändern können – der vom Browser automatisch angezeigte Griff ist nur mit einem Zeigegerät bedienbar.
Für einen Platzhalter kann das Attribut placeholder verwendet werden. Es wird allerdings empfohlen, Eingabehinweise neben dem Feld anzuzeigen und per aria-describedby mit dem Eingabefeld zu verknüpfen. Das placeholder-Attribut hat folgende Nachteile:

• Die Kontraste sind häufig nicht ausreichend (entweder zum Hintergrund oder zum Text im Eingabefeld, so dass Platzhalter und Wert schlecht zu unterscheiden sind).
• Der Platzhalter wird nicht angezeigt, sobald das Feld einen Wert enthält.

Ein Eingabefeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden. Ein Eingabefeld kann mit required als Pflichtfeld ausgezeichnet werden.

Weitere Informationen: 4.10.11 The textarea element - HTML Standard (whatwg.org)

Wird das Eingabefeld nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=textbox und dem ARIA-Attribut aria-multiline=true übermittelt.
• Die Beschriftung des Eingabefeldes kann per aria-label oder aria-labelledby erfolgen.
• Der Wert des Eingabefeldes ergibt sich aus dem Textinhalt des Elements, welches mit role=textbox ausgezeichnet ist.
• Das Eingabefeld kann mit aria-required als Pflichtfeld, mit aria-disabled als deaktiviert und mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Für einen Platzhalter wird aria-placeholder verwendet.
• Die Darstellung des Eingabefeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare Eingabefeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: textbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Synonyme: Passwort-Eingabefeld, Passwortfeld, Password input field

Siehe auch: Eingabefeld (einzeilig), Authentifizierung

Kennwort-Eingabefelder ermöglichen die Eingabe eines Passworts.

Ein Kennwort-Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z.B. durch einen Rahmen, eine Linie oder eine abweichende Hintergrundfarbe von der Umgebung abhebt. Der eingegebene Wert wird nur maskiert angezeigt. Ein Kennwort-Eingabefeld kann einen Schalter enthalten, um die Maskierung des Werts aufzuheben.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.

• JAWS: [Beschriftung] Eingabefeld für Passwörter [maskierter Wert] [Hinweis zur Texteingabe]
• NVDA: [Beschriftung] Eingabefeld geschützt [maskierter Wert]
• Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]

Hinweise:

• Mit der Windows Sprachausgabe ist der Unterschied zwischen einem Eingabefeld und einem Kennwort-Eingabefeld nicht wahrnehmbar.
• Der maskierte Wert, der „schwarzer Kreis“ (•), wird bei der Eingabe als „Stern“ (JAWS, NVDA) bzw. „versteckt“ (Windows Sprachausgabe), ausgegeben. Ein bereits eingegebener Wert wird als eine Folge von „Aufzählungszeichen“ ausgegeben, wobei JAWS die Anzahl der Zeichen standardmäßig auf drei verkürzt.

Das Kennwort-Eingabefeld muss mit dem HTML-Element <input type=password> umgesetzt werden, damit das eingegebene Passwort von der Assistenztechnologie nicht ausgegeben wird.
Die Beschriftung des Kennwort-Eingabefeldes sollte mit dem Element <label for=ID> mit dem Kennwort-Eingabefeld verknüpft werden.
Ein Kennwort-Eingabefeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden. Ein Kennwort-Eingabefeld kann mit required als Pflichtfeld ausgezeichnet werden.
Wenn bei der Vergabe des Kennworts bestimmte Regeln gelten, sollte Folgendes beachtet werden:

• Die Regeln sollten beim Kennwort-Eingabefeld erläutert werden.
• Wenn die Regeln kurz und nicht strukturiert sind, sollte das Kennwort-Eingabefeld programmatisch mit den Regeln verknüpft werden (z. B. per aria-describedby).
• Wenn die Regeln lang oder strukturiert sind, sollten sich diese im Quellcode vor dem Kennwort-Eingabefeld befinden, damit die Lesereihenfolge korrekt ist. Die Regeln können mit einer Überschrift versehen werden (z. B. „Hinweise zur Kennwort-Eingabe“). Beim Eingabefeld sollte die Accessible Description darauf hinweisen, dass Regeln vorhanden sind (z. B. „Beachten Sie die Eingabehinweise für Kennwörter vor diesem Feld“).
• Wenn die Regeln bei der Eingabe automatisch validiert werden, sollte dies auch mit Assistenztechnologie wahrnehmbar sein, z. B. indem das Ergebnis der Validierung als Live-Region ausgezeichnet wird.

Weitere Informationen: 4.10.5.1.6 Password state (type=password) - HTML Standard (whatwg.org)

In ARIA existiert keine Rolle für Kennwort-Eingabefelder. Stattdessen muss das entsprechende HTML-Element für Kennwort-Eingabefelder verwendet werden, damit das eingegebene Passwort von der Assistenztechnologie nicht ausgegeben wird.

Synonyme: Eingabefeld mit Vorschlagsliste, Autovervollständigungssuche, Auto-Suggest Box

Siehe auch: Auswahlliste, Ausklappliste, Menüschaltfläche, Eingabefeld (einzeilig), kombiniertes Eingabefeld

Eingabefelder mit Autocomplete-Funktion ermöglichen die freie Texteingabe und die Auswahl von Optionen aus einer Liste, wobei die Liste erst nach erfolgter Texteingabe geöffnet wird.

Im geschlossenen Status besteht ein Eingabefeld mit Autocomplete-Funktion aus einem Eingabefeld. Im geöffneten Status wird zusätzlich darunter eine Auswahlliste angezeigt (ggf. mit Scrollbalken). Die Optionen der Auswahlliste können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden.

Eingabefelder mit Autocomplete-Funktion können auch automatisch den ersten Treffer in das Eingabefeld eintragen, so dass dieser unmittelbar übernommen werden kann (Inline-Autocomplete). Dabei bleibt der Textcursor jedoch an der Stelle des zuletzt eingegebenen Zeichens.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit Autocomplete-Funktion handelt.

Synonyme: Drehschalter, Schaltfläche für die schrittweise Weiterschaltung, Spinbutton, Spinner, Spin Control

Siehe auch: Eingabefeld, Schieberegler, Ausklappliste, kombiniertes Eingabefeld, Schalter

Drehfelder ermöglichen die Auswahl eines Werts aus einem Wertebereich mit kontinuierlichen Daten (z.B. Wochentage, Jahre). Ein Drehfeld besteht aus zwei Schaltern, mit denen der vorhergehende und der folgende Wert ausgewählt werden kann, sowie einem Eingabefeld zur Anzeige des Werts. Das Eingabefeld zur Anzeige des Werts kann schreibgeschützt sein oder die direkte Texteingabe erlauben. Der Wertebereich des Drehfeldes kann beschränkt oder unbeschränkt sein, d.h. es kann einen Minimalwert, Maximalwert oder beides besitzen (siehe DIN EN ISO 9241-161: 8.41).

• JAWS: [Beschriftung] Drehfeld [Wert] [Hinweis zur Texteingabe und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Drehschalter | Drehschalter bearbeitbar [Wert]
• Windows Sprachausgabe: [Beschriftung] Netz | Drehfeld [Wert] Minimum [minimaler Wert] und Maximum [maximaler Wert]

Hinweise:

• Die Windows-Sprachausgabe gibt die HTML-Drehfelder als „Netz“ und die ARIA-Drehfelder als „Drehfeld“ aus.
• Lediglich mit der Windows-Sprachausgabe ist der Mindest- und Höchstwert wahrnehmbar.
• Lediglich mit NVDA ist der Unterschied zwischen Drehfeldern mit und ohne Texteingabe wahrnehmbar.

Das Drehfeld sollte mit dem HTML-Element <input type=number> umgesetzt werden. Der initiale Wert wird über das value-Attribut übermittelt.
Die Schrittweite sowie der Mindest- und Höchstwert können über die Attribute step, min und max übermittelt werden..
Die Beschriftung des Drehfeldes sollte mit dem Element <label for=ID> mit dem Drehfeld verknüpft werden..
Ein Drehfeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden. Ein Drehfeld kann mit required als Pflichtfeld ausgezeichnet werden. .
Weitere Informationen: 4.10.5.1.12 Number state (type=number) - HTML Standard (whatwg.org)

Achtung: Auf Mobilgeräten kann ein ARIA-Drehfeld ohne Texteingabe mit Assistenztechnologie ggf. nicht bedient werden, weil keine Gesten zur Bedienung nicht-nativer Drehfelder implementiert wurden. Dies gilt insbesondere, wenn die Schalter zum Erhöhen bzw. Verringern des Werts Kindelemente des Drehfeldes sind.
Darüber hinaus sind mit den meisten Screenreadern die Unterschiede zwischen Drehfeldern mit und ohne Texteingabe nicht wahrnehmbar. Es wird deshalb empfohlen, nur Drehfelder mit der Möglichkeit zur Texteingabe zu implementieren.

Wird das Drehfeld nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=spinbutton übermittelt.
• Wenn sich die Rolle spinbutton an einem Eingabefeld befindet oder an einem Element, welches ein Eingabefeld enthält, handelt es sich um ein Drehfeld mit Texteingabe. Ansonsten handelt es sich um ein Drehfeld ohne Texteingabe.
• Die Beschriftung des Drehfeldes kann per aria-label oder aria-labelledby erfolgen. Befindet sich die ARIA-Rolle spinbutton an einem HTML-Eingabefeld, kann dieses auch per<label for=ID> beschriftet werden.
• Der aktuelle Wert muss mit aria-valuenow angegeben werden. Befindet sich die ARIA-Rolle spinbutton an einem HTML-Eingabefeld, wird dessen Wert als aktueller Wert des Drehfeldes verwendet.
• Mit aria-valuetext kann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts im aria-valuenow ausgegeben werden soll.
• Der minimale und der maximale Wert können mit aria-valuemin und aria-valuemax angegeben werden.
• Die Angabe einer Schrittweite ist bei ARIA-Drehfeldern nicht möglich.
• Das Drehfeld kann mit aria-disabled als deaktiviert und mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Schalter zum Erhöhen bzw. Verringern des Werts sollten nicht separat den Tastaturfokus erhalten.
• Die Darstellung des Drehfeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare Drehfeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: spinbutton role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Spinbutton Pattern | APG | WAI | W3C

Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox

Siehe auch: Mehrfach-Auswahlliste, Ausklappliste, Radiobuttongruppe, Baumstruktur

Auswahllisten ermöglichen die Auswahl einer Option aus einer Liste (siehe DIN EN ISO 9241-161: 8.39).

In der Auswahlliste werden alle verfügbaren Optionen angezeigt (ggf. mit Scrollbalken). Der aktuelle Wert ist hervorgehoben. Die Optionen können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden. Die fokussierte Option ist identisch mit der gewählten Option.

Beim Fokussieren der Auswahlliste:

• JAWS:
  • Ohne gewählten Listeneintrag: [Beschriftung] Listenfeld [Hinweis zur Bedienung mit den Pfeiltasten]
  • Mit gewähltem Listeneintrag: [Beschriftung] Listenfeld [Wert] [Position] von [Anzahl] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA:
  • Ohne gewählten Listeneintrag: [Beschriftung] Liste
  • Mit gewähltem Listeneintrag: [Beschriftung] Liste [Wert] [Position] von [Anzahl]
• Windows Sprachausgabe:
  • Ohne gewählten Listeneintrag: [Beschriftung] Erfordert Auswahl [Anzahl]
  • Mit gewähltem Listeneintrag: [Beschriftung] [Wert] [Position] von [Anzahl] ausgewählt [Wert] [Position] von [Anzahl]

Bei der Pfeiltastennavigation durch die Auswahlliste:

• JAWS: [Wert] [Position] von [Anzahl]
• NVDA: [Wert] [Position] von [Anzahl]
• Windows Sprachausgabe: [Wert] [Position] von [Anzahl] ausgewählt

Beim Lesen mit dem virtuellen Cursor:

• JAWS:
  • Ohne gewählten Listeneintrag: [Beschriftung] Listenfeld
  • Mit gewähltem Listeneintrag: [Beschriftung] [Wert] Listeneintrag gewählt [Position] von [Anzahl]
• NVDA:
  • Ohne gewählten Listeneintrag: [Beschriftung] Liste anklickbar [erster Listeneintrag]
  • Mit gewähltem Listeneintrag: [Beschriftung] Liste anklickbar [Wert]
• Windows Sprachausgabe: [Beschriftung] [Position] von [Anzahl] [ | ausgewählt] [Listeneintrag]

Hinweise:

• JAWS und NVDA geben die Gruppierung einer HTML-Auswahlliste mit
• JAWS und NVDA geben die Gruppierung einer ARIA-Auswahlliste mit role=group korrekt aus. Die Windows Sprachausgabe gibt die Gruppierung mit role=group nur beim Lesen mit dem virtuellen Cursor aus.
• Beim Lesen mit dem virtuellen Cursor gibt JAWS nur den gewählten Listeneintrag, NVDA den gewählten oder ersten Listeneintrag und die Windows Sprachausgabe alle Listeneinträge aus.

Die Auswahlliste sollte mit den HTML-Elementen <select> und <option> mit einem Wert größer 1 bei dem size-Attribut und ohne multiple-Attribut umgesetzt werden.
Die Listeneinträge können mit dem <optgroup>-Element gruppiert werden. Die Gruppierung sollte jedoch vermieden werden, weil viele Screenreader die Gruppenbeschriftung (die mit dem label-Attribut angegeben wird) nicht ausgeben.
Der initiale gewählte Listeneintrag kann mit dem selected-Attribut gesetzt werden. In jeder Auswahlliste sollte initial ein Listeneintrag ausgewählt sein, weil Tastaturnutzer bei der Navigation durch die Radiobuttons automatisch eine Auswahl treffen, die anschließend nicht mehr rückgängig gemacht werden kann. Initial sollte der Listeneintrag gewählt werden, dessen Auswahl entweder am wahrscheinlichsten ist oder der eine neutrale Option (z. B. „Keine Angabe“) enthält.
Die Beschriftung sollte mit dem Element <label for=ID> mit der Auswahlliste verknüpft werden.
Eine Auswahlliste, eine Gruppe von Listeneinträgen sowie die einzelnen Listeneinträge können als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) ausgezeichnet werden.
Eine Auswahlliste kann mit required als Pflichtfeld ausgezeichnet werden.
Weitere Informationen: 4.10.7 The select element - HTML Standard (whatwg.org)

Wird die Auswahlliste nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Auswahlliste wird mit role=listbox ausgezeichnet und enthält die Listeneinträge, die mit role=option ausgezeichnet werden.
• Die Listeneinträge können innerhalb eines Elements, welches mit role=group ausgezeichnet wird, gruppiert werden. Die Gruppe wird mit aria-label oder aria-labelledby beschriftet.
• Der gewählte Listeneintrag wird mit aria-selected=true ausgezeichnet, alle anderen mit aria-selected=false. Der gewählte Listeneintrag kann auch mit aria-checked übermittelt werden – das ist allerdings für Auswahllisten ohne Mehrfach-Auswahl nicht empfehlenswert.
• Alternativ wird der gewählte Listeneintrag nicht explizit ausgezeichnet, sondern ergibt sich während der Bedienung automatisch aus dem fokussierten Listeneintrag. Dies ist jedoch nicht zu empfehlen, weil dann die Assistenztechnologie im nicht-fokussierten Zustand den gewählten Listeneintrag nicht zuverlässig ermitteln kann.
• Die Beschriftung der Auswahlliste kann per aria-label oder aria-labelledby erfolgen.
• Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Die Auswahlliste kann mit aria-disabled als deaktiviert ausgezeichnet werden.
• Die Auswahlliste kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Auswahlliste kann mit aria-required als Pflichtfeld ausgezeichnet werden.
• Eine vom Standard abweichende Ausrichtung der Auswahlliste kann mit aria-orientation=horizontal angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass bei horizontal ausgerichteten Listeneinträgen die Bedienung mit allen Pfeiltasten möglich sein sollte.
• Die Darstellung der Auswahlliste sollte im Hochkontrast-Modus von Windows überprüft werden.
• Die sichtbare Auswahlliste und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
• Bei der Navigation durch die Listeneinträge sollte der fokussierte Listeneintrag im sichtbaren Bereich angezeigt werden.

Weitere Informationen: listbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Listbox Pattern | APG | WAI | W3C

Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox

Siehe auch: Auswahlliste, Ausklappliste, Checkbox-Gruppe, Baumstruktur

Mehrfach-Auswahllisten ermöglichen die Auswahl mehrerer Optionen aus einer Liste (siehe DIN EN ISO 9241-161: 8.39).

In der Mehrfach-Auswahlliste werden alle wählbaren Optionen angezeigt (ggf. mit Scrollbalken). Die gewählten Optionen sind hervorgehoben. Die Optionen können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden. Die fokussierte Option ist nicht automatisch identisch mit der gewählten Option.

Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.

Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.

Hinweis: Eine vereinfachte, aber derzeit wenig etablierte Bedienung der Mehrfachauswahl wird im Praxistipp vereinfachte Bedienung der Mehrfach-Auswahl beschrieben. Es wird empfohlen, die implementierte Bedienung für die Mehrfachauswahl unabhängig von der gewählten Methode in der Anwendung oder Hilfe zu beschreiben

Hinweis: Eine vereinfachte, aber derzeit wenig etablierte Bedienung der Mehrfachauswahl wird im Praxistipp vereinfachte Bedienung der Mehrfachauswahl beschrieben. Es wird empfohlen, die implementierte Bedienung für die Mehrfachauswahl unabhängig von der gewählten Methode in der Anwendung oder Hilfe zu beschreiben.

Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt

Die Möglichkeit der Mehrfach-Auswahl ist in der Regel nicht zu erkennen, weil sich die Mehrfach-Auswahllisten visuell nicht von Auswahllisten unterscheiden. Darüber ist die Mehrfach-Auswahl (insbesondere die Auswahl nicht-benachbarter Werte) mit der Tastatur und dem Zeigeinstrument erschwert. Mit dem Screenreader sind darüber hinaus häufig die gewählten Elemente nicht wahrnehmbar. Deswegen wird empfohlen, Mehrfach-Auswahllisten durch andere Elemente zu ersetzen, in einer einfachen Form umzusetzen oder deren Funktion und Bedienung zu beschreiben. Alternativen für Mehrfach-Auswahllisten wären u.a.:

• Gruppe von Checkboxen oder
• zwei Auswahllisten oder Mehrfach-Auswahllisten nebeneinander, wobei die erste Liste die verfügbaren Werte und die zweite Liste die gewählten Werte anzeigt. Mit Schaltern können Werte aus der ersten Liste in die zweite verschoben oder aus diesen entfernt werden (siehe Screenshot).

Eine einfache Bedienung von Mehrfach-Auswahllisten kann wie folgt umgesetzt werden:

• mit dem Zeigeinstrument: Klick auf einen Wert ändert den Status (gewählt oder nicht gewählt)
• mit der Tastatur: Aktivierung eines Werts mit der LEER-Taste ändert den Status (gewählt oder nicht gewählt).

Eine einfache Bedienung von Mehrfach-Auswahllisten kann wie folgt umgesetzt werden:

• mit dem Zeigeinstrument: Klick auf einen Wert ändert den Status (gewählt oder nicht gewählt)
• mit der Tastatur: Aktivierung eines Werts mit der LEER-Taste ändert den Status (gewählt oder nicht gewählt).

• JAWS:
  • Ohne gewählten Listeneintrag: [Beschriftung] Erweitertes Listenfeld [Hinweis zur Bedienung mit den Pfeiltasten]
  • Mit gewählten Listeneinträgen: [Beschriftung] Erweitertes Listenfeld [fokussierter Listeneintrag] [Position und Anzahl] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA:
  • Ohne gewählten Listeneintrag: [Beschriftung] Liste
  • Mit gewählten Listeneinträgen: [Beschriftung] Liste [fokussierter Listeneintrag] [Position und Anzahl]
• Windows Sprachausgabe:
  • Ohne gewählten Listeneintrag: [Beschriftung] Gewählt unterstützt Mehrfachauswahl [Anzahl]
  • Mit gewählten Listeneinträgen: [Beschriftung] [fokussierter Listeneintrag] [Position und Anzahl] ausgewählt.

Achtung: Mit dem Screenreader sind die gewählten Listeneinträge im Formularmodus nicht wahrnehmbar. Auch die Möglichkeit der Mehrfach-Auswahl ist teilweise nicht wahrnehmbar.
Deswegen wird empfohlen, ein alternatives Element zu verwenden (siehe Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl).

Achtung: Aus folgenden Gründen ist die Tastaturbedienung erschwert:

• Für die Mehrfach-Auswahl sind Modifikationstasten notwendig, die ggf. nicht bekannt sind. Bei alten Browsern ist die Mehrfach-Auswahl mit der Tastatur nicht möglich bzw. müssen abweichende Modifikationstasten verwendet.
• Bei der Mehrfach-Auswahl sind zwar die gewählten Listeneinträge sichtbar, aber nicht der aktuell fokussierte Listeneintrag.

Deswegen wird empfohlen, ein alternatives Element zu verwenden (siehe Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl).

Die Umsetzungshinweise für die HTML-Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Hinweise gegeben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.

• Die Mehrfach-Auswahlliste sollte mit dem multiple-Attribut umgesetzt werden.
• Der initial gewählten Listeneinträge werden mit dem selected-Attribut ausgezeichnet.

Die Umsetzungshinweise für die ARIA-Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Hinweise gegeben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.

• Die Möglichkeit der Mehrfach-Auswahl wird mit aria-multiselectable=true übermittelt.
• Die gewählten Listeneinträge werden mit aria-selected=true oder aria-checked=true ausgezeichnet, alle anderen mit aria-selected=false bzw. aria-checked=false.
• Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den fokussierten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen. In beiden Fällen ist darauf zu achten, dass die Navigation durch die Mehrfach-Auswahlliste nicht automatisch den Status der Listeneinträge (gewählt oder nicht gewählt) ändert

Synonyme: Hierarchische Liste, Baum, Baumansicht, Strukturansicht, Tree, Treeview

Siehe auch: Auswahlliste, Mehrfach-Auswahlliste, Hierarchische Tabelle, Menü

Baumstrukturen ermöglichen die Darstellung und Bedienung hierarchisch strukturierter Listen (siehe DIN EN ISO 9241-161: 8.17). Die verschachtelten Listen können ein- und ausgeblendet werden. Ein Schalter mit Indikator bei den Listeneinträgen zeigt an, ob die untergeordnete Liste ein- oder ausgeblendet ist. Baumstrukturen können zu unterschiedlichen Zwecken verwendet werden, bspw.:

• Auswahl eines oder mehrerer Listeneinträge innerhalb eines Formulars (wie bei einer Auswahlliste oder Mehrfach-Auswahlliste),
• Navigation (wie bei einer Linkliste oder einem Menü),
• Anzeige von Daten (wie bei einer Liste).

Hinweis 1: Bei Baumstrukturen mit der Mehrfachauswahl sollen darüber hinaus die Tastaturbedienung für die Mehrfachauswahl implementiert werden, wie sie bei der Mehrfach-Auswahlliste beschrieben ist.
Hinweis 2: Die Tastaturbedienung der Baumstrukturen kann je nach verwendeter Programmiersprache oder Framework vom hier beschriebenen Standard abweichen (z. B. Ein- und Ausblenden der untergeordneten Listen mit PLUS und MINUS). Die abweichende Tastaturbedienung sollte in der Anwendung und Hilfe beschrieben.

Hinweis: Bei Baumstrukturen mit der Mehrfachauswahl sollen darüber hinaus die Zeigeinstrumentbedienung für die Mehrfachauswahl implementiert werden, wie sie bei der Mehrfach-Auswahlliste beschrieben ist.

Beim Fokussieren der Baumstruktur:

• JAWS: [Beschriftung] Strukturansicht [Listeneintrag] [ | offen | geschlossen] [Position] von [Anzahl] [Hinweis zur Navigation und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Baumansicht [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl] Ebene [Zahl]
• Windows Sprachausgabe: [Beschriftung] Struktur [Listeneintrag] [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet]

Bei der Pfeiltastennavigation durch die Baumstruktur:

• JAWS:
  • Beim Wechseln der Ebene: Ebene [Zahl] [Listeneintrag] [ | offen | geschlossen] [Position] von [Anzahl]
  • Innerhalb der gleichen Ebene: [Listeneintrag] [ | offen | geschlossen]
• NVDA:
  • Beim Wechseln der Ebene: Ebene [Zahl] [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl]
  • Innerhalb der gleichen Ebene: [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl] Ebene [Zahl]
• Windows Sprachausgabe: [Listeneintrag] [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet]

Beim Lesen mit dem virtuellen Cursor:

• JAWS:
  • ohne gewähltes Element: [Beschriftung] Strukturansicht
  • mit gewähltem Element: [Beschriftung] Strukturelement [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl]
• NVDA: [Beschriftung] Baumansicht [ | erweitert | reduziert] Ebene [Zahl] [Listeneintrag]
• Windows Sprachausgabe: [Beschriftung] Struktur [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet] [Listeneintrag]

Hinweise:

• JAWS gibt beim Lesen mit dem virtuellen Cursor nur die gewählten Elemente aus (d. h. Elemente, die z. B. mit tabindex=0 oder aria-selected=true ausgezeichnet sind).
• NVDA gibt beim Lesen mit dem virtuellen Cursor den ersten Listeneintrag sowie alle sichtbaren verschachtelten Listeneinträge des ersten Listeneintrags aus, nicht jedoch den oder die gewählten Listeneinträge.
• Die Windows Sprachausgabe gibt beim Lesen mit dem virtuellen Cursor alle sichtbaren Listeneinträge aus.
• Die Windows-Sprachausgabe gibt aufgrund des impliziten bzw. expliziten aria-level bei jedem Listeneintrag fälschlicherweise „Überschriftenebene [Zahl]“ aus.

In HTML existiert kein Element für Baumstrukturen. Stattdessen kann Folgendes verwendet werden:

• verschachtelte Listen (mit den Elementen <ul>, <li>) mit Schaltern, die zum Ein- und Ausblenden untergeordneter Listeneinträge dienen und die mit der TAB-Taste den Fokus erhalten oder
• Nutzung der entsprechenden ARIA-Rollen.

Bei Baumstrukturen sollte Folgendes beachtet werden:

• Die Baumstruktur wird mit role=tree ausgezeichnet und enthält die Listeneinträge, die mit role=treeitem ausgezeichnet werden.
• Die verschachtelten Listeneinträge werden innerhalb eines Elements, welches mit role=group ausgezeichnet wird, gruppiert. Die Gruppe wiederum befindet sich innerhalb des übergeordneten Listeneintrags, der mit role=treeitem ausgezeichnet ist.
• Der Status der Listeneinträge (geöffnet oder geschlossen) wird mit aria-expanded übermittelt.
• Der aktuelle Listeneintrag wird mit aria-selected=true, alle anderen mit aria-selected=false ausgezeichnet.
• Listeneinträge können zusätzlich mit aria-checked als aktiviert bzw. nicht aktiviert ausgezeichnet werden, sofern die Baumstruktur diese Funktionalität anbietet (z. B. visuell durch Checkboxen bei den Listeneinträgen). Sofern mit aria-checked eine Mehrfach-Auswahl der Listeneinträge möglich ist, wird dies per aria-multiselectable=true übermittelt.
• Die Beschriftung der Baumstruktur kann per aria-label oder aria-labelledby erfolgen. Die Beschriftung der Listeneinträge sollte per Textinhalt erfolgen. Die Gruppen werden nicht beschriftet.
• Bei der Navigation durch die Listeneinträge der Baumstruktur müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Die Baumstruktur darf außer den Gruppen und Listeneinträgen keine anderen Elemente enthalten.
• Die Baumstruktur kann mit aria-required als Pflichtfeld und mit aria-disabled als deaktiviert ausgezeichnet werden.
• Die Darstellung der Baumstruktur sollte im Hochkontrast-Modus von Windows überprüft werden. So sollten z. B. die Icons, die den Status der Listeneinträge übermitteln, gut erkennbar sein.
• Die sichtbaren Listeneinträge und die programmatisch fokussierten Elemente sollten die gleiche Position und Größe besitzen.

Weitere Informationen: tree role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), treeitem role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Tree View Pattern | APG | WAI | W3C

Synonyme: Anfasser, Handle, Control point

Siehe auch: Bereichstrenner

Ein Griff dient dem räumlichen Bearbeiten eines Elements, wie z.B. einer Grafik, eines Textblocks oder eines Anwendungsfensters (siehe DIN EN ISO 9241-161: 8.16). Über den Griff kann das Element z.B. skaliert, gedreht, verzerrt oder verschoben werden.

Ein Griff besteht oft aus einem kleinen Kreis oder Viereck an den Ecken des bearbeitbaren Elements. Zusätzlich können beim Griff die Bearbeitungsmöglichkeiten angezeigt werden. Griffe werden häufig nur angezeigt, wenn das dazugehörige Element den Fokus besitzt. Bei Anwendungsfenstern kann der Griff auch unsichtbar sein. Ein Griff kann ein Kontextmenü für weitere Funktionen besitzen.

Hinweis: Die folgenden Anforderungen gelten nur, wenn der Griff mit der Tastatur den Fokus erhält.

Mögliche Bedienalternativen für Tastaturnutzende können z.B. sein:

• Skalieren und Verschieben der Anwendungsfenster über die Windows-Methoden (ALT+LEER > Verschieben/Größe ändern > PFEIL AUF/AB/LINKS/RECHTS),
• Verwendung von Tastaturkürzeln, die in der Anwendung und Hilfe beschrieben sind,
• Eingabe expliziter Werte für die Größe, Lage oder Drehung eines Objekts in einem Dialogfenster, welches z.B. per Tastaturkürzel oder Kontextmenü aufgerufen wird (diese Bedienalternative soll in der Anwendung und Hilfe beschrieben werden).

Hinweis: Die folgenden Anforderungen gelten nur, wenn der Griff mit der Tastatur den Fokus erhält.

Synonyme: Kombinationsfeld, Combobox

Siehe auch: Auswahlliste, Ausklappliste, Menüschaltfläche, Eingabefeld mit Autocomplete-Funktion

Kombinierte Eingabefelder ermöglichen die Texteingabe und die Auswahl von Optionen aus einer Liste, wobei die Liste geöffnet und geschlossen werden kann (siehe DIN EN ISO 9241-161: 8.7).

Im geschlossenen Status besteht ein kombiniertes Eingabefeld aus einem Eingabefeld und einem Schalter (mit Pfeil-Icon) zum Öffnen der Liste, der sich rechts vom Eingabefeld befindet. Im geöffneten Status wird zusätzlich darunter eine Auswahlliste angezeigt (ggf. mit Scrollbalken). Die Optionen der Auswahlliste können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden.

Kombinierte Eingabefelder können sehr unterschiedlich umgesetzt werden. Umsetzungsvarianten sind u.a.:

• Solange das Eingabefeld leer ist, wird im geöffneten Status unter dem Eingabefeld eine Auswahlliste mit allen Optionen angezeigt. Sofern das Eingabefeld Text enthält, werden in der Auswahlliste unter dem Eingabefeld nur Optionen angezeigt, die den bereits eingegebenen Text enthalten oder mit diesem beginnen. Passen keine Optionen zum eingegebenen Text, wird keine Auswahlliste eingeblendet (erste Abbildung).
• Die Auswahlliste enthält unabhängig von der Texteingabe bestimmte häufig verwendete Werte (zweite Abbildung).
• Das kombinierte Eingabefeld besitzt zwei Auswahllisten. Die Listeneinträge der einen Liste sind unabhängig von der Texteingabe, in der zweiten Liste werden erst nach der Texteingabe übereinstimmende Listeneinträge angezeigt (dritte Abbildung).
• Die Texteingabe dient nur dem Filtern der Optionen in der Auswahlliste. Die Eingabe von Text, der mit keiner der vorgegebenen Optionen übereinstimmt, ist nicht möglich.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

Die Anforderungen an das Eingabefeld und die Auswahlliste werden im Abschitt „Eingabefeld“ bzw. „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass über das Eingabefeld eine Auswahlliste geöffnet werden kann.

• JAWS: [Beschriftung] kombiniertes Eingabefeld reduziert | erweitert [Wert] [Hinweis zur Texteingabe und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Kombinationsfeld reduziert | erweitert [mit Autovervollständigung] bearbeitbar [Wert]
• Windows Sprachausgabe: [Beschriftung] [Wert] Kombinationsfeld bearbeiten ausgeblendet | erweitert

Das kombinierte Eingabefeld sollte mit den HTML-Elementen <input type=… list=ID> sowie <datalist id=ID> und <option> umgesetzt werden.

• Bei folgenden Werten im type-Attribut kann das list-Attribut sinnvoll verwendet werden: text, search, url, tel, email.
• Bei folgenden Werten im type-Attribut darf das list-Attribut gemäß der HTML-Spezifikation ebenfalls verwendet werden. Dies wird aber von den meisten Browsern nicht unterschützt und führt teilweise zu irreführender Ausgabe durch die Screenreader: date, month, week, time, datetime-local, number, range, color.

Der initiale Wert wird über das value-Attribut beim <input>-Element übermittelt.

Die Beschriftung sollte mit dem Element <label for=ID> mit dem kombinierten Eingabefeld verknüpft werden.

Das kombinierte Eingabefeld kann als Pflichtfeld (required), deaktiviert (disabled) bzw. schreibgeschützt (readonly) ausgezeichnet werden.

Die Listeneinträge können nicht als deaktiviert oder schreibgeschützt ausgezeichnet werden. Die Listeneinträge können nicht gruppiert werden.

Weitere Informationen: 4.10.8 The datalist element - HTML Standard (whatwg.org), 4.10.5.3.9 The list attribute - HTML Standard (whatwg.org)

Achtung: Da sich die ARIA-Spezifikation hinsichtlich combobox in den letzten Jahren mehrfach grundlegend geändert hat, kann nicht garantiert werden, dass die kombinierten Eingabefelder, die mit ARIA umgesetzt werden, von allen Screenreadern korrekt ausgegeben wird. Es wird empfohlen, stattdessen das native kombinierte Eingabefeld zu verwenden. Alternativ sollte die ARIA-Umsetzung umfassend mit verschiedenen Browsern und Screenreadern getestet werden.
Achtung: Häufig wird für Eingabefelder mit Autocomplete-Funktion oder Ausklapplisten das ARIA-Pattern für kombinierte Eingabefelder verwendet. Diese drei Elemente unterscheiden sich jedoch hinsichtlich ihrer Bedeutung und Bedienung und sollten nicht verwechselt werden.

Wird das kombinierte Eingabefeld nicht mit den HTML-Elementen umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=combobox übermittelt. Die Rolle muss sich an einem Eingabefeld befinden (<input type=text>).
• Der Wert des Eingabefeldes (value-Attribut) wird als Wert des kombinierten Eingabefeldes übermittelt.
• Die Beschriftung des kombinierten Eingabefeldes kann per aria-label oder aria-labelledby erfolgen.
• Der Status der Ausklappliste (geschlossen oder geöffnet = Auswahlliste sichtbar) muss mit aria-expanded übermittelt werden.
• Vom Element mit role=combobox wird per aria-controls auf die Auswahlliste verwiesen.
• Das Autocomplete-Verhalten des kombinierten Eingabefeldes wird mit aria-autocomplete übermittelt.
• Die Auswahlliste wird mit role=listbox und deren Listeneinträge mit role=option ausgezeichnet.
• Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Der Schalter mit dem Pfeil-Icon, über den die Auswahlliste geöffnet werden kann, erhält nicht den Tastaturfokus (tabindex=-1), soll jedoch so ausgezeichnet werden, dass er bei der Navigation mit dem virtuellen Cursor von der Assistenztechnologie ausgegeben wird. Der Schalter soll aussagekräftig beschriftet werden, per aria-controls auf die Auswahlliste verweisen und per aria-expanded den Status der Auswahlliste übermitteln.
• Das kombinierte Eingabefeld kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Das kombinierte Eingabefeld kann mit aria-required als Pflichtfeld ausgezeichnet werden.
• Die Darstellung des kombinierten Eingabefeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare kombinierte Eingabefeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
• Bei der Navigation durch die Listeneinträge sollte der fokussierte Listeneintrag im sichtbaren Bereich angezeigt werden.

Weitere Informationen: combobox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Combobox Pattern | APG | WAI | W3C

Synonyme: Klappliste, Dropdown-Listenfeld, Dropdown, Combobox

Siehe auch: Auswahlliste, Kombiniertes Eingabefeld, Menüschaltfläche, Eingabefeld mit Autocomplete-Funktion

Ausklapplisten ermöglichen die Auswahl einer Option aus einer Liste, wobei die Liste geöffnet und geschlossen werden kann (siehe DIN EN ISO 9241-161: 8.11).

Im geschlossenen Status wird der aktuelle Wert (die gewählte Option in der Liste) angezeigt und rechts daneben ein Schalter (mit Pfeil-Icon) zum Öffnen der Liste. Im geöffneten Status wird zusätzlich eine Auswahlliste mit allen Optionen angezeigt (ggf. mit Scrollbalken). Der aktuelle Wert ist hervorgehoben. Die Optionen können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden.

• JAWS: [Beschriftung] Ausklappliste [Wert] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Kombinationsfeld [Wert] reduziert
• Windows Sprachausgabe: [Beschriftung] [Wert] Kombinationsfeld ausgeblendet

Die Ausklappliste sollte mit den HTML-Elementen <select> und <option> (ohne die Attribute multiple und size) umgesetzt werden.

Die Listeneinträge können mit dem <optgroup>-Element gruppiert werden. Die Gruppierung sollte jedoch vermieden werden, weil viele Screenreader die Gruppenbeschriftung (die mit dem label-Attribut angegeben wird) nicht ausgeben.

Der initiale gewählte Listeneintrag kann mit dem selected-Attribut gesetzt werden.

Die Beschriftung sollte mit dem Element <label for=ID> mit der Ausklappliste verknüpft werden. Eine Ausklappliste, eine Gruppe von Listeneinträgen sowie die einzelnen Listeneinträge können als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) ausgezeichnet werden.

Eine Ausklappliste kann mit required als Pflichtfeld ausgezeichnet werden. In diesem Fall muss jedoch der erste Listeneintrag leer sein.

Weitere Informationen: 4.10.7 The select element - HTML Standard (whatwg.org)

Achtung: Da sich die ARIA-Spezifikation hinsichtlich combobox in den letzten Jahren mehrfach grundlegend geändert hat, kann nicht garantiert werden, dass die ARIA-Ausklappliste von allen Screenreadern korrekt ausgegeben wird. Es wird empfohlen, stattdessen die HTML-Ausklappliste zu verwenden. Alternativ sollte die ARIA-Umsetzung umfassend mit verschiedenen Browsern und Screenreadern getestet werden.

Achtung: Je nach Betriebssystem wird eine HTML-Ausklappliste unterschiedlich an die Accessibility API übermittelt. Unter MacOS ist eine Ausklappliste ein Menü-Schalter, über den ein Menü geöffnet wird. Wird eine ARIA-Ausklappliste verwendet, ist keine plattformübergreifende Lösung möglich, da entweder für Windows die Rolle combobox verwendet werden müsste oder für MacOS die Rolle button mit aria-haspopup=menu. Es wird deswegen empfohlen, HTML-Ausklapplisten zu verwenden.

Wird die Ausklappliste nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=combobox übermittelt. Die Rolle darf sich nicht an einem Eingabefeld befinden. Stattdessen sollte z. B. ein <div>-Element verwenden werden.
• Der Textinhalt des Elements mit role=combobox wird als Wert der Ausklappliste übermittelt.
• Der Schalter mit dem Pfeil-Icon, über den die Auswahlliste geöffnet werden kann, wird so ausgezeichnet, dass er nicht den Tastaturfokus erhält und von der Assistenztechnologie nicht ausgegeben wird (z. B. mit aria-hidden=true).
• Die Beschriftung der Ausklappliste kann per aria-label oder aria-labelledby erfolgen.
• Der Status der Ausklappliste (geschlossen oder geöffnet = Auswahlliste sichtbar) muss mit aria-expanded übermittelt werden.
• Vom Element mit role=combobox wird per aria-controls auf die Auswahlliste verwiesen.
• Die Auswahlliste wird mit role=listbox und deren Listeneinträge mit role=option ausgezeichnet.
• Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Die Ausklappliste kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Ausklappliste kann mit aria-required als Pflichtfeld ausgezeichnet werden.
• Die Darstellung der Ausklappliste sollte im Hochkontrast-Modus von Windows überprüft werden.
• Die sichtbare Ausklappliste und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
• Bei der Navigation durch die Listeneinträge sollte der fokussierte Listeneintrag im sichtbaren Bereich angezeigt werden.

Weitere Informationen: combobox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Select-Only Combobox Example | APG | WAI | W3C

Synonyme: Analoges Formularelement, Schieber, Slider, Range slider, Range control

Siehe auch: Drehfeld, Radiobuttons, Ausklappliste, Scrollbalken, Separator, Fortschrittsanzeige

Ein Schieberegler dient der Auswahl eines Wertes aus einem fortlaufenden Wertebereich (siehe DIN EN ISO 9241-161: 8.2). Schieberegler werden vor allem für numerische Werte verwendet.

Ein Schieberegler besteht aus einem Balken, der den gesamten Wertebereich repräsentiert, und einem Anfasser, der den gewählten Wert anzeigt und über den die Wertänderung erfolgt. Schieberegler können zusätzlich beim Balken eine beschriftete oder unbeschriftete Skala mit Werten besitzen. Ein Schieberegler kann vertikal oder horizontal ausgerichtet sein.

• JAWS: [Beschriftung] Auf ab Schieber | Links Rechts Schieber [Wert] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Schieber [Wert]
• Windows Sprachausgabe: [Beschriftung] Schieberegler bei [Wert] Aktueller Wert [Wert] Mindestwert [minimaler Wert] Höchstwert [maximaler Wert]

Ein Schieberegler sollte mit dem HTML-Element <input type=range> umgesetzt werden. Der initiale Wert kann mit dem value-Attribut gesetzt werden.

Minimaler, maximaler Wert und Schrittweite werden mit den Attributen min, max und step gesetzt. Es sollte beachtet werden, dass diese Werte mit vielen Assistenztechnologien nicht wahrnehmbar sind.

Die Beschriftung sollte mit dem Element <label for=ID> mit dem Schieberegler verknüpft werden.

Ein Schieberegler kann als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) oder als Pflichtfeld (required) ausgezeichnet werden.

Die Ausrichtung des Schiebereglers kann nicht festgelegt werden. Die meisten Browser stellen den Schieberegler horizontal ausgerichtet dar.

Weitere Informationen: 4.10.5.1.13 Range state (type=range) - HTML Standard (whatwg.org)

Achtung: Auf Mobilgeräten kann ein ARIA-Schieberegler mit Assistenztechnologie ggf. nicht bedient werden, weil keine Gesten zur Bedienung nicht-nativer Schieberegler implementiert wurden.

Wird der Schieberegler nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=slider übermittelt.
• Der aktuelle Wert muss mit aria-valuenow angegeben werden.
• Der minimale und der maximale Wert können mit aria-valuemin und aria-valuemax angegeben.
• Die Beschriftung kann per aria-label oder aria-labelledby erfolgen.
• Die Darstellung des Schiebereglers sollte im Hochkontrast-Modus von Windows überprüft werden.
• Der sichtbare Schieberegler und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

In folgenden Punkten unterscheidet sich der ARIA- vom HTML-Schieberegler:

• Eine Schrittweite kann nicht angegeben werden.
• Die Ausrichtung kann mit aria-orientation angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass die Bedienung mit allen Pfeiltasten möglich sein sollte.
• Mit aria-valuetext kann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts im aria-valuenow ausgegeben werden soll.
• Es können Schieberegler mit mehreren Anfassern umgesetzt werden, um z. B. einen Wertebereich auszuwählen.
• Der Schieberegler kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.

Weitere Informationen: slider role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Slider Pattern | APG | WAI | W3C

Synonyme: Bildlaufleiste, Scrollbar

Siehe auch: Schieberegler, Paginierung, Karussell, Griff

Ein Scrollbalken dient dem Scrollen der gesamten Seite, eines Seitenbereichs oder von Teilen eines Elements (wie z.B. Listeneinträgen einer Ausklappliste) in den sichtbaren Bereich. Darüber hinaus dient der Scrollbalken der Visualisierung der aktuellen Position und der Gesamtgröße der Seite, Seitenbereiche oder Elemente (siehe DIN EN ISO 9241-161: 8.35).

Ein Scrollbalken besteht aus einem Rollbalken und dem Bildlauffeld. Der Rollbalken repräsentiert die Gesamtlänge oder -breite des scrollbaren Bereichs. Das Bildlauffeld zeigt die Position und Größe des sichtbaren Ausschnitts an und dient darüber hinaus dem Verschieben des sichtbaren Ausschnitts.

In der Regel befinden sich am Beginn und Ende des Rollbalkens je ein Schalter mit Pfeil-Icon zum schrittweisen Scrollen.

Vertikale Scrollbalken befinden sich am rechten Rand des scrollbaren Bereichs. Horizontale Scrollbalken befinden sich am unteren Rand des scrollbaren Bereichs.

Hinweis: Darüber hinaus sollte die Scrollfunktionen der Zeigegeräte unterstützt werden (z. B. Scrollrad der Maus, Gesten zum Scrollen auf dem Touchpad).

Synonyme: Optionsfelder, Auswahlschalter, Radiobuttongruppe

Siehe auch: Auswahllisten, Ausklapplisten, Checkboxen

Radiobuttons dienen der Auswahl von sich gegenseitig ausschließenden Optionen (siehe DIN EN ISO 9241-161: 8.33).

Ein Radiobutton besteht aus einem Indikator, welcher anzeigt, ob die Option ausgewählt oder nicht ausgewählt wurde. Eine Radiobuttongruppe besteht aus mehreren Radiobuttons mit ihren Beschriftungen und einer Gruppenbeschriftung. Radiobuttons müssen gruppiert werden.

• JAWS: [Gruppenbeschriftung] [Beschriftung] Auswahlschalter aktiviert | nicht aktiviert [Position und Anzahl] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA: [Gruppenbeschriftung] Gruppierung [Beschriftung] Auswahlschalter aktiviert | nicht aktiviert [Position und Anzahl]
• Windows Sprachausgabe: [Beschriftung] Optionsfeld ausgewählt | nicht ausgewählt [Position und Anzahl]

Die Radiobuttongruppe sollte mit dem HTML-Element <fieldset> ausgezeichnet und mit dem <legend>-Element beschriftet werden.

Die Radiobuttons sollte mit dem HTML-Element <input type=radio> umgesetzt werden. Radiobuttons, die zur gleichen Gruppe gehören, müssen den gleichen Wert im name-Attribut besitzen und dürfen sich nicht in unterschiedlichen <form>-Elementen befinden.

Der initiale ausgewählt-Status wird mit dem checked-Attribut gesetzt. In jeder Radiobuttongruppe sollte initial ein Radiobutton ausgewählt sein, weil Tastaturnutzer bei der Navigation durch die Radiobuttons automatisch eine Auswahl treffen, die anschließend nicht mehr rückgängig gemacht werden kann. Initial sollte der Radiobutton gewählt werden, dessen Auswahl entweder am wahrscheinlichsten ist oder der eine neutrale Option (z. B. „Keine Angabe“) enthält.

Die Beschriftung sollte mit dem Element <label for=ID> mit dem jeweiligen Radiobutton verknüpft werden, um die Klickfläche des Radiobuttons um seine Beschriftung zu erweitern.

Ein Radiobutton sowie die Radiobuttongruppe können als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) ausgezeichnet werden.

Wenn ein Radiobutton mit required als Pflichtfeld ausgezeichnet wird, dann gilt das für die gesamte Radiobuttongruppe, d. h. zum Absenden des Formulars ist es ausreichend, wenn irgendein Radiobutton ausgewählt wurde. Damit der Pflichtfeldhinweis mit Assistenztechnologie bei allen Radiobuttons wahrnehmbar ist, wird empfohlen, das required-Attribut bei allen Radiobuttons zu verwenden oder alternativ in der Gruppenbeschriftung (<legend>) einen textlichen Pflichtfeld-Hinweis (z. B. einen Stern) einzufügen. Wird initial mit dem checked-Attribut ein Radiobutton vorausgewählt, ist keine Pflichtfeldkennzeichnung notwendig.

Fehlermeldungen sollten nicht mit jedem einzelnen Radiobutton, sondern mit der Gruppe verknüpft werden.

Weitere Informationen: 4.10.5.1.16 Radio Button state (type=radio) - HTML Standard (whatwg.org)

Wird die Radiobuttongruppe nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Radiobuttons befinden sich in einem Element, welches mit role=radiogroup ausgezeichnet wird.
• Die Radiobuttongruppe kann mit aria-labelledby oder aria-label beschriftet werden.
• Die Rolle der Radiobuttons wird mit role=radio übermittelt.
• Der Status wird mit aria-checked=true|false übermittelt und muss bei Bedienung aktualisiert werden.
• Die Beschriftung kann per Textinhalt oder aria-labelledby erfolgen.
• Die Radiobuttongruppe kann mit aria-readonly als schreibgeschützt ausgezeichnet werden. Die Radiobuttons können nicht als schreibgeschützt ausgezeichnet werden.
• Im Gegensatz zu HTML werden mit aria-required nicht die Radiobuttons, sondern die Radiobuttongruppe (role=radiogroup) als Pflichteingabe ausgezeichnet.
• Die Darstellung der Radiobuttons sollte im Hochkontrast-Modus von Windows überprüft werden.
• Die sichtbaren Radiobuttons und die programmatisch fokussierten Elemente sollten die gleiche Position und Größe besitzen.

Weitere Informationen: radio role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Radio Group Pattern | APG | WAI | W3C, Checkbox Pattern | APG | WAI | W3C

Synonyme: Kontrollkästchen, Kontrollfeld, Auswahlkästchen

Siehe auch: Umschalter, Wechselschalter, Radiobuttons, Auswahlliste mit Mehrfachauswahl

Eine Checkbox dient der Auswahl der Optionen „ausgewählt“ oder „nicht ausgewählt“ (siehe DIN EN ISO 9241-161: 8.4). Zusätzlich kann eine Checkbox den Status einer untergeordneten Checkboxgruppe wiedergeben („alle ausgewählt“, „keine ausgewählt“ oder „einige ausgewählt“).

Eine Checkbox besteht aus einem quadratischen Rahmen und einem Indikator (Checkmark), welcher anzeigt, ob die Checkbox ausgewählt wurde, nicht ausgewählt wurde oder ob von der untergeordneten Gruppe einige ausgewählt wurden.

• JAWS: [Beschriftung] Kontrollfeld aktiviert | nicht aktiviert | teilweise aktiviert [Hinweis zur Bedienung mit der Leertaste]
• NVDA: [Beschriftung] Kontrollfeld aktiviert | nicht aktiviert | teilweise aktiviert
• Windows Sprachausgabe: [Beschriftung] Kontrollkästchen aktiviert | nicht aktiviert | unbestimmt

Die Checkbox sollte mit dem HTML-Element <input type=checkbox> umgesetzt werden.

Der initiale ausgewählt-Status wird mit dem checked-Attribut gesetzt. Der Zustand „einige ausgewählt“ kann nur per JavaScript mit der Eigenschaft indeterminate=true gesetzt werden.

Die Beschriftung der Checkbox sollte mit dem Element <label for=ID> mit der Checkbox verknüpft werden, um die Klickfläche der Checkbox um ihre Beschriftung zu erweitern.

Eine Checkbox kann als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) ausgezeichnet werden.

Eine Checkbox kann mit required als Pflichtfeld ausgezeichnet werden. Dies ist nur in Fällen sinnvoll, in denen die Checkbox im Status „ausgewählt“ (checked) abgesendet werden muss. Wenn hingegen in einer Gruppe von Checkboxen mindestens eine Checkbox ausgewählt werden muss, sollte nicht die Checkbox mit required ausgezeichnet werden, sondern die Pflichtfeldkennzeichnung bei der Gruppe vorgenommen werden. Da die Gruppe nicht mit required ausgezeichnet werden kann, sollte die Pflichtfeldkennzeichnung in Textform erfolgen (z. B. Stern innerhalb der Gruppenbeschriftung).

Zusammengehörende Checkboxen sollten innerhalb einer beschrifteten Formularfeldgruppe positioniert werden. Für die Gruppe wird das Element <fieldset> und für die Gruppenbeschriftung das Element <legend> verwendet.

Fehlermeldungen, die sich nicht auf eine einzelne Checkbox beziehen, sondern auf die Checkbox-Gruppe sollten nicht mit jeder einzelnen Checkbox, sondern mit der Gruppe verknüpft werden.

Weitere Informationen: 4.10.5.1.15 Checkbox state (type=checkbox) - HTML Standard (whatwg.org)

Wird die Checkbox nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=checkbox übermittelt.
• Der Status wird mit aria-checked=true|false|mixed übermittelt und muss bei Bedienung aktualisiert werden.
• Die Beschriftung kann per Textinhalt oder aria-labelledby erfolgen.
• Die Checkbox kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Darstellung der Checkbox sollte im Hochkontrast-Modus von Windows überprüft werden.
• Die sichtbare Checkbox und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: checkbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Checkbox Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

Datum:

22.04.2023

Lizenz:

CC-BY-SA 4.0