A: Form elements must have labels (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that every <form> element has a unique, programmatically determinable label.

This means

The form has no accessible name. Screen readers announce only “form” without purpose or context. Users do not know which form they are opening.

Impact

Orientation suffers, processes are aborted, error rates increase. Risk of WCAG violation and negative effect on conversion.

Recommendation

• Assign a short, clear form title.

• Programmatically link: aria-labelledby to a visible heading or use aria-label directly on the <form>.

• Make the title visible and keep it unique on the page.

Example

Problematic

<form>
  <!-- Fields without form title -->
</form>

Better (link visible heading)

<h2 id="contact-h">Contact Form</h2>
<form aria-labelledby="contact-h">
  …
</form>

Alternative (compact with label)

<form aria-label="Newsletter Signup">
  …
</form>

Search (additional semantics helpful)

<form role="search" aria-label="Website Search">
  …
</form>