keyboard-navigation

Installation
SKILL.md

Enable keyboard navigation for all elements

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.

Installs
1
GitHub Stars
73.0K
First Seen
7 days ago
keyboard-navigation — thedaviddias/front-end-checklist