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.
Key statistics
Missing form input labels were detected on 45.9% of home pages, making it one of the most common WCAG failures on the web.
Source: WebAIM Million
Properly associated labels increase the clickable area of form inputs by up to 50%, improving usability on mobile touch devices.
Source: W3C Web Accessibility Initiative
How to fix it
-
1
Add a <label> element for every form input and associate them using matching for and id attributes.
-
2
Do not rely on placeholder text as a label replacement — placeholders disappear when the user begins typing and have poor contrast in most browsers.
-
3
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.
-
4
Group related inputs (like radio buttons) in a <fieldset> with a <legend> that describes the group.
-
5
Test with a screen reader (VoiceOver, NVDA, or JAWS) to confirm every field is announced with its label when focused.
Code example
<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
Related topics
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
Keyboard Navigation
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached and operated using only the keyboard (typically via the Tab, Enter, Space, and arrow keys). This is a fundamental accessibility requirement because many users cannot use a mouse.
Link Text
Accessible link text clearly describes the destination or purpose of a link without relying on surrounding context. Screen reader users often navigate by pulling up a list of all links on a page, so each link must make sense in isolation. Generic phrases like "click here", "read more", or "learn more" provide no information about where the link leads.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.