Radiobuttons

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 der Radiobuttons 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) (Externer Link), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Radio Group Pattern | APG | WAI | W3C, Checkbox Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

Datum:

5.10.2023

Lizenz:

CC-BY-SA 4.0

Version:

0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!