Textnamen bearbeiten

Was wir überprüfen

Texteingabeelemente müssen einen zugänglichen Namen haben, der für unterstützende Technologien wie TalkBack und Voice Access verfügbar ist.

Fehlendes Beispiel ❌

Texteingabe hat keinen zugänglichen Namen.

TalkBack liest "Edit text."

Voice Access — der Benutzer hat kein Label, das er aussprechen kann, um das Feld zu aktivieren.

Erfolgreiches Beispiel ✅

Texteingabe ist mit einem sichtbaren Label über labelForverbunden.

TalkBack liest "Email address, Edit text."

Voice Access — der Benutzer spricht "E-Mail-Adresse", um das Feld zu aktivieren.

Auf einen Blick

• Diese Regel hat erhebliche Auswirkungen auf die Benutzer
• Jedes Texteingabefeld muss ein Label haben, das von unterstützender Technologie angesagt werden kann
• Platzhaltertext allein ist kein Ersatz für ein Label
• Nur-Icon-Eingaben müssen eine Inhaltsbeschreibung haben
• Unbeschriftete Felder lassen Nutzer von Screenreadern ohne Kontext darüber, was sie eingeben sollen

Auswirkungen auf die Benutzer

Personen, die blind sind und TalkBack zur Navigation Ihrer App verwenden, sind direkt von den Problemen betroffen, die durch diese Regel gefunden werden. Wenn eine Texteingabe keinen zugänglichen Namen hat, kündigt TalkBack nur "Text bearbeiten" an — was dem Benutzer keine Informationen darüber gibt, was er eingeben sollte. Dies ist besonders desorientierend in Formularen mit mehreren Feldern.

Verwenden Sie sichtbare, dauerhafte Labels für alle Formularfelder. Platzhaltertext allein ist kein Ersatz für ein Label, da er verschwindet, wenn der Benutzer zu tippen beginnt.

EditText und TextField-Elemente sollten dort Label-Informationen bereitstellen, wo das Android-Betriebssystem sie erwartet, damit unterstützende Technologien den Zweck des Eingabeelements vorhersehbar kommunizieren können.

Bestätigen Sie das Textname-Bearbeitungsproblem

1. TalkBack einschalten
2. Fokussieren Sie das Texteingabefeld
3. Eines der folgenden wird passieren:
   • Unzugänglich: TalkBack kündigt nur "Text bearbeiten" ohne Label an, oder kündigt Informationen in unerwarteter Reihenfolge an
   • Zugänglich (Standardwert, Feld ist leer): TalkBack kündigt das Label des Feldes gefolgt von "Text bearbeiten" an (z.B. "Benutzername, Text bearbeiten")
   • Zugänglich (Benutzer hat einen Wert in das Feld eingegeben): TalkBack kündigt den vom Benutzer eingegebenen Wert + "Text bearbeiten für" + das zugeordnete Label von Text an (z.B. "'help@deque.com', Text bearbeiten für 'E-Mail-Adresse'")

Probleme beheben

Um Probleme mit den Textnamen zu beheben, verknüpfen Sie ein sichtbares Label mit dem Eingabefeld. Geben Sie eine Inhaltsbeschreibung an, wenn kein sichtbares Label vorhanden ist oder bei der Verwendung von Icons.

XML

Verbinden Sie ein sichtbares TextView-Label mit der EditText mittels setLabelFor.

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

Compose

Verwenden Sie den eingebauten label-Parameter bei OutlinedTextField oder TextField, um einen zugänglichen Namen bereitzustellen. Geben Sie eine Inhaltsbeschreibung für Nur-Icon-Eingaben an.

@Composable
private fun LabeledTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        visualTransformation = VisualTransformation.None,
        label = { Text(stringResource(R.string.address_label)) }
    )
}

@Composable
private fun IconsWithDescriptionTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        label = {
            Icon(
                painter = painterResource(id = R.drawable.ic_location),
                contentDescription = stringResource(id = R.string.address_content_description)
            )
        }
    )
}

React Native

Verknüpfen Sie das Textelement mit seinem entsprechenden Textfeld unter Verwendung der aria-labelledby-Eigenschaft und referenzieren Sie die nativeID des Labels.

<Text
  style={{height: 70, width: 150, fontSize: 20, marginTop: 10}} 
  aria-label="Username"
  nativeID="labelUsername">
  Username
</Text>

<TextInput
  style={{height: 50, width: 200, backgroundColor: 'azure', fontSize: 20}} 
  aria-label="input"
  aria-labelledby="labelUsername"
  placeholder='John'
 />

Kann ich diese Regel ignorieren?

Textname bearbeiten hat eine Erhebliche Auswirkungen für Benutzer, und wir empfehlen, dieses Problem in fast allen Fällen zu beheben. Ein unbeschriftetes Texteingabefeld ist für Benutzer von Screenreadern unbrauchbar. In seltenen Situationen — wie einem Suchfeld, dessen Zweck aus dem umgebenden Kontext unmissverständlich klar ist — könnten Sie in Erwägung ziehen, die Regel zu unterdrücken, aber dies sollte die Ausnahme und nicht die Regel sein. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University-Kursseiten

• 4.1.2 Name, Rolle, Wert (A)
• Erfolgskriterium 4.1.2 - Name, Rolle, Wert

Hinweis: Der volle Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Richtlinien zur Barrierefreiheit von Webinhalten (WCAG) 2.0, Empfehlung des W3C
  • Erfolgskriterium 4.1.2 - Name, Rolle, Wert
• WCAG 2.0 Verständnis-Dokumente
  • Verständnis 4.1.2 A - Name, Rolle, Wert