Use appropriate tabindex values
SkillMediatabindex is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns related to Use appropriate tabindex values. It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant, so tab order works sensibly for keyboard users.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load and use skills.
Then ask your AI: use the Use appropriate tabindex values skill
What your AI can do with it
- Review rendered HTML for appropriate tabindex values
- Check native semantics before custom tab-order attributes
- Inspect keyboard behavior of interactive components
- Trace focus flow across a page or component
- Check accessible names on interactive elements
- Review screen-reader output where relevant
Getting started
- Have an AI agent that can load and use skills.
- Add the tabindex skill to the agent's available skills.
- Give the agent the rendered HTML, component, or design-system pattern to review.
- Ask it to check 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/tabindex/SKILL.md and read by ahel’s review.
Incorrect tabindex values can create a confusing navigation experience, making it difficult for keyboard users to predict where focus will move next.
Quick Reference
- Stick to
tabindex="0"for custom interactive elements - Use
tabindex="-1"for elements that should only be focusable via script - Avoid positive values (1, 2, 3...) which break natural tab order
Check
Check for any positive tabindex values and ensure custom interactive elements are focusable.
Fix
Remove positive tabindex values and use tabindex="0" or -1 appropriately.
Explain
Explain why positive tabindex values are problematic for keyboard navigation and user experience.
Code Review
Review the rendered markup and interactive states that affect Use appropriate tabindex values. 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/tabindex
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 appropriate tabindex values.
- What does it check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Does it change my HTML directly?
- The skill is described as a review aid; it inspects keyboard behavior, focus flow, accessible names, and screen-reader output. Direct editing is not mentioned.
Advanced
- Item type
- skill
- Key
tabindex- Source
- github.com/thedaviddias/front-end-checklist