Testo di aiuto e campi obbligatori annunciati

Spesso un campo ha bisogno di più di un semplice nome. I suggerimenti e i requisiti devono essere comunicati alle tecnologie assistive, non solo a chi vede. 📝

Inserisca il testo di aiuto in un elemento, quindi imposti aria-describedby dell'input sull'id di quell'elemento. Ora il suggerimento viene letto dopo l'etichetta.

Gli screen reader pronunciano prima la label, poi il testo indicato da described-by. L'utente ascolta nome e suggerimento in un ordine naturale.

aria-describedby può elencare diversi id separati da spazi. Combini un suggerimento e un messaggio di errore per lo stesso campo.

Aggiunga l'attributo required, così il browser applicherà il vincolo e comunicherà alle tecnologie assistive che il campo deve essere compilato.

Con required, uno screen reader annuncia che il campo è obbligatorio quando riceve il focus. È già tutto incluso, senza bisogno di ARIA aggiuntiva.

Un asterisco rosso da solo non comunica nulla ed è facile da non notare. Lo abbini all'attributo required o a un testo visibile che indichi l'obbligatorietà.

Se usa un asterisco, aggiunga vicino al modulo una legend che spieghi che indica i campi obbligatori. Non lasci mai il simbolo senza spiegazione.

Per i controlli personalizzati privi di convalida nativa, aria-required impostato su true comunica lo stesso stato agli screen reader.

Quando la maggior parte dei campi è obbligatoria, indichi invece i pochi facoltativi. Il modulo sarà meno affollato e il criterio resterà chiaro.

Mostri i suggerimenti sullo schermo, non solo agli screen reader. Tutti traggono vantaggio dal vedere le regole prima di commettere un errore.

Come si collega un testo di aiuto a un campo per gli screen reader?

Colleghi i suggerimenti con aria-describedby e contrassegni con required i campi obbligatori. Ora ogni utente può conoscere il nome, l'aiuto e le regole. ✅