How to Add Labels to Form Inputs

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

Easy Medium Impact 15 min

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

Pair label and input

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

Label icon-only fields

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

Code Fix

html

Before (broken)

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

After (fixed)

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

Platform-Specific Instructions

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.

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit