कीबोर्ड नेविगेशन

कीबोर्ड क्यों महत्वपूर्ण है

मोटर विकलांगता, वॉयस कंट्रोल, स्विच डिवाइस—उपयोगकर्ता अक्सर माउस का उपयोग नहीं कर सकते। साथ ही, शक्तिशाली उपयोगकर्ता कीबोर्ड गति पसंद करते हैं। परीक्षण: अपने ट्रैकपैड को बंद करें और केवल Tab, Enter, Arrow keys, Escape के साथ अपनी साइट का उपयोग करें।

कीबोर्ड-एक्सेसिबल पैटर्न

native <button>, <a>, <input> का उपयोग करें। कस्टम कंट्रोल को tabindex="0" से focusable बनाएँ। key events को संभालें।

// Handle Tab to focus next control (native)
<button onclick="doThing()">Click me</button>

// Custom control: handle Enter/Space to activate
<div role="button" tabindex="0" @keydown="onKeyDown">
  Activate me
</div>

const onKeyDown = (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    activate();
  }
};

कीबोर्ड परीक्षण

DevTools में माउस को disable करके Tab order test करें। Check करें कि फोकस हमेशा दिखाई दे। Ensure करें कि Escape modals को बंद करता है। Menus में arrow keys test करें।

Focus order महत्वपूर्ण है

Tab order डिफ़ॉल्ट रूप से HTML source order का अनुसरण करता है। tabindex सावधानी से उपयोग करें: natural order के लिए 0, positive values से बचें। tabindex="-1" वाले elements script से focus हो सकते हैं लेकिन Tab से skip होते हैं।

Menu navigation

Arrow keys menus को navigate करते हैं। Enter/Space activate करते हैं। Escape बंद करते हैं।