WCAG 2.2: How to Properly Label Form Inputs for Screen Readers

Placeholder text is NOT a label. Here's the correct way to label form controls for WCAG 2.2 compliance.

The Common Mistake

Many developers use placeholder as a substitute for a <label>. This fails WCAG 1.3.1.

<!-- Inaccessible -->
<input type="email" placeholder="Email address" />

The Correct Approach

<label for="email">Email address</label>
<input type="email" id="email" name="email" aria-required="true" />

Error Messages

Always associate errors with the input using aria-describedby:

<input type="email" id="email" aria-describedby="email-error" aria-invalid="true" />
<span id="email-error" role="alert">Please enter a valid email address.</span>