Skip to main content
SlapMyWeb
Slap a site

Accessibility fix

How to Add Labels to Form Inputs

Associate a visible label with every input so screen-reader users can fill your forms.

Difficulty
Easy
Impact
Medium
Time
15 min

Before

<input type="email" placeholder="Email">  <!-- placeholder is not a label -->

After

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">
Before and after code for: How to Add Labels to Form Inputs

A form input without a label gives a screen-reader user no way to know what to type. Fix it with a visible label element whose for attribute matches the input's id: that also makes the label clickable, which enlarges the tap target. Placeholder text is not a label: it disappears the moment someone starts typing.

Why it matters

A placeholder is not a label: it disappears when the user types and is often ignored by screen readers. Inputs without a programmatically associated label are unusable for assistive-tech users and fail accessibility audits.

How to fix it

  1. Pair label and input

    Use <label for="id"> matching the input's id (or wrap the input in the label).

  2. Label icon-only fields

    For inputs with no visible label (e.g. a search box), add aria-label.

The code

Beforehtml
<input type="email" placeholder="Email">  <!-- placeholder is not a label -->
Afterhtml
<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

On your platform

WordPress

Most form plugins (Contact Form 7, Gravity Forms) add labels: ensure "label" isn't hidden in favour of placeholder-only styling.

Next.js

Always render a <label htmlFor> next to each input in your form components.

Sources

More fixes

Accessibility

How to Fix Low Color Contrast

Make text meet the WCAG 4.5:1 contrast ratio so it's readable for everyone.

Accessibility

How to Fix a Missing Lang Attribute

Declare the page's language so assistive technology pronounces it correctly.

Accessibility

How to Fix Tap Targets That Are Too Small

Make buttons and links big enough and far enough apart to hit on a phone.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress