form

Wanneer gebruiken

Rondom een substantieel formulier — registratie, afrekenen, contact, profielbewerking — dat navigatie als landmark rechtvaardigt. Net als region wordt het <form>-element pas tot form-landmark verheven wanneer het een toegankelijke naam heeft (aria-label of aria-labelledby).

De toegankelijke naam van een formulier moet het doel beschrijven: “Contactformulier”, “Aanmelden”, “Profiel bewerken”. Vermijd generiek “Formulier” — overbodig naast de rol-aankondiging.

Als het formulier een zoekformulier is, gebruik dan <search> (of role="search") — het zoekladmark is specifieker.

Een enkelvoudig nieuwsbrief-aanmeldveld of een zoekveld rechtvaardigt het form-landmark niet. Reserveer het voor formulieren met drie of meer betekenisvolle invoervelden en een duidelijk doel.

Wanneer labelen

Altijd — zonder naam wordt <form> geen landmark. Bij meerdere formulieren op een pagina (een reactieformulier EN een nieuwsbrief-aanmelding) MOET elk een unieke naam hebben.

aria-labelledby die wijst naar een zichtbare kop heeft de voorkeur boven aria-label, omdat het de zichtbare titel koppelt aan de landmark-aankondiging.

Veelvoorkomende fouten

• <form> zonder aria-label / aria-labelledby. Geen landmark. Gebruikers kunnen er niet naartoe springen via landmarknavigatie.
• aria-label="Formulier" — overbodig.
• <form role="search"> gebruiken EN aria-label="Zoeken". Het zoekladmark dekt het al; de formrolrol zou conflicteren.
• Login- en aanmeldformulieren beide gelabeld als “Aanmelden” — niet te onderscheiden in het landmarkmenu.
• Een enkel invoerveld in <form> omhullen en het als form-landmark labelen. Overmatig toegepast; het landmark voegt geen waarde toe.

Voorbeeld

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Neem contact op</h2>
  <label>Naam <input type="text" name="name" required></label>
  <label>E-mail <input type="email" name="email" required></label>
  <label>Bericht <textarea name="message" required></textarea></label>
  <button type="submit">Verzenden</button>
</form>