React Native Radio Button: barrierefrei, ohne Bibliothek | We.Inc
React Native hat keine Radio-Komponente. Baue eine barrierefreie Radio-Gruppe aus Pressable mit accessibilityRole radio und accessibilityState checked. Mit Live-Vorschau und Code.
Das Kern-Paket von React Native hat keine Radio-Button-Komponente, seine Liste der Bedienelemente enthält nur Button und Switch. Bau eine aus Pressable: Zeichne einen äußeren Kreis und einen inneren Punkt, halte den ausgewählten Wert in der Elternkomponente und gib jeder Option accessibilityRole="radio" plus accessibilityState={{ checked }}. Umschließe die Gruppe mit einer View mit accessibilityRole="radiogroup".
Accessibility-Props für eine Radio-Gruppe
Element
Prop
Wert
Umschließende View
accessibilityRole
"radiogroup"
Jede Option
accessibilityRole
"radio"
Jede Option
accessibilityState
{ checked: true oder false }
Deaktivierte Option
accessibilityState
{ disabled: true }, plus die disabled-Prop von Pressable
Neuere Alternative
role / aria-checked
role="radio" mit aria-checked, role hat Vorrang vor accessibilityRole
Unten siehst du eine Web-Version derselben Gruppe: Sie nutzt die passenden ARIA-Rollen, daher verschieben die Pfeiltasten die Auswahl wie bei Radio-Buttons im Browser. Darunter zeigt das Panel die Props, die jede Option in React Native für die aktuelle Auswahl hätte, damit du siehst, was ein Screenreader mitgeteilt bekommt.
Die Elternkomponente hält einen Wert im State, jede Option vergleicht sich damit.
Ein Druck auf eine Option ruft onChange mit ihrem eigenen Wert auf, wodurch die anderen automatisch abgewählt werden.
Jedes Pressable meldet sich als Radio und gibt checked über accessibilityState weiter.
Die umschließende View ist als radiogroup markiert und mit der Frage beschriftet.
Mach die ganze Zeile drückbar, Beschriftung inklusive, nicht nur den kleinen Kreis.
Ergänze hitSlop oder Padding, damit jedes Ziel bequem mit dem Daumen erreichbar ist.
Nutze das pressed-Flag der style-Funktion, um sofort Feedback zu geben, bevor der State aktualisiert wird.
Wähle einen sinnvollen Standard nur vor, wenn eine Antwort wirklich unbedenklich ist. Andernfalls lass die Gruppe leer und validiere.
Bei mehr als etwa sieben Optionen ist ein Dropdown meist übersichtlicher als eine Spalte voller Kreise.
Häufige Fragen
Gibt es in React Native eine RadioButton-Komponente?
Nein. Die offizielle Komponentenseite listet Button und Switch als einzige Bedienelemente, Radio-Buttons kommen also aus deinem eigenen Pressable-Code oder aus einem UI-Kit, das du installierst.
Woher weiß ein Screenreader, dass mein Kreis ein Radio-Button ist?
Setze accessibilityRole="radio" auf das Pressable und accessibilityState={{ checked: isSelected }}. Die Dokumentation beschreibt die Rolle radio als Darstellung eines Radio-Buttons und radiogroup als eine Gruppe davon.
Sollte ich stattdessen role und aria-checked verwenden?
Beides funktioniert. React Native akzeptiert auch role="radio" und aria-checked, und laut Dokumentation hat role Vorrang vor accessibilityRole, wenn beide gesetzt sind. Wähle einen Stil und nutze ihn in der ganzen App.
Radio-Buttons oder ein Switch?
Ein Switch ist für eine einzelne Ein-und-Aus-Einstellung, die sofort wirkt. Radio-Buttons sind dafür da, genau eine von mehreren benannten Optionen auszuwählen.
Warum du es selbst bauen solltest
Eine Radio-Gruppe ist wenig Code: eine Zeile, zwei Kreise und ein Vergleich. Schreibst du sie selbst, passt sie zu deinem Design, vergrößert das Bundle nicht und trägt genau die Accessibility-Props, die du wählst.
Hältst du den ausgewählten Wert in der Elternkomponente, wird die Gruppe zu einer kontrollierten Komponente und fügt sich in das values-Objekt eines Formulars ein, genau wie ein TextInput.
Den Kreis zeichnen
Nutze für den Ring eine View mit gleicher Breite und Höhe, einem Rahmen und einem borderRadius von der halben Größe. Rendere darin eine kleinere gefüllte View nur dann, wenn die Option ausgewählt ist.
Lass den Ring in beiden Zuständen sichtbar und ändere nur den Punkt. Eine Auswahl, die nur durch Farbe angezeigt wird, ist für Menschen mit Farbenblindheit schwer zu erkennen.
Code für die Radio-Gruppe
RadioGroup-Komponente
Nur Kernkomponenten. Die Elternkomponente übergibt value und onChange, genau wie bei einem kontrollierten TextInput.
Verwendung in einem Screen
Der State liegt im Screen, daher kann die Auswahl zusammen mit dem Rest eines Formulars validiert und abgeschickt werden.
Standardversand
Expressversand
Abholung im Geschäft
Vorschau der Radio-Gruppe
Versandart
Klicke auf eine Option oder nutze die Pfeiltasten, sobald die Gruppe den Fokus hat.