← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 1 of 20

HTML कीबोर्ड शॉर्टकट्स

फ़र्ज़ करें आप बिना mouse के computer इस्तेमाल कर रहे हैं। किसी button पर click करने, कोई menu खोलने, या किसी search box में टाइप करने के लिए, आपको अपने keyboard पर keys को एक specific sequence में दबाना पड़ता है। motor impairments वाले कई लोगों के लिए, वे हर दिन web को इसी तरह navigate करते हैं। HTML keyboard shortcuts वही navigation routes हैं। accessibility features को natively code करके, आप users को सिर्फ keyboard से अपना page navigate करने, fields के बीच jump करने, और tools activate करने देते हैं। इससे आपकी website सभी के लिए accessible बनी रहती है, और advanced users custom hotkey shortcuts इस्तेमाल करके tools कहीं तेज़ी से चला पाते हैं।

In this page:

  1. स्टैंडर्ड Tab Key नेविगेशन
  2. accesskey से Custom Hotkeys
  3. tabindex से Focus Management
  4. JavaScript में Custom Event Hotkeys
  5. स्पष्ट Focus Indicators डिज़ाइन करना

स्टैंडर्ड Tab Key नेविगेशन

Webpages को Tab key से क्रम में navigate किया जा सकता है। आधुनिक browsers interactive elements (जैसे buttons, links, और inputs) को अपने आप tab sequence में natively शामिल कर लेते हैं।

Note: built-in keyboard focus support अपने आप inherit करने के लिए button और anchor links जैसे native interactive tags का इस्तेमाल करें।
Warning: non-clickable tags को buttons जैसा दिखने के लिए style करने से वे keyboard-only users के लिए पूरी तरह unreachable हो जाते हैं।

उदाहरण: Standard Tab Key Navigation

markup 
<a href="/home">Home</a>
<button>Click me</button>
<input type="text">

accesskey से Custom Hotkeys

global accesskey attribute आपको specific elements के लिए custom keyboard shortcuts define करने देता है, जिससे users simple key combinations से actions trigger कर सकते हैं या input fields में focus रख सकते हैं।

Note:
  • अपने primary navigation links के लिए आसान, याद रखने लायक letters को accesskey shortcuts के तौर पर असाइन करें।
  • Accepted values:
  • accesskey — one character or space-separated list of characters
  • Activated with browser-specific modifier keys (e.g. Alt+key)
Warning: Accesskey shortcuts इस्तेमाल किए जा रहे browser और operating system के हिसाब से अलग-अलग modifier keys मांगते हैं।

उदाहरण: Custom Hotkeys with accesskey

markup 
<a href="/home" accesskey="h">Home</a>

tabindex से Focus Management

global tabindex attribute आपको chronological keyboard tab sequence को मैन्युअल तरीके से control करने देता है। custom elements को sequence में शामिल करने के लिए tabindex="0" सेट करें, या उन्हें हटाने के लिए tabindex="-1"।

Note:
  • सिर्फ tabindex="0" या tabindex="-1" इस्तेमाल करें; positive numbers इस्तेमाल करने से बचें क्योंकि ये logical tab navigation flow को बिगाड़ सकते हैं।
  • Accepted values:
  • 0 — focusable in DOM order
  • 1 — focusable by script only, skipped by Tab
  • positive integer — explicit tab order (avoid)
Warning: CSS (outline: none) से focus outlines को बिना custom styles से replace किए छिपाने से keyboard navigation असंभव हो जाता है।

उदाहरण: Focus Management with tabindex

markup 
<div tabindex="0">Focusable custom element</div>
<div tabindex="-1">Not in tab order</div>

JavaScript में Custom Event Hotkeys

आप keypress events (जैसे Keydown या Keyup) सुनने और अपने page पर specific actions trigger करने के लिए custom JavaScript scripts लिख सकते हैं, जिससे आप rich, application-specific hotkey shortcuts बना सकते हैं।

Note: users को Enter key दबाकर जल्दी calculations submit करने देने के लिए keyboard events का इस्तेमाल करें।
Warning: पक्का करें कि आपके custom shortcuts standard browser या screen-reader navigation shortcuts से conflict न करें।

उदाहरण: Custom Event Hotkeys in JavaScript

markup 
<input type="text" onkeydown="if (event.key === 'Enter') console.log('submitted')">

स्पष्ट Focus Indicators डिज़ाइन करना

keyboard users को यह देखने के लिए एक visible focus indicator चाहिए होता है कि navigate करते समय कौन-सा element currently selected है। आप इस indicator की style को customize करने और उसे साफ दिखाने के लिए CSS pseudo-classes इस्तेमाल कर सकते हैं।

Note: अपने focus indicators को आसानी से दिखने लायक बनाने के लिए एक high-contrast outline color इस्तेमाल करें।
Warning: custom focus styles से replace किए बिना browser focus outlines छिपाने के लिए CSS outline: none कभी इस्तेमाल न करें।

उदाहरण: Designing Clear Focus Indicators

markup 
<style>
  a:focus {
    outline: 2px solid orange;
  }
</style>
<a href="/home">Home</a>
Live Example
Related Topics

HTML ब्राउज़र सपोर्ट · HTML कैरेक्टर सेट्स · HTML डॉकटाइप्स · HTML ऑडियो/वीडियो रेफरेंस

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Deprecated Tags Next Lesson → HTML Browser Support

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.