Tekstnaam Bewerken

Waar We Naar Kijken

Tekstinvoerelementen moeten een toegankelijke naam hebben voor ondersteunende technologieën zoals TalkBack en Voice Access.

Onjuiste Voorbeeld ❌

Tekstinput heeft geen toegankelijke naam.

TalkBack leest "Edit text."

Voice Access — gebruiker heeft geen label om te spreken om het veld te activeren.

Correcte Voorbeeld ✅

Tekstinput is gekoppeld aan een zichtbaar label via labelFor.

TalkBack leest "Email address, Edit text."

Voice Access — gebruiker zegt "E-mailadres" om het veld te activeren.

In Een Oogopslag

• Deze regel heeft een grote impact op gebruikers
• Elk tekstinvoerveld moet een label hebben dat door ondersteunende technologie kan worden aangekondigd
• Alleen een placeholder-tekst is geen vervanging voor een label
• Inputvelden die alleen uit een pictogram bestaan moeten een beschrijving van de inhoud hebben
• Niet-gelabelde velden laten gebruikers van schermlezers zonder context voor wat ze moeten typen

Impact op Gebruikers

Mensen die blind zijn en TalkBack gebruiken om door uw app te navigeren, worden direct beïnvloed door problemen die door deze regel worden gevonden. Wanneer een tekstinput geen toegankelijke naam heeft, kondigt TalkBack alleen "Tekst bewerken" aan — wat de gebruiker geen informatie geeft over wat ze moeten typen. Dit is vooral verwarrend in formulieren met meerdere velden.

Gebruik zichtbare, blijvende labels voor alle formulierinvoervelden. Alleen een placeholder-tekst is geen vervanging voor een label omdat het verdwijnt wanneer de gebruiker begint te typen.

EditText en TextField elementen moeten labelinformatie bieden waar het Android-systeem het verwacht zodat ondersteunende technologieën de functie van het invoerelement voorspelbaar kunnen communiceren.

Controleer Tekstnaam Bewerken Probleem

1. Zet TalkBack aan
2. Focus op het tekstinvoerelement
3. Een van de volgende zal gebeuren:
   • Niet-toegankelijk: TalkBack kondigt alleen "Tekst bewerken" aan zonder label, of kondigt informatie in een onverwachte volgorde aan
   • Toegankelijk (standaardwaarde, veld is leeg): TalkBack kondigt het label van het veld aan gevolgd door "Tekst bewerken" (bijv. "Gebruikersnaam, Tekst bewerken")
   • Toegankelijk (gebruiker heeft een waarde in het veld ingevoerd): TalkBack kondigt de door de gebruiker ingevoerde waarde aan + "Tekst Bewerken voor" + de gekoppelde label's Text (bijv. "'help@deque.com', Tekst bewerken voor 'E-mailadres'")

Problemen Oplossen

Om problemen met Tekstnaam Bewerken op te lossen, koppel een zichtbaar label aan het invoerveld. Zorg voor een inhoudsbeschrijving wanneer geen zichtbaar label aanwezig is, of bij gebruik van iconen.

XML

Koppel een zichtbaar TextView label aan de EditText met behulp van setLabelFor.

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

Compose

Gebruik de ingebouwde label parameter op OutlinedTextField of TextField om een toegankelijke naam te bieden. Zorg voor een inhoudsbeschrijving voor inputvelden die alleen uit pictogrammen bestaan.

@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

Associeer het textelement met het bijbehorende tekstveld door het aria-labelledby eigenschap te gebruiken, verwijzend naar de nativeID van het label.

<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'
 />

Kan ik deze regel negeren?

Bewerk Tekstnaam heeft een Ernstige impact voor gebruikers, en we raden aan om dit probleem in bijna alle gevallen op te lossen. Een niet-gelabeld tekstveld is onbruikbaar voor schermlezergebruikers. In zeldzame situaties — zoals een zoekveld waarvan het doel onmiskenbaar duidelijk is door de omliggende context — kunt u overwegen de regel te onderdrukken, maar dit moet een uitzondering zijn en niet de norm. Lees meer over regels negeren.

Bronnen

Deque University Cursus Pagina's

• 4.1.2 Naam, Rol, Waarde (A)
• Succescriterium 4.1.2 - Naam, Rol, Waarde

Opmerking: Volledige toegang tot Deque University bronnen vereist een abonnement.

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling
  • Succescriterium 4.1.2 - Naam, Rol, Waarde
• WCAG 2.0 Begrijpingsdocumenten
  • Begrijpen 4.1.2 A - Naam, Rol, Waarde