Form Label Checker
Scan HTML form snippets to verify that every interactive control is properly labeled for screen readers and accessibility.
Form Label Checker
Instantly scan HTML for missing or invalid form labels.
Why Form Labels Matter
When a screen reader encounters a form control (like a text input or a dropdown), it needs to announce what that control is for. Visually, a label sitting next to an input is obvious. To a screen reader, that visual connection doesn't exist. You must create a programmatic relationship.
Methods for Labeling Forms
1. Explicit Labels (Recommended)
Give the input an id and point the label to it using the for attribute. Clicking the label will focus the input.
<input type="email" id="email">
2. Implicit Labels
Wrap the input completely inside the <label> tag. This creates an automatic association without needing IDs.
First Name
<input type="text" name="firstName">
</label>
3. ARIA Labels
If a visual label breaks the design (e.g. a magnifying glass icon for a search bar), use aria-label to provide a hidden label specifically for screen readers.
Related Guides
Deepen your understanding with our expert articles.