Nome 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 Impatto - Grave

Gli elementi di immissione di testo dovrebbero avere un nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Impatto

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

EditText o TextField gli elementi dovrebbero fornire informazioni laddove il sistema operativo Android le prevede. 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 letto le informazioni di cui sopra oppure sono state annunciate nell'ordine sbagliato.

Come risolvere

Aggiungere etichette appropriate al campo di testo. Utilizzare le icone solo quando è disponibile una descrizione del contenuto.

XML

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

Compose

@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

Associare l'elemento di testo al campo di testo corrispondente utilizzando la proprietà aria-labelledBy :

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

Is this page helpful?

Help us improve this page

Still need help?