Provide accessible names for select elements
SkillMediaselect-name is an agent skill for accessibility review of select elements. When an agent is checking rendered HTML, interactive components, or design-system patterns, it uses this skill to verify that dropdown menus have accessible names and behave correctly. It checks native semantics first, then keyboard behavior, focus flow, and screen-reader output.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills and access the HTML, components, or design-system files to review.
Then ask your AI: use the Provide accessible names for select elements skill
What your AI can do with it
- Review rendered HTML and interactive components for select element accessibility
- Check design-system patterns related to accessible names for select elements
- Inspect native semantics of select elements before other checks
- Evaluate keyboard behavior and focus flow on dropdown menus
- Verify accessible names on select elements
- Check screen-reader output where relevant
Getting started
- Have an agent that can load skills and access the HTML, components, or design-system files to review.
- Add the select-name skill to the agent's available skills.
- Ask the agent to review a page or component that contains select elements.
- The agent applies the skill, checking native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/select-name/SKILL.md and read by ahel’s review.
Without an accessible name, screen reader users will not know what information the dropdown is asking for, making forms impossible to complete.
Quick Reference
- Use the
<label>element with a matchingforattribute for every<select> - Alternatively, use
aria-labeloraria-labelledbyif a visible label is not possible - Avoid using the first option as a replacement for a proper label
Check
Check that every <select> element in your forms has a valid accessible name or linked label.
Fix
Add a <label> element with a for attribute that matches the id of the <select> tag.
Explain
Explain how accessible names for select elements provide the necessary context for users of assistive technologies.
Code Review
Review the rendered markup and interactive states that affect Provide accessible names for select elements. 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/select-name
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should the agent use this skill?
- When reviewing rendered HTML, interactive components, or design-system patterns related to providing accessible names for select elements.
- What does the skill check first?
- Native semantics are checked first, before keyboard behavior, focus flow, accessible names, and screen-reader output.
- Does it test screen readers directly?
- It inspects screen-reader output where relevant, as part of the review.
Advanced
- Item type
- skill
- Key
select-name- Source
- github.com/thedaviddias/front-end-checklist