Modifica Nome Testo

Cosa Controlliamo

Gli elementi di input del testo devono avere un nome accessibile disponibile per le tecnologie assistive come TalkBack e Voice Access.

Esempio Non Conforme ❌

L'input del testo non ha un nome accessibile.

TalkBack legge "Edit text."

Voice Access — l'utente non ha un'etichetta da pronunciare per attivare il campo.

Esempio Conforme ✅

L'input del testo è associato a un'etichetta visibile tramite labelFor.

TalkBack legge "Email address, Edit text."

Voice Access — l'utente pronuncia "Indirizzo email" per attivare il campo.

In Sintesi

• Questa regola ha un impatto serio sugli utenti
• Ogni campo di input del testo deve avere un'etichetta che le tecnologie assistive possano annunciare
• Il testo segnaposto da solo non è un sostituto per un'etichetta
• Gli input con sole icone devono avere una descrizione del contenuto
• I campi non etichettati lasciano gli utenti dei lettori di schermo senza contesto su cosa digitare

Impatto sugli Utenti

Le persone non vedenti che usano TalkBack per navigare nella tua app sono direttamente influenzate dai problemi rilevati da questa regola. Quando un input di testo non ha un nome accessibile, TalkBack annuncia solo "Modifica testo" — senza dare all'utente informazioni su cosa dovrebbe digitare. Questo è particolarmente disorientante nei moduli con più campi.

Usa etichette visibili e persistenti per tutti i campi del modulo. Il testo segnaposto da solo non è un sostituto per un'etichetta perché scompare quando l'utente inizia a digitare.

Gli elementi EditText e TextField dovrebbero fornire informazioni sull'etichetta dove il sistema operativo Android se lo aspetta in modo che le tecnologie assistive possano comunicare il scopo dell'elemento di input in modo prevedibile.

Conferma Problema Nome Testo Modificabile

1. Attiva TalkBack
2. Focalizza l'elemento di input del testo
3. Accadrà una delle seguenti cose:
   • Non Accessibile: TalkBack annuncia solo "Modifica testo" senza etichetta, o annuncia informazioni in un ordine inatteso
   • Accessibile (valore predefinito, campo vuoto): TalkBack annuncia l'etichetta del campo seguita da "Modifica testo" (ad esempio "Nome utente, Modifica testo")
   • Accessibile (l'utente ha inserito un valore nel campo): TalkBack annuncia il valore inserito dall'utente + "Modifica testo per" + l'etichetta associata Text (ad esempio "'help@deque.com', Modifica testo per 'Indirizzo email'")

Correggi Problemi

Per risolvere i problemi di Nome Testo Modificabile, associa un'etichetta visibile al campo di input. Fornisci una descrizione del contenuto quando non è presente un'etichetta visibile, o quando si utilizzano icone.

XML

Associa un'etichetta visibile TextView al EditText usando setLabelFor.

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

Compose

Usa il parametro label integrato su OutlinedTextField o TextField per fornire un nome accessibile. Fornisci una descrizione del contenuto per input con sole icone.

@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

Associa l'elemento di testo al relativo campo di testo corrispondente utilizzando la proprietà aria-labelledby, facendo riferimento al nativeID dell'etichetta.

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

Posso Ignorare Questa Regola?

Nome Testo Modificabile ha un impatto serio per gli utenti, e raccomandiamo di risolvere questo problema in quasi tutti i casi. Un campo di testo non etichettato è inusabile per gli utenti dei lettori di schermo. In rare situazioni — come un campo di ricerca il cui scopo è chiaramente inconfondibile dal contesto circostante — potresti considerare di sopprimere la regola, ma dovrebbe essere un'eccezione, non la norma. Scopri di più su ignorare le regole.

Risorse

Pagine del Corso Deque University

• 4.1.2 Nome, Ruolo, Valore (A)
• Criterio di Successo 4.1.2 - Nome, Ruolo, Valore

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.0, Raccomandazione W3C
  • Criterio di Successo 4.1.2 - Nome, Ruolo, Valore
• Documenti di Comprensione WCAG 2.0
  • Comprendere 4.1.2 A - Nome, Ruolo, Valore