How to Fix Missing Form Labels WCAG 2.2

Why this matters

Without labels, screen reader users hear 'edit text' with no context about what to type. Users with cognitive disabilities rely on visible labels to understand forms. Placeholder text is not a substitute — it disappears when typing begins and has low contrast by default.

Code examples

<input type="email" placeholder="Enter your email">
<input type="text" id="name" placeholder="Name">

<label for="email">Email address</label>
<input type="email" id="email" placeholder="jane@example.com">

<label for="name">Full name</label>
<input type="text" id="name">

How to fix it — step by step

1. 1
   Add a <label> element for every form input
2. 2
   Connect the label to the input using matching for= and id= attributes
3. 3
   The for= value must exactly match the input's id= value
4. 4
   Never use placeholder text as the only label — it disappears on focus
5. 5
   If you need a visually hidden label, use a sr-only CSS class (position:absolute; clip:rect(0,0,0,0))
6. 6
   For checkbox and radio groups, wrap them in a <fieldset> with a <legend>
7. 7
   Test by clicking the label text — if the input doesn't focus, they're not connected

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.