Frontend Academy · पाठ

Keyboard Navigation और Focus Management

सुनिश्चित करें कि सभी interactive elements Tab से पहुँच योग्य हों, dialogs और routing में focus को programmatically manage करें और visible focus indicators बनाएँ।

पाठ 4, कुल 4 में से14 चरण

Keyboard Navigation और Focus Management, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कीबोर्ड नेविगेशन क्यों महत्वपूर्ण है

कई उपयोगकर्ता माउस का उपयोग नहीं कर सकते: मोटर संबंधी दिव्यांगता वाले लोग, स्क्रीन रीडर उपयोगकर्ता और कीबोर्ड पसंद करने वाले दक्ष उपयोगकर्ता। यदि आपका ऐप कीबोर्ड से नेविगेट नहीं किया जा सकता, तो वह उनके लिए काम नहीं करता।

Tab और Shift+Tab

Tab फ़ोकस को अगले इंटरैक्टिव तत्व पर ले जाता है। Shift+Tab पिछले तत्व पर ले जाता है। डिफ़ॉल्ट रूप से क्रम DOM के क्रम का अनुसरण करता है—इससे अलग क्रम बनाने का प्रयास न करें; DOM को अपना टैब क्रम बनने दें।

डिफ़ॉल्ट रूप से किन तत्वों पर फ़ोकस किया जा सकता है

मूल इंटरैक्टिव तत्वों पर फ़ोकस किया जा सकता है: a[href], button, input, select, textarea, summary। कस्टम तत्वों के लिए tabindex आवश्यक है।

tabindex के मान

tabindex="0": DOM स्थिति के अनुसार टैब क्रम में शामिल होता है। tabindex="-1": केवल JS के माध्यम से फ़ोकस किया जा सकता है (स्क्रिप्ट फ़ोकस, Tab नहीं)। tabindex=">0": गलत तरीका है—यह भ्रमित करने वाला फ़ोकस क्रम बनाता है, इसलिए इसका उपयोग कभी न करें।

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

दृश्यमान फ़ोकस संकेतक

फ़ोकस की रूपरेखा कभी न हटाएँ, जब तक उसका विकल्प न दे दें। WCAG के अनुसार हर ऐसे तत्व पर दृश्यमान संकेतक होना आवश्यक है जिस पर फ़ोकस किया जा सकता है।

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

:focus-visible छद्म-वर्ग केवल तब सक्रिय होता है जब फ़ोकस कीबोर्ड से आया हो, माउस क्लिक से नहीं। इससे कीबोर्ड फ़ोकस दिखाते हुए माउस की साफ़-सुथरी शैलियाँ बनाए रखी जा सकती हैं।

सामग्री पर सीधे जाने वाला लिंक

पहला ऐसा तत्व जिस पर फ़ोकस किया जा सकता है, वह स्किप लिंक होना चाहिए, ताकि कीबोर्ड उपयोगकर्ता हेडर नेविगेशन को छोड़कर सीधे मुख्य सामग्री पर जा सकें।

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

मॉडल में फ़ोकस ट्रैप

जब कोई मॉडल खुलता है, तो फ़ोकस उसके भीतर सीमित होना चाहिए—अंतिम तत्व से Tab दबाने पर फ़ोकस पहले तत्व पर और पहले तत्व से Shift+Tab दबाने पर अंतिम तत्व पर पहुँचता है। Escape दबाने पर मॉडल बंद हो जाता है।

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

dialog तत्व का उपयोग कीजिए

HTML का मूल <dialog> फ़ोकस ट्रैप, Escape से बंद होना और मॉडल का पर्दा अपने-आप संभालता है।

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

रूट बदलने के बाद फ़ोकस प्रबंधन

SPA पृष्ठ को दोबारा लोड नहीं करते, इसलिए स्क्रीन रीडर उपयोगकर्ताओं को नेविगेशन होने का कोई संकेत नहीं मिलता। रूट बदलने पर फ़ोकस नए पृष्ठ के h1 या main पर ले जाइए।

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

फ़ोकस क्रम दृश्य क्रम से मेल खाना चाहिए

सुनिश्चित कीजिए कि DOM क्रम दृश्य प्रवाह से मेल खाता हो। यदि CSS तत्वों का क्रम बदलता है (flex order, grid placement, position absolute), तो टैब क्रम मेल नहीं खाएगा—यह सभी के लिए भ्रमित करने वाला होता है।

माउस हटाकर परीक्षण कीजिए

सबसे उपयोगी सुगम्यता परीक्षण यह है: अपना माउस अलग कर दीजिए और पूरे ऐप को Tab, Shift+Tab, Enter, Space और तीर कुंजियों से चलाने का प्रयास कीजिए। यदि आप अटक जाते हैं, तो आपके उपयोगकर्ता भी अटक जाएँगे।

त्वरित जाँच

कौन-सा CSS छद्म-वर्ग फ़ोकस की रूपरेखा को केवल तब शैलीबद्ध करने देता है जब फ़ोकस माउस क्लिक के बजाय कीबोर्ड से आया हो?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: कीबोर्ड नेविगेशन

मूल इंटरैक्टिव तत्वों पर डिफ़ॉल्ट रूप से फ़ोकस किया जा सकता है। कस्टम विजेट पर ही tabindex=0 का उपयोग कीजिए; tabindex>0 का कभी उपयोग न करें। फ़ोकस हमेशा दिखाइए—:focus-visible का उपयोग कीजिए। सामग्री पर सीधे जाने वाला स्किप लिंक जोड़िए। मॉडल में फ़ोकस सीमित कीजिए और बंद होने पर उसे वापस लौटाइए। संभव हो तो मूल <dialog> का उपयोग कीजिए। रूट बदलने पर फ़ोकस h1/main पर ले जाइए। माउस हटाकर परीक्षण कीजिए।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Keyboard Navigation और Focus Management” पाठ निःशुल्क है?

हाँ—“Keyboard Navigation और Focus Management” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Keyboard Navigation और Focus Management” में मैं क्या सीखूँगा?

सुनिश्चित करें कि सभी interactive elements Tab से पहुँच योग्य हों, dialogs और routing में focus को programmatically manage करें और visible focus indicators बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Keyboard Navigation और Focus Management” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Frontend Academy पर वापस जाएँ