Bewerk tekstwaarde

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

Maak tekstveldwaarden toegankelijk voor schermlezers

Not for use with personal data

WCAG 2.0 - 4.1.2 A Impact - Critical

Waar We Op Controleren

Wanneer een gebruiker in een tekstveld typt, moet de ingevoerde waarde programmatisch toegankelijk zijn voor ondersteunende technologieën zoals TalkBack en Voice Access.

Foutief Voorbeeld ❌

Android phone mockup with multiple input fields. The email field has a red focus ring and text inside that the user has entered, reading 'jsmith@emaik.com'. The entered value has a typographical error.

value = "E-mailveld"

TalkBack kondigt de `contentDescription` aan in plaats van de getypte tekst
"E-mailveld, bewerkingsvak"

Gebruiker kan niet bevestigen, nakijken of corrigeren wat ze hebben getypt

Correct Voorbeeld ✅

Android phone mockup with multiple input fields. The email field has a green focus ring and text inside that the user has entered, reading 'jsmith@emaik.com'. The entered value has a typographical error.

value = "jsmith@emaik.com" (de getypte tekst)

TalkBack kondigt het label en de getypte waarde aan
"E-mail, jsmith@emaik.com, bewerkingsvak"

Gebruiker kan bevestigen en corrigeren wat ze hebben getypt

warning

Stel geen contentDescription in op een EditText element. Wanneer aanwezig, leest TalkBack de content description in plaats van de getypte waarde, waardoor gebruikers hun invoer niet kunnen bevestigen, nakijken of corrigeren. Gebruik setLabelFor om een zichtbaar label aan het veld te koppelen.

In Eén Oogopslag

  • Deze regel heeft een Kritieke impact voor gebruikers
  • Gebruikers moeten horen wat ze hebben getypt om hun invoer te bevestigen en corrigeren
  • EditText elementen moeten hun huidige waarde beschikbaar maken voor ondersteunende technologieën — niet alleen hun label
  • Stel geen contentDescription in op een EditText element; dit overschrijft de getypte waarde en verbreekt aankondigingen van TalkBack
  • Ken een label toe aan het veld met setLabelFor() zodat zowel de veldnaam als de waarde beschikbaar zijn

Impact op Gebruikers

Mensen die op TalkBack vertrouwen, worden het meest getroffen door dit probleem. Wanneer een tekstinvoer zijn waarde niet prijsgeeft, kunnen gebruikers niet horen wat ze hebben getypt. Dit maakt het onmogelijk om formulierinvoeren zoals gebruikersnamen, wachtwoorden of adressen te bevestigen, controleren of corrigeren zonder gezichtsbijstand.

EditText-elementen moeten consequent hun huidige waarde beschikbaar stellen. Wanneer de waarde correct wordt weergegeven, kunnen ondersteunende technologieën invoer voorspelbaar communiceren.

Bevestig Probleem met Tekst Waarde Bewerken

  1. Schakel TalkBack in
  2. Focus op het tekstinvoerelement
  3. Typ wat tekst in het veld
  4. Een van de volgende dingen zal gebeuren:
    • Toegankelijk: TalkBack kondigt de ingevoerde tekst aan samen met het bijbehorende label
    • Niet-toegankelijk: TalkBack kondigt een content description aan in plaats van de getypte waarde, of kondigt de waarde helemaal niet aan

Los Problemen op

De meest voorkomende oorzaak van falen bij het Bewerken van Tekst Waarde is het rechtstreeks instellen van een contentDescription op een EditText, wat de waarde overschrijft die TalkBack anders zou voorlezen. Verwijder elke contentDescription van het invoerelement zelf en koppel in plaats daarvan een zichtbaar label zodat zowel de veldnaam als de getypte waarde beschikbaar zijn voor schermlezers.

XML

Koppel een TextView label aan de EditText met behulp van setLabelFor(). Stel geen contentDescription in op de EditText zelf, want dit verhindert dat TalkBack de getypte waarde leest.

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

Compose

Gebruik de label parameter op OutlinedTextField om een zichtbaar label aan de invoer te koppelen. Stel geen contentDescription in op de TextField zelf, want dit overschrijft de getypte waarde.

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        value = zipCode,
        onValueChange = { zipCode = it },
        label = { Text("Zip Code") }
    )
}

React Native

Vermijd het instellen van de accessibilityLabel eigenschap op de huidige waarde van de invoer. Stel deze in om het veld te beschrijven en gebruik de placeholder eigenschap voor voorbeeldwaarden. Dit zorgt ervoor dat het veldlabel en de getypte waarde gescheiden blijven en beide toegankelijk zijn.

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

Kan Ik Deze Regel Negeren?

Bewerken van Tekst Waarde heeft een kritieke impact voor gebruikers, en we raden ten zeerste aan om alle problemen te verhelpen die door deze regel worden gevonden. Gebruikers die op TalkBack vertrouwen, kunnen niet bevestigen of corrigeren wat ze hebben getypt als de waarde niet beschikbaar is - waardoor formulierinvoer ontoegankelijk wordt. Leer meer over regels negeren.

Hulpmiddelen

Deque University Cursus Pagina's

Opmerking: Volledige toegang tot Deque University-hulpmiddelen vereist een abonnement.

Andere Hulpmiddelen