form

När används det

Runt ett substantiellt formulär — registrering, utcheckning, kontakt, redigering av profil — som förtjänar att navigeras som ett landmärke. Precis som region uppgraderas <form>-elementet till ett formulärlandmärke BARA när det har ett tillgängligt namn (aria-label eller aria-labelledby).

Ett formulärs tillgängliga namn ska beskriva dess syfte: “Kontaktformulär”, “Registrera dig”, “Redigera profil”. Undvik generiska “Formulär” — redundant med rollannonsering.

Om formuläret är ett sökformulär, använd <search> (eller role="search") i stället — söklandmärket är mer specifikt.

En enkel nyhetsbrevsprenumeration med ett fält eller en sökruta förtjänar inte formulärlandmärket. Reservera det för formulär med tre eller fler meningsfulla inmatningar och ett tydligt syfte.

När det ska etiketteras

Alltid — utan namn blir <form> inget landmärke. Med flera formulär på en sida (ett kommentarsformulär OCH en nyhetsbrevsprenumeration) MÅSTE varje formulär ha ett distinkt namn.

aria-labelledby som pekar på en synlig rubrik föredras framför aria-label eftersom det kopplar den synliga titeln till landmärkets annonsering.

Vanliga fel

• <form> utan aria-label / aria-labelledby. Inte ett landmärke. Användare kan inte hoppa till det via landmärksnavigering.
• aria-label="Formulär" — redundant.
• Att använda <form role="search"> och OCKSÅ aria-label="Sök". Söklandmärket täcker redan det; formulärrollen skulle krocka.
• Inloggnings- och registreringsformulär båda etiketterade “Logga in” — omöjliga att skilja i landmärkmenyn.
• Att omge ett enskilt inmatningsfält med <form> och etikettera det som ett formulärlandmärke. Överdrivet; landmärket tillför inget värde.

Exempel

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Kontakta oss</h2>
  <label>Namn <input type="text" name="name" required></label>
  <label>E-post <input type="email" name="email" required></label>
  <label>Meddelande <textarea name="message" required></textarea></label>
  <button type="submit">Skicka</button>
</form>