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 geven waar het Android-besturingssysteem deze verwacht, zodat ondersteunende technologieën het doel 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 meldt alleen "Tekst bewerken" zonder label, of meldt informatie in een onverwachte volgorde
   • Toegankelijk (standaardwaarde, veld is leeg): TalkBack meldt het label van het veld gevolgd door "Tekst bewerken" (bijv. "Gebruikersnaam, Tekst bewerken")
   • Toegankelijk (gebruiker heeft een waarde in het veld ingevoerd): TalkBack meldt de door de gebruiker ingevoerde waarde + "Tekst bewerken voor" + de bijbehorende 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 met de EditText via 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 verstrekken. Voorzie een inhoudsbeschrijving voor alleen-icoon invoeren.

@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

Koppel het textelement met het overeenkomstige tekstveld met behulp van de aria-labelledby eigenschap, met verwijzing 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 te verhelpen. Een tekstveld zonder label is onbruikbaar voor schermlezergebruikers. In zeldzame situaties — zoals een zoekveld waarvan het doel onmiskenbaar duidelijk is uit de omringende context — kun je overwegen om de regel te onderdrukken, maar dit zou een uitzondering moeten zijn, geen norm. Meer informatie 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