Messaggio Di Errore Modelli HTML

Template HTML puliti per messaggi di errore

I template HTML per messaggi di errore offrono markup pronto all'uso quando qualcosa si interrompe. Ciascuno combina un'intestazione che indica il problema, una breve spiegazione e un link o pulsante per proseguire. Molti dei design presentati sono schermate 404 e blocchi di errore compatti. Gli stessi elementi si comportano diversamente non appena l'errore compare all'interno di un modulo o segue una richiesta non riuscita.

Il markup dietro una pagina 404 indipendente

Quando l'errore occupa l'intera pagina, il markup segue solitamente questo ordine:

1. Un'intestazione principale che indica chiaramente il problema, dato che un numero 404 gigante ha poco significato per chi naviga tra i titoli tramite uno screen reader.
2. Un breve paragrafo sottostante che suggerisce una causa probabile, come un indirizzo digitato in modo errato o contenuti spostati.
3. Un link principale verso la homepage o verso la sezione che il visitatore molto probabilmente intendeva raggiungere.
4. Una navigazione secondaria opzionale o un campo di ricerca per chi arriva da un vecchio segnalibro.

Un server invia solitamente una pagina 404 personalizzata per qualsiasi indirizzo non valido richiesto, quindi i link relativi e i percorsi delle immagini possono non funzionare se quell'indirizzo si trova a diversi livelli di cartelle. I percorsi relativi alla radice evitano una pagina di errore parzialmente rotta, che sarebbe una schermata spiacevole da mostrare a chi si è già perso.

Feedback in linea sui campi e invii non riusciti

All'interno di un modulo, l'errore si riduce da un intero documento a una o due frasi accanto all'elemento che ha causato il problema. Il markup dipende quindi dall'inconveniente appena riscontrato dall'utente:

1. Un errore di convalida deve essere collocato subito dopo il rispettivo campo nell'ordine del codice sorgente, e un riferimento "aria-describedby" consente alle tecnologie assistive di leggere insieme l'etichetta e la correzione.
2. Una richiesta non riuscita necessita di un messaggio vicino al comando che l'ha attivata, all'interno di una live region che lo annunci senza ricaricare la pagina. Un vero pulsante è l'ideale per riprovare, dato che un link dovrebbe condurre altrove.
3. Un modulo lungo può aprirsi con un breve riepilogo in cui ciascun problema è un link interno che indirizza direttamente al campo che richiede attenzione.

Blocchi riutilizzabili che rimangono accessibili

Un blocco di errore è più facile da riutilizzare quando le sue parti condividono un unico contenitore, consentendo all'unità di spostarsi da una pagina 404 a una dashboard come elemento singolo. Gli Elements e Blocks predefiniti di Nicepage rendono rapida la disposizione di tale unità sull'area di lavoro. Il livello dell'intestazione e la scelta tra un link e un pulsante meritano comunque un rapido controllo nell'HTML esportato, poiché entrambi definiscono il modo in cui il blocco viene annunciato.

I migliori template HTML per messaggi di errore offrono un markup in grado di scalare da una pagina intera a un singolo campo, mantenendo intatti l'ordine di lettura e i collegamenti per lo screen reader.