Enable keyboard navigation for all elements
SkillMediakeyboard-navigation is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns for keyboard accessibility. It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant, so pages and UI components work fully with just a keyboard.
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 Enable keyboard navigation for all elements skill
What your AI can do with it
- Review rendered HTML for keyboard accessibility issues
- Check native semantics before deeper inspection
- Inspect keyboard behavior of interactive components
- Trace focus flow across elements
- Verify accessible names on controls
- Check screen-reader output where relevant
Getting started
- Have an AI agent that can load and use skills.
- Add the keyboard-navigation skill to the agent's available skills.
- Ask the agent to review a rendered page, component, or design-system pattern for keyboard navigation.
- Review the agent's findings on semantics, 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/keyboard-navigation/SKILL.md and read by ahel’s review.
15% of users rely on keyboard navigation—broken focus order or keyboard traps make your site completely unusable for them.
Quick Reference
- All interactive elements must be reachable via Tab key
- Focus order should follow visual reading order (left-to-right, top-to-bottom)
- Never use positive tabindex values—they break natural flow
- Hidden content must be removed from tab sequence with tabindex='-1'
- Keyboard traps are only acceptable inside active modals with a working Escape path
Check
Test that all interactive elements are keyboard accessible, focus order matches visual/reading order, hidden content is not focusable, and no keyboard traps exist except in modals with proper escape handling.
Fix
Ensure tab order follows DOM order matching visual layout. Use tabindex='-1' to remove hidden elements from focus. Avoid positive tabindex values. Ensure off-screen or display:none content cannot receive focus.
Explain
Explain how logical focus order helps keyboard users navigate efficiently, why hidden elements must be removed from the tab sequence to avoid confusion, and how focus management affects users of screen readers and switch devices.
Code Review
Review the rendered markup and interactive states that affect Enable keyboard navigation for all 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/keyboard-navigation
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 enabling keyboard navigation for all elements.
- What does the skill check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Does it test with a screen reader?
- It checks screen-reader output where relevant, as part of the review.
Advanced
- Item type
- skill
- Key
keyboard-navigation- Source
- github.com/thedaviddias/front-end-checklist