Valore del campo di testo modificabile

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 Impatto - Critico

Gli elementi di immissione di testo dovrebbero avere il proprio valore disponibile per tecnologie assistive come TalkBack e Voice Access.

warning

ContentDescriptions on EditText views può sovrascrivere il valore su alcune versioni di Android.

Impatto

I problemi individuati da questa regola hanno un impatto sulle persone affette da cecità.

EditText elementi dovrebbero fornire informazioni laddove il sistema operativo Android se le aspetta. Di conseguenza, le tecnologie assistive possono comunicare informazioni in modo prevedibile.

Conferma

  1. Attiva TalkBack
  2. Concentrati sull'elemento
  3. Si verificherà una delle seguenti situazioni:
    • Accessibile: TalkBack annuncia il testo immesso, per e le etichette associate Text.
    • Inaccessibile: TalkBack non ha annunciato le informazioni di cui sopra oppure le ha annunciate nell'ordine sbagliato.

Come risolvere

Assicurarsi che un'etichetta sia correttamente associata a un elemento EditText o TextField in modo che sia il nome sia il valore siano disponibili per le tecnologie assistive.

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

Evitare di impostare la proprietà accessibilityLabel sul valore dell'input. Quando si imposta un esempio, è possibile aggiungere il valore alla proprietà placeholder .

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