Hat gültigen Zugänglichkeitsstatus

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Regel, die erfordert, dass React Native-Komponenten eine gültige accessibilityState-Eigenschaft verwenden

Free Trial
Not for use with personal data

Regel-ID: has-valid-accessibility-state

WCAG 2.0 (A) 4.1.2

Beschreibt den aktuellen Zustand einer Komponente für den Benutzer von unterstützender Technologie.

accessibilityState ist ein Objekt. Es enthält die folgenden Felder:

Name Beschreibung Typ Erforderlich
disabled Gibt an, ob das Element deaktiviert ist oder nicht. boolean Nein
selected Gibt an, ob ein auswählbares Element derzeit ausgewählt ist oder nicht. boolean Nein
checked Gibt den Zustand eines überprüfbaren Elements an. Dieses Feld kann entweder einen booleschen Wert oder den String „mixed“ haben, um gemischte Kontrollkästchen darzustellen. boolean oder 'mixed' Nein
busy Gibt an, ob ein Element derzeit beschäftigt ist oder nicht. boolean Nein
expanded Gibt an, ob ein erweiterbares Element derzeit erweitert oder eingeklappt ist. boolean Nein

Um es zu verwenden, setzen Sie accessibilityState auf ein Objekt mit einer bestimmten Definition.

Warum es wichtig ist

Die accessibilityState-Felder müssen korrekt geschrieben sein und mit Werten übereinstimmen, die sinnvoll sind, um den beabsichtigten Zugänglichkeitsstatus zu beschreiben. Die Nichteinhaltung der zulässigen Werte führt zu Komponenten, die für Benutzer von unterstützenden Technologien nicht zugänglich sind.

Wie man das Problem behebt

Stellen Sie sicher, dass die accessibilityState-Eigenschaft ein Objekt ist, dessen Felder auf einen gültigen Namens- und Typwert gesetzt sind.

Positive Beispiele

<TouchableOpacity accessibilityState={{ checked: true }} />
<TouchableOpacity accessibilityState={{ checked: "mixed" }} />
<TouchableOpacity accessibilityState={{ checked: true, disabled: true }} />

Negativbeispiele

<TouchableOpacity accessibilityState="selected" />
<TouchableOpacity accessibilityState={{ disabled: "true" }} />
<View accessibilityStates={["checked"]} />

Ressourcen