Form Labels
What are form labels and why do inputs need them?
What is form labels?
Form labels are HTML <label> elements that programmatically associate a text description with a form input (text field, checkbox, select, etc.) using the for attribute matched to the input's id. Without a label, screen readers announce a form field as just "edit text" or "checkbox" with no indication of what information the user should enter.
Form labels are HTML label elements that programmatically associate a text description with a form input using the for attribute matched to the input's id. Without a label, screen readers announce fields with no indication of what information the user should enter, making forms unusable for assistive technology users.
Why does form labels matter?
Unlabeled form fields are one of the most common and most severe accessibility barriers on the web. Screen reader users cannot fill out forms when they do not know what each field is asking for. Labels also increase the clickable area on mobile devices — tapping the label text focuses the associated input. Placeholder text alone is not a substitute because it disappears once the user starts typing.
Missing form input labels were detected on 45.9% of home pages, making it one of the most common WCAG failures on the web.
Properly associated labels increase the clickable area of form inputs by up to 50%, improving usability on mobile touch devices.
How to fix it
- Add a <label> element for every form input and associate them using matching for and id attributes.
- Do not rely on placeholder text as a label replacement — placeholders disappear when the user begins typing and have poor contrast in most browsers.
- For visually hidden labels (when design constraints prevent visible labels), use a CSS visually-hidden class rather than display:none, which removes the label from assistive technology.
- Group related inputs (like radio buttons) in a <fieldset> with a <legend> that describes the group.
- Test with a screen reader (VoiceOver, NVDA, or JAWS) to confirm every field is announced with its label when focused.
Bad seed, good seed.
<input type="email" placeholder="Enter your email">
<!-- Screen reader announces: "edit text" with no context --><label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">
<!-- Screen reader announces: "Email address, edit text" -->Frequently asked questions
Can I use placeholder text instead of a label?
No. Placeholder text disappears when the user starts typing, has low contrast in most browsers, and is not reliably announced by all screen readers. Always provide a proper <label> element.
What if the design does not have space for a visible label?
Use a CSS visually-hidden class (position: absolute; width: 1px; height: 1px; overflow: hidden) on the label. The label remains accessible to screen readers while being invisible on screen.
Do I need labels for buttons?
Buttons get their accessible name from their text content or value attribute, so they do not need a separate <label>. However, icon-only buttons need an aria-label attribute to describe their purpose.
Related guides
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elemen...
Read more → AccessibilityKeyboard Navigation
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached...
Read more → AccessibilityLink Text
Accessible link text clearly describes the destination or purpose of a link without relying on surrounding context. Screen reader users ofte...
Read more →Scan your site for accessibility issues
Find and fix these issues automatically with eiSEO.
50 pages free · No credit card · Results in under 2 minutes