Wert des bearbeitbaren Textfelds

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
Not for use with personal data

WCAG 2.0 – 4.1.2 A Auswirkung – Kritisch

Der Wert von Texteingabeelementen sollte für seinen unterstützende Technologien wie TalkBack und Voice Access verfügbar sein.

warning

ContentDescriptions auf EditText views kann den Wert in einigen Android-Versionen überschreiben.

Auswirkung

Die durch diese Regel festgestellten Probleme betreffen blinde Menschen.

EditText Elemente sollten Informationen dort bereitstellen, wo das Android-Betriebssystem sie erwartet. Dadurch können unterstützende Technologien Informationen vorhersehbar kommunizieren.

Bestätigung

  1. TalkBack aktivieren
  2. Konzentrieren Sie sich auf das Element
  3. Eines der folgenden Ereignisse wird eintreten:
    • Zugänglich: TalkBack sagt den eingegebenen Text, für, und die zugehörigen Beschriftungen an Text.
    • Nicht zugänglich: TalkBack hat die oben stehenden Informationen entweder nicht oder in der falschen Reihenfolge angekündigt.

So beheben Sie das Problem

Stellen sicher, dass eine Beschriftung ordnungsgemäß mit einem EditText- oder TextField-Element verknüpft ist, sodass sowohl der Name als auch der Wert für unterstützende Technologien verfügbar sind.

XML

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the Checkbox with its Name

Compose

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        modifier = Modifier.semantics {
            this.contentDescription = “Enter your Zip Code”
        },
        label = “Zip Code”
    )
}

React Native

Vermeiden Sie es, die Eigenschaft accessibilityLabel auf den Wert der Eingabe festzulegen. Wenn Sie ein Beispiel festlegen, können Sie den Wert zur Eigenschaft placeholder hinzufügen.

<TextInput 
   accessibilityLabel='Username'
   accessible={true}
   placeholder='John'
   style={{height: 45, width: 200, backgroundColor: 'azure', fontSize: 20, margin:20}}
 />