Modifica valore del testo

Cosa Verifichiamo

Quando un utente digita in un campo di testo, il valore inserito deve essere esposto programmaticamente per tecnologie assistive come TalkBack e Voice Access.

Esempio Errato ❌

value = "Campo email"

TalkBack annuncia il `contentDescription` anziché il testo digitato
"Campo email, box di modifica"

L'utente non può confermare, controllare o correggere ciò che ha digitato

Esempio Corretto ✅

value = "jsmith@emaik.com" (il testo digitato)

TalkBack annuncia l'etichetta e il valore digitato
"Email, jsmith@emaik.com, box di modifica"

L'utente può confermare e correggere ciò che ha digitato

In Sintesi

• Questa regola ha un impatto Critico per gli utenti
• Gli utenti hanno bisogno di ascoltare ciò che hanno digitato per confermare e correggere il loro input
• Gli elementi EditText devono esporre il loro valore attuale alle tecnologie assistive — non solo la loro etichetta
• Non impostare un contentDescription su un elemento EditText; questo sovrascrive il valore digitato e interrompe gli annunci di TalkBack
• Associa un'etichetta al campo usando setLabelFor() in modo che siano disponibili sia il nome del campo che il valore

Impatto sugli Utenti

Le persone che fanno affidamento su TalkBack sono le più colpite da questo problema. Quando un input di testo non espone il suo valore, gli utenti non possono ascoltare ciò che hanno digitato. Ciò rende impossibile confermare, controllare o correggere le voci dei moduli — come nomi utente, password o indirizzi — senza assistenza visiva.

Gli elementi EditText dovrebbero fornire costantemente il loro valore attuale. Quando il valore è esposto correttamente, le tecnologie assistive possono comunicare l'input in modo prevedibile.

Conferma Problema Valore Modifica Testo

1. Attiva TalkBack
2. Focalizza l'elemento di input testo
3. Digita qualche testo nel campo
4. Si verificherà uno dei seguenti casi:
   • Accessibile: TalkBack annuncia il testo inserito insieme all'etichetta associata
   • Inaccessibile: TalkBack annuncia una descrizione del contenuto anziché il valore digitato, oppure non annuncia affatto il valore

Correggi Problemi

La causa più comune di fallimento per Valore Modifica Testo è impostare un contentDescription direttamente su un EditText, il che sovrascrive il valore che TalkBack leggerebbe altrimenti. Rimuovi qualsiasi contentDescription dall'elemento di input stesso e invece associa un'etichetta visibile in modo che siano disponibili sia il nome del campo che il valore digitato ai lettori di schermo.

XML

Associa un'etichetta TextView con il EditText usando setLabelFor(). Non impostare un contentDescription sul EditText stesso, in quanto ciò impedirà a TalkBack di leggere il valore digitato.

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

Compose

Usa il parametro label su OutlinedTextField per associare un'etichetta visibile all'input. Non impostare contentDescription sul TextField stesso, in quanto ciò sovrascrive il valore digitato.

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

React Native

Evita di impostare la proprietà accessibilityLabel sul valore attuale dell'input. Impostalo per descrivere invece il campo, e usa la proprietà placeholder per valori di esempio. Ciò garantisce che l'etichetta del campo e il valore digitato rimangano separati e siano entrambi accessibili.

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

Posso Ignorare Questa Regola?

Valore Modifica Testo ha un impatto critico per gli utenti, e raccomandiamo fortemente di correggere tutti i problemi rilevati da questa regola. Gli utenti che si affidano a TalkBack non possono confermare o correggere ciò che hanno digitato se il valore non è esposto — rendendo la compilazione del modulo inaccessibile. 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
  • Comprensione 4.1.2 A - Nome, Ruolo, Valore