Proprietà Stato del widget

`aria-required`

Indica che l'input dell'utente è obbligatorio su un controllo prima che il form possa essere inviato. Usare l'attributo HTML required sui campi nativi; ricorrere ad aria-required solo quando non esiste un equivalente HTML — ad esempio un combobox costruito su un div.

Quando usarlo

Solo quando l’attributo HTML required non è disponibile. I campi nativi — <input>, <select>, <textarea> — devono usare required. L’attributo HTML viene annunciato da tutti gli screen reader, partecipa alla validazione nativa del browser e attiva la pseudo-classe CSS :required. aria-required non fa nulla di tutto ciò da solo; è esclusivamente un annuncio.

I casi legittimi per aria-required:

Un role="combobox" personalizzato costruito su un <div> o su un <input> stilizzato in cui si è presa in carico la validazione.
Un role="radiogroup" in cui il gruppo nel suo insieme è obbligatorio (non è possibile applicare required a un <div>).
Un selettore di data, di file o un widget di valutazione personalizzato che non è un input nativo.

Se è possibile usare HTML required, è preferibile farlo.

Come si comporta

Booleano. aria-required="true" fa sì che la tecnologia assistiva annunci «obbligatorio» (o «campo da compilare», a seconda dello screen reader) insieme al nome e al ruolo del campo. aria-required="false" equivale a omettere l’attributo e raramente è necessario.

aria-required non impedisce l’invio del form. Non aggiunge un asterisco rosso. Non attiva una pseudo-classe CSS. È esclusivamente un segnale per le tecnologie assistive. La logica di validazione, i messaggi di errore e il marcatore visivo del campo obbligatorio rimangono a carico degli sviluppatori.

Il marcatore visivo del campo obbligatorio (un *, la parola «obbligatorio» ecc.) dovrebbe essere comunicato anche nel nome accessibile — nel testo visibile dell’etichetta o tramite una descrizione — in modo che l’utente vedente e l’utente di tecnologia assistiva ricevano la stessa informazione.

Errori comuni

Usare aria-required="true" su un <input> nativo invece dell’attributo HTML required. Funziona, ma si rinuncia senza motivo alla validazione del browser e allo stile :required.
Impostare aria-required="true" su un elemento che non è un controllo di modulo — un pulsante, un’intestazione, un div senza ruolo. L’attributo viene ignorato.
Dimenticare il marcatore visivo del campo obbligatorio. Gli utenti vedenti vedono un campo non marcato; gli utenti di tecnologia assistiva sentono «obbligatorio». Problema relativo al criterio di successo WCAG SC 1.3.3.
Contrassegnare un campo come obbligatorio in ARIA ma omettere la verifica nella logica di invio del form. L’annuncio dice «obbligatorio»; il server accetta tranquillamente valori vuoti.
Associare aria-required con aria-invalid="true" troppo presto. Il campo è non valido solo dopo che l’utente ha tentato di inviare il form lasciandolo vuoto, non al caricamento della pagina.
Localizzare il marcatore visivo * dimenticando che il testo per lo screen reader nell’etichetta è ora disallineato.

Esempio

<!-- Input nativo: preferire l'attributo HTML -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Combobox personalizzato in cui HTML required non è disponibile -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>