One of the most common accessibility failures on the web is form fields without labels. When a screen reader encounters an <input> without a label, it announces something like "edit text" — the user has no idea what to type.

The <label> Element

Every input field needs a <label> that is programmatically linked to it using for and id:

<label for="email">Email address:</label>
<input type="email" id="email" name="email">

When the for attribute matches the input's id, screen readers announce: "Email address, edit text." The user now knows exactly what to enter.

Why Placeholders Are Not Enough

Many developers use placeholder instead of labels:

<!-- ❌ BAD — no label! -->
<input type="text" placeholder="Enter your name">
<!-- ✅ GOOD — label + placeholder -->
<label for="name">Full name:</label>
<input type="text" id="name" placeholder="e.g. Marie Dupont">

Placeholders disappear when the user starts typing, leaving them confused about what the field is for.

Required Fields

Mark required fields with the required attribute and tell users visually:

<label for="name">Name <span aria-hidden="true">*</span>:</label>
<input type="text" id="name" name="name" required>

Your Task

Build an accessible registration form with: