Use a single label for each form field
SkillMediaform-field-multiple-labels is a skill for reviewing rendered HTML so that each form field has a single label. When an input is tied to more than one label element, screen readers can announce redundant or wrong information. The skill checks native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output, and suggests consolidating labels or using aria-labelledby.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the rendered HTML, interactive component, or design-system pattern to be reviewed available.
Then ask your AI: use the Use a single label for each form field skill
What your AI can do with it
- Detects form fields tied to more than one label element in rendered HTML
- Checks native semantics before other checks
- Inspects keyboard behavior and focus flow
- Reviews accessible names on form fields
- Evaluates screen-reader output where relevant
- Suggests consolidating labels or using aria-labelledby
Getting started
- Have the rendered HTML, interactive component, or design-system pattern to be reviewed available.
- Load the skill so the agent knows to apply it when reviewing form fields.
- Ask the agent to check each form field for multiple labels, starting with native semantics.
- Review the findings and apply the suggested fixes, such as consolidating labels or using aria-labelledby.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/form-field-multiple-labels/SKILL.md and read by ahel’s review.
Multiple labels for a single field can cause screen readers to announce redundant information or fail to correctly associate the input with its purpose.
Quick Reference
- Associate each form input with exactly one element
- Use aria-labelledby if multiple pieces of text must label a single field
- Avoid duplicate labels that can confuse screen readers and voice control
Check
Search for form inputs that are associated with more than one element.
Fix
Consolidate multiple labels into a single or use aria-labelledby to reference multiple sources of text.
Explain
Explain how a 1:1 relationship between labels and inputs ensures clarity for assistive technology users.
Code Review
Review the rendered markup and interactive states that affect Use a single label for each form field. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/form-field-multiple-labels
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing rendered HTML, interactive components, or design-system patterns related to using a single label for each form field.
- What does it check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Why does having multiple labels on a form field matter?
- A form field tied to more than one label element can make screen readers announce redundant or wrong information.
- What fixes does it suggest?
- It suggests consolidating labels or using aria-labelledby.
Advanced
- Item type
- skill
- Key
form-field-multiple-labels- Source
- github.com/thedaviddias/front-end-checklist