form

When to use

Around a substantive form — registration, checkout, contact, editing a profile — that warrants navigation as a landmark. Like region, the <form> element is promoted to a form landmark ONLY when it has an accessible name (aria-label or aria-labelledby).

A form’s accessible name should describe its purpose: “Contact form”, “Sign up”, “Edit profile”. Avoid generic “Form” — redundant with the role announcement.

If the form is a search form, use <search> (or role="search") instead — the search landmark is more specific.

A single-input newsletter signup or a “search” box does not warrant the form landmark. Reserve it for forms with three or more meaningful inputs and a clear purpose.

When to label

Always — without a name, the <form> does not become a landmark. With multiple forms on a page (a comment form AND a newsletter signup), each MUST have a distinct name.

aria-labelledby pointing at a visible heading is preferred over aria-label because it associates the visible title with the landmark announcement.

Common failures

• <form> with no aria-label / aria-labelledby. Not a landmark. Users cannot jump to it via landmark navigation.
• aria-label="Form" — redundant.
• Using <form role="search"> and ALSO aria-label="Search". The search landmark already covers it; form role would conflict.
• Login + signup forms both labelled “Sign in” — indistinguishable in the landmark menu.
• Wrapping a single input in <form> and labelling it as a form landmark. Over-applied; the landmark adds no value.

Example

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Contact us</h2>
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>