विजेट में घूमते हुए tabindex का प्रबंधन
तीर कुंजियों से संयुक्त नियंत्रण के भीतर जाने दें।
विजेट में घूमते हुए tabindex का प्रबंधन, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
पूरे विजेट के लिए एक पड़ाव
टूलबार या रेडियो समूह में Tab को हर आइटम तक नहीं, बल्कि विजेट तक केवल एक बार पहुँचना चाहिए। Roving tabindex यही संभव बनाने वाला तरीका है।
मुख्य विचार
एक समय में ठीक एक आइटम में tabindex="0" होता है। बाकी सभी आइटम को tabindex="-1" मिलता है, इसलिए Tab एक ही बिंदु से समूह में प्रवेश करता है।
प्रारंभिक व्यवस्था
लोड होने पर पहले या चुने गए आइटम को tabindex="0" दें और बाकी को tabindex="-1" पर सेट करें। यही समूह की प्रारंभिक स्थिति है।
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>तीर कुंजियाँ अंदर ले जाती हैं
एक बार focus अंदर आ जाने पर उपयोगकर्ता आइटमों के बीच तीर कुंजियों से जाता है, Tab से नहीं। Tab अब भी पूरे विजेट से बाहर निकलता है।
Roving चरण
तीर कुंजी दबाने पर दो काम करें: पुराने आइटम को -1 और नए आइटम को 0 पर सेट करें, फिर नए आइटम पर focus() कॉल करें। 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();केवल एक शून्य क्यों
एक ही tabindex="0" रखने से Tab हमेशा उस आइटम पर पहुँचता है जिसे उपयोगकर्ता ने पिछली बार इस्तेमाल किया था, इसलिए विजेट पर लौटना स्वाभाविक लगता है।
APG तरीके का पालन करें
ARIA Authoring Practices Guide प्रत्येक विजेट के लिए सटीक कुंजियाँ बताता है। अपना तरीका बनाने के बजाय उसके कीबोर्ड मानचित्र का पालन करें।
वैकल्पिक चक्रीय क्रम
कई विजेट तीर कुंजियों की गति को चक्राकार बनाते हैं: अंतिम आइटम पर दायाँ तीर दबाने पर पहला आइटम सक्रिय हो जाता है। यह जानने के लिए APG देखें कि आपके पैटर्न में चक्राकार गति होनी चाहिए या नहीं।
Home और End भी
संयुक्त विजेट अक्सर पहले और अंतिम आइटम पर जाने के लिए Home और End कुंजियाँ भी जोड़ते हैं। यह छोटा-सा बदलाव नेविगेशन को तेज़ बना देता है।
Roving बनाम aria-activedescendant
Roving tabindex वास्तविक DOM फ़ोकस को स्थानांतरित करता है। इसका विकल्प, aria-activedescendant, फ़ोकस को एक कंटेनर पर बनाए रखता है और एक आभासी सक्रिय आइटम की ओर संकेत करता है।
पूरे चक्र का परीक्षण करें
Tab दबाकर अंदर जाएँ, तीर कुंजियों से हर आइटम पर जाएँ, फिर Tab दबाकर बाहर आएँ। इसके बाद फिर Tab दबाकर अंदर जाएँ और सुनिश्चित करें कि फ़ोकस अंतिम बार उपयोग किए गए आइटम पर लौटता है।
त्वरित जाँच
Roving tabindex वाले टूलबार में किसी भी क्षण कितने आइटमों का tabindex="0" होता है?
पुनरावलोकन
आपने roving tabindex में दक्षता हासिल कर ली है: एक आइटम का मान 0 होता है, बाकी का -1; तीर कुंजियाँ 0 को एक आइटम से दूसरे पर ले जाती हैं और Tab पूरे विजेट को पार कर जाता है। 🚀
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “विजेट में घूमते हुए tabindex का प्रबंधन” पाठ निःशुल्क है?
हाँ—“विजेट में घूमते हुए tabindex का प्रबंधन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“विजेट में घूमते हुए tabindex का प्रबंधन” में मैं क्या सीखूँगा?
तीर कुंजियों से संयुक्त नियंत्रण के भीतर जाने दें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“विजेट में घूमते हुए tabindex का प्रबंधन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- tabindex 0, -1 और कभी भी धनात्मक नहीं
- किसी क्रिया के बाद फ़ोकस ले जाना
- लेयर बंद होने पर फ़ोकस वापस लाना
- विजेट में घूमते हुए tabindex का प्रबंधन