Indicare lo stato non valido con aria-invalid
Indicare alle tecnologie assistive quali campi non sono validi
Indicare lo stato non valido con aria-invalid è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Il rosso non basta
Un bordo rosso comunica agli utenti vedenti che la convalida di un campo non è riuscita. Chi usa uno screen reader non vede i colori, quindi ha bisogno che l'errore sia dichiarato nel codice. 🚫
Il flag di invalidità
L'attributo aria-invalid contrassegna un controllo la cui convalida non è riuscita. Impostatelo su true e le tecnologie assistive annunceranno lo stato di errore.
<input aria-invalid="true">Il valore predefinito è false
Un campo privo di aria-invalid viene considerato valido. Aggiungete aria-invalid="true" solo quando un controllo ha effettivamente rilevato un errore.
Ripristinatelo
Quando l’utente corregge il valore, imposti aria-invalid su false oppure lo rimuova. Lasciarlo impostato su true annuncia un errore che non esiste più.
<input aria-invalid="false">Temporizzare il flag
Applichi aria-invalid quando esegue effettivamente la validazione, non al caricamento della pagina. Contrassegnare come non validi i campi vuoti prima che l’utente inizi a digitare è un comportamento ostile.
Abbinarlo a un messaggio
aria-invalid indica che qualcosa non va, ma non specifica cosa. Lo abbini sempre a aria-describedby, così l’utente ascolta anche il motivo.
Viene annunciato quando riceve il focus
Quando il focus entra in un campo non valido, gli screen reader pronunciano invalid insieme al nome. L’utente capisce subito che deve correggerlo.
Definire lo stile dello stato
Può selezionare l’attributo in CSS per mostrare un anello rosso. In questo modo i Suoi elementi visivi e la semantica restano perfettamente sincronizzati.
input[aria-invalid="true"] {
border-color: crimson;
}Più di vero o falso
aria-invalid accetta anche valori come grammar o spelling. Per la maggior parte dei moduli, il semplice true è esattamente ciò che serve.
Non lo simuli con il colore
Non faccia mai affidamento solo su una classe rossa per indicare un errore. La classe è invisibile alle tecnologie assistive; è aria-invalid a trasmettere il significato.
Un campo alla volta
Contrassegni ogni controllo non valido singolarmente. Impostare aria-invalid su un contenitore o sul modulo non indica agli utenti quale input richiede attenzione.
Controllo rapido
Che cosa comunica realmente aria-invalid="true"?
Riepilogo
Utilizzi aria-invalid per segnalare i campi non validi, lo imposti su true in caso di errore e su false dopo la correzione, e lo abbini a un messaggio di errore descritto. ✅
Domande Frequenti
La lezione «Indicare lo stato non valido con aria-invalid» è gratuita?
Sì — il testo completo di «Indicare lo stato non valido con aria-invalid» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Indicare lo stato non valido con aria-invalid»?
Indicare alle tecnologie assistive quali campi non sono validi Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Indicare lo stato non valido con aria-invalid»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Collegare gli errori ai campi con aria-describedby
- Indicare lo stato non valido con aria-invalid
- Spostare il focus sul primo errore
- Inline, al blur o all'invio: il momento è importante