Dotare i campi dei moduli di etichette chiare e messaggi di errore

Come rendere davvero comprensibili le etichette e i messaggi di errore per i campi dei moduli?

Ogni campo di input deve avere un nome visibile in modo permanente e tecnicamente univoco. In caso di errore di validazione, il messaggio associato descrive in modo specifico la causa e la correzione, rimanendo accessibile fino a quando la modifica non ha esito positivo.

Messaggio di correzione con indicazione della causa.

1. Formulare un'etichetta visibile e univoca per ogni campo e collegarla tramite `for` e `id` o una relazione nativa equivalente.

2. Tradurre le regole di validazione in messaggi concreti che descrivano il problema di input e la correzione consentita senza utilizzare codice tecnico.

3. Inviare, navigare, correggere e ricontrollare un modulo con più errori simultanei utilizzando tastiera e screen reader.

Nome del campo persistente

• Relazione tecnica di errore Stato di errore, messaggio e campo sono collegati in modo tale che le tecnologie assistive acquisiscano in modo affidabile le nuove informazioni durante la convalida.

Scenario pratico: "Segnaposto come etichetta sostitutiva"

Un campo data visualizza solo il segnaposto GG. MM. AAAA e segnala "Non valido" dopo l'invio. Riceve l'etichetta visibile "Data di inizio", un suggerimento di formato e il messaggio collegato "Inserire la data di inizio nel formato giorno, mese, anno". Il riepilogo degli errori rimanda direttamente al campo.

Segnaposto come etichetta sostitutiva

• Segnaposto come etichetta sostitutiva Il nome del campo scompare durante l'inserimento, rendendo difficile verificare, correggere e comprendere i valori memorizzati.

• Messaggio di errore generico Un messaggio generico "Verificare" non specifica quale campo sia interessato e quale regola sia stata violata.

• Focus senza contesto Dopo l'invio, la visualizzazione salta a un punto in cui né il riepilogo né l'errore specifico sono comprensibili.

Relazione tecnica di errore

• Percentuale di campi modulo testati con nomi sempre visibili e relazioni di etichetta tecnicamente risolvibili.

• Percentuale di errori di convalida rilevati il ​​cui messaggio descrive chiaramente il campo, la causa e la possibile soluzione.

Come "etichettare chiaramente i campi dei moduli" si collega ad altri argomenti

È disponibile una risorsa approfondita adeguata. Utilizzare le tabelle per i dati, non per il layout"Perché le tabelle HTML dovrebbero essere utilizzate solo per i dati tabellari e non per il layout? "

Inoltre: Formulazione di messaggi di errore direttamente sul problema e in modo comprensibile.

Se desideri mettere in pratica l'etichettatura chiara dei campi dei moduli, puoi trovare maggiori informazioni su... Sistemi web robusti per ripiegare. Lì, l'attenzione si concentra su "Etichette, alternative di lingua e contenuto" e "Nome del campo permanente".

Conclusione: Etichettatura chiara dei campi dei moduli

Un modulo chiaro spiega sia l'input previsto sia la soluzione a un errore. Il testo visibile e le relazioni tecniche devono trasmettere lo stesso messaggio.

Fonti e ulteriori informazioni

Queste fonti primarie rendono comprensibili i presupposti, i limiti del sistema e i metodi di test per "Etichettatura chiara dei campi dei moduli".

• Linee guida per l'accessibilità dei contenuti web (WCAG) 2.2 – W3CRaccomandazione del W3C con criteri per alternative testuali, lingua delle parti, scopo dei link, etichette e identificazione degli errori.

• Controlli di etichettatura – Iniziativa per l'accessibilità web del W3CGuida ufficiale sulle etichette visibili e collegate programmaticamente per vari controlli dei moduli.