Normative · ARIA

Ruolo Punto di riferimento

form

Un landmark per un modulo — un insieme di controlli di input che inviano dati. Un elemento <form> viene esposto come landmark form SOLO quando dispone di un nome accessibile. Senza nome, è semplicemente un modulo, non un landmark.

Quando usarlo

Attorno a un modulo sostanziale — registrazione, acquisto, contatto, modifica del profilo — che merita di essere raggiunto tramite navigazione come landmark. Analogamente a region, l’elemento <form> viene promosso a landmark form SOLO quando possiede un nome accessibile (aria-label o aria-labelledby).

Il nome accessibile del modulo deve descriverne lo scopo: «Modulo di contatto», «Registrazione», «Modifica profilo». Si eviti il generico «Modulo» — ridondante con l’annuncio del ruolo.

Se il modulo è un modulo di ricerca, si utilizza invece <search> (o role="search") — il landmark search è più specifico.

Un modulo di iscrizione alla newsletter con un solo campo o una casella di ricerca non giustifica il landmark form. Va riservato a moduli con tre o più input significativi e uno scopo chiaro.

Quando assegnare un’etichetta

Sempre — senza nome, il <form> non diventa un landmark. Con più moduli nella stessa pagina (un modulo commenti E un’iscrizione alla newsletter), ciascuno DEVE avere un nome distinto.

È preferibile aria-labelledby che punta a un’intestazione visibile rispetto ad aria-label, perché associa il titolo visibile all’annuncio del landmark.

Errori comuni

  • <form> senza aria-label / aria-labelledby. Non è un landmark. Gli utenti non possono raggiungerlo tramite navigazione per landmark.
  • aria-label="Modulo" — ridondante.
  • Usare <form role="search"> e ANCHE aria-label="Cerca". Il landmark search è già sufficiente; il ruolo form creerebbe un conflitto.
  • Moduli di login e registrazione entrambi etichettati «Accedi» — indistinguibili nel menu dei landmark.
  • Avvolgere un singolo input in <form> e classificarlo come landmark form. Applicazione eccessiva; il landmark non aggiunge valore.

Esempio

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Contattaci</h2>
  <label>Nome <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Messaggio <textarea name="message" required></textarea></label>
  <button type="submit">Invia</button>
</form>