Align visible labels with accessible names
SkillMediaThis is a skill for reviewing rendered HTML, interactive components, and design-system patterns where visible labels need to align with accessible names. It guides a check of native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output. It helps ensure visible button and link text matches what assistive technologies announce.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the rendered HTML, interactive component, or design-system pattern ready for review.
Then ask your AI: use the Align visible labels with accessible names skill
What your AI can do with it
- Review rendered HTML for mismatches between visible labels and accessible names
- Check native semantics before deeper inspection
- Inspect keyboard behavior and focus flow on interactive components
- Evaluate accessible names on buttons and links
- Assess screen-reader output where relevant
- Review design-system patterns for label and accessible-name alignment
Getting started
- Have the rendered HTML, interactive component, or design-system pattern ready for review.
- Invoke the skill when the review concerns aligning visible labels with accessible names.
- Start with native semantics, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/label-content-name-mismatch/SKILL.md and read by ahel’s review.
When the visible label doesn't match the accessible name, voice control users may find it impossible to interact with the element by speaking its name.
Quick Reference
- Visible text should be part of the accessible name (ARIA label)
- Ensure speech-to-text users can trigger controls by their visible name
- Maintain consistency between what is seen and what is read by tech
Check
Compare the visible text of buttons and links with their 'aria-label' or 'aria-labelledby' attributes to ensure the visible text is included in the accessible name.
Fix
Update the ARIA attribute to include the exact string of the visible label text at the beginning of the accessible name.
Explain
Explain how a mismatch between visible labels and accessible names breaks the experience for users of voice recognition software.
Code Review
Review the rendered markup and interactive states that affect Align visible labels with accessible names. 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/label-content-name-mismatch
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 aligning visible labels with accessible names.
- What does it check first?
- It checks native semantics first, then moves on to keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Does it work on design-system patterns?
- Yes, design-system patterns related to visible labels and accessible names are within its scope.
Advanced
- Item type
- skill
- Key
label-content-name-mismatch- Source
- github.com/thedaviddias/front-end-checklist