SC 1.3.5 Livello AA WCAG 2.1

Identificare lo scopo dell'input

I campi dei moduli che raccolgono informazioni personali comuni — nome, e-mail, telefono, indirizzo, carta di credito — devono dichiarare il loro scopo in modo programmatico tramite l'attributo HTML autocomplete, consentendo al browser di compilare i dati e agli strumenti assistivi di personalizzare l'interfaccia.

Che cosa richiede

Per ciascuno dei 53 campi specifici relativi alle informazioni degli utenti elencati nelle WCAG (nome, e-mail, tel, indirizzo, numero di carta di credito, data di nascita, paese, ecc.), l’input deve includere il token autocomplete corrispondente. L’obiettivo non è la comodità del completamento automatico del browser — è che gli strumenti assistivi (tastiere con set di simboli, app AAC, livelli di supporto cognitivo) possano sostituire le etichette dei moduli con icone, traduzioni o input alternativi solo quando lo scopo del campo è leggibile dalla macchina.

Come soddisfarlo

Aggiungere autocomplete="email" ai campi e-mail, autocomplete="given-name" al nome di battesimo, autocomplete="family-name" al cognome.
Usare autocomplete="tel" per il telefono, autocomplete="street-address", autocomplete="postal-code", autocomplete="country".
Per i moduli di pagamento, usare autocomplete="cc-name", cc-number, cc-exp, cc-csc.
Fare riferimento all’elenco completo nella specifica HTML — questi token sono normativi.
Combinare con <input type="email">, type="tel">, type="url"> per le tastiere a schermo corrette.
Per i campi non personali (una casella di ricerca, una valutazione personalizzata), non è necessario alcun token autocomplete — il criterio di successo riguarda solo i 53 tipi di informazioni personali.

Errori comuni

autocomplete="off" sull’intero modulo di accesso «per sicurezza» — impedisce attivamente la conformità e blocca i gestori di password.
Campo e-mail senza token autocomplete, per cui gli utenti con tastiera a simboli non possono ottenere un input personalizzato.
Campi indirizzo etichettati come «Riga indirizzo 1» ma senza autocomplete="address-line1".
Campi carta di credito con completamento automatico JavaScript personalizzato invece del token nativo.
Modulo di registrazione con campo name per il nome completo ma senza autocomplete="name".

Perché è importante

Questo criterio di successo viene ampiamente ignorato perché l’errore non è visibile — il modulo funziona per gli utenti tipici, ma gli utenti con input adattivo ricevono un’esperienza generica. Aggiungere i token autocomplete è un’attività da 30 minuti nella maggior parte dei flussi di registrazione e migliora anche l’esperienza degli utenti tipici (il completamento automatico del browser funziona meglio) allo stesso tempo.