tabindex 0, -1 और कभी भी धनात्मक नहीं
तय करें कि किस पर फ़ोकस किया जा सकता है और किसे केवल स्क्रिप्ट से चलाया जा सकता है।
tabindex 0, -1 और कभी भी धनात्मक नहीं, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
tabindex क्या नियंत्रित करता है
tabindex विशेषता तय करती है कि कोई तत्व कीबोर्ड focus प्राप्त कर सकता है या नहीं और Tab क्रम में उसका स्थान क्या होगा। यह focus-योग्यता का आपका नियंत्रण है।
अधिकांश चीज़ें पहले से focus-योग्य होती हैं
लिंक, बटन और इनपुट डिफ़ॉल्ट रूप से focus-योग्य होते हैं, इसलिए इन पर tabindex बदलने की शायद ही आवश्यकता पड़ती है। इसका उपयोग तभी करें जब मूल तत्व काम पूरा न कर सके।
tabindex 0 क्रम में शामिल होता है
tabindex="0" सेट करने से सामान्यतः focus न पाने वाला तत्व स्वाभाविक Tab क्रम में शामिल हो जाता है, ठीक DOM में अपने स्थान पर।
<div role="button" tabindex="0">Custom action</div>0 का उपयोग कब करें
किसी div या span से बनाए गए ऐसे कस्टम विजेट पर tabindex="0" लगाएँ, जिस तक कीबोर्ड से पहुँचना आवश्यक हो, जैसे स्क्रिप्ट से बनाया गया टॉगल।
tabindex -1 का अर्थ है केवल स्क्रिप्ट से
tabindex="-1" के साथ कोई तत्व Tab कुंजी से छोड़ दिया जाता है, लेकिन JavaScript से element.focus() का उपयोग करके उस पर focus लाया जा सकता है।
<div id="panel" tabindex="-1">Result area</div>-1 इतना उपयोगी क्यों है
किसी क्रिया के बाद focus को परिणाम पैनल जैसे क्षेत्र में ले जाने के लिए tabindex="-1" का उपयोग करें, ताकि हर Tab दबाने पर वहाँ रुकना न पड़े। 🎯
धनात्मक मानों का कभी उपयोग न करें
3 जैसा धनात्मक tabindex उस तत्व को बाकी सभी से पहले ले आता है, क्रम को अस्त-व्यस्त करता है और आपको एक भूलभुलैया में फँसा देता है। इससे बचें।
<input tabindex="3">धनात्मक मान प्रवाह बिगाड़ देते हैं
धनात्मक मान वाला कोई भी तत्व सभी tabindex="0" और डिफ़ॉल्ट तत्वों से पहले आता है, इसलिए focus क्रम दृश्य क्रम से मेल नहीं खाता।
क्रम DOM को तय करने दें
सबसे साफ़ Tab क्रम स्वयं DOM क्रम से मिलता है। अपना मार्कअप तार्किक ढंग से व्यवस्थित करें और focus से जुड़ी अधिकांश समस्याएँ अपने-आप दूर हो जाएँगी।
हर चीज़ को focus-योग्य न बनाएँ
साधारण पाठ या पूरे कंटेनर में tabindex="0" जोड़ने से अनावश्यक शोर पैदा होता है और कीबोर्ड उपयोगकर्ताओं को ऐसे पड़ावों से होकर Tab करना पड़ता है जो कुछ नहीं करते।
एक सरल सामान्य नियम
कस्टम नियंत्रण को क्रम में जोड़ने के लिए 0, केवल स्क्रिप्ट से focus करने के लिए -1 का उपयोग करें और धनात्मक संख्या कभी न दें। लगभग हर स्थिति में इतना पर्याप्त है।
त्वरित जाँच
कौन-सा tabindex मान किसी तत्व को स्क्रिप्ट से focus-योग्य बनाता है, लेकिन Tab क्रम में उसे छोड़ देता है?
पुनरावलोकन
अब tabindex का नियंत्रण आपके हाथ में है: 0 कस्टम नियंत्रणों को क्रम में जोड़ता है, -1 स्क्रिप्ट से focus सक्षम करता है और धनात्मक मान वर्जित हैं। 👍
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “tabindex 0, -1 और कभी भी धनात्मक नहीं” पाठ निःशुल्क है?
हाँ—“tabindex 0, -1 और कभी भी धनात्मक नहीं” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“tabindex 0, -1 और कभी भी धनात्मक नहीं” में मैं क्या सीखूँगा?
तय करें कि किस पर फ़ोकस किया जा सकता है और किसे केवल स्क्रिप्ट से चलाया जा सकता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“tabindex 0, -1 और कभी भी धनात्मक नहीं” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- tabindex 0, -1 और कभी भी धनात्मक नहीं
- किसी क्रिया के बाद फ़ोकस ले जाना
- लेयर बंद होने पर फ़ोकस वापस लाना
- विजेट में घूमते हुए tabindex का प्रबंधन