बूटस्ट्रैप में टैबइंडेक्स = "- 1" क्या है


100

tabindexबूटस्ट्रैप 3 में क्या विशेषता है?

इसका दस्तावेज़ीकरण उनके बारे में कुछ नहीं कहता है, हालांकि वे उन्हें सभी तौर-तरीकों में व्यावहारिक रूप से उपयोग करते हैं।

मैंने केवल इसके उपयोग के संबंध में यह पाया है, जो वास्तव में बहुत कुछ नहीं कहता है

कीबोर्ड और सहायक प्रौद्योगिकी उपयोगकर्ताओं के लिए सुलभ टूलटिप्स

कीबोर्ड के साथ नेविगेट करने वाले उपयोगकर्ताओं के लिए, और विशेष रूप से सहायक प्रौद्योगिकियों के उपयोगकर्ताओं के लिए, आपको केवल कीबोर्ड-फ़ोकस करने योग्य तत्वों जैसे लिंक, फ़ॉर्म नियंत्रण, या किसी भी मनमाने तत्व के साथ टैबइंडेक्स = "0" विशेषता के साथ टूलटिप्स जोड़ना चाहिए।

और मुझे पता चला कि यदि विशेषता नहीं है तो मैं escएक मोडल छिपाने के लिए प्रेस नहीं कर tabindexसकता-1

जवाबों:


159

tabindexविशेषता स्पष्ट रूप से फ़ोकस करने योग्य तत्व (आमतौर पर लिंक और प्रपत्र नियंत्रण) एक पृष्ठ के भीतर के लिए नेविगेशन क्रम को परिभाषित करता है। इसका उपयोग यह परिभाषित करने के लिए भी किया जा सकता है कि तत्वों को ध्यान देने योग्य होना चाहिए या नहीं।

[दोनों] tabindex="0"और tabindex="-1"विशेष अर्थ है और HTML में अलग कार्यक्षमता प्रदान करते हैं। एक मान 0इंगित करता है कि तत्व को डिफ़ॉल्ट नेविगेशन क्रम में रखा जाना चाहिए। यह तत्व है कि मूल रूप से फ़ोकस करने योग्य नहीं कर रहे हैं (जैसे की अनुमति देता है <div>, <span>और <p>) कीबोर्ड के प्राप्त करने के लिए। बेशक एक को आम तौर पर सभी इंटरैक्टिव तत्वों के लिए लिंक और फॉर्म नियंत्रण का उपयोग करना चाहिए, लेकिन यह अन्य तत्वों को ध्यान केंद्रित करने और बातचीत को ट्रिगर करने की अनुमति देता है।

एक tabindex="-1"मान डिफ़ॉल्ट नेविगेशन प्रवाह (यानी, उपयोगकर्ता को टैब नहीं कर सकता) से तत्व को निकालता है , लेकिन यह इसे प्रोग्रामेटिक फ़ोकस प्राप्त करने की अनुमति देता है , जिसका अर्थ है कि इसे लिंक से या स्क्रिप्टिंग के साथ सेट किया जा सकता है। ** यह बहुत हो सकता है। उन तत्वों के लिए उपयोगी जिन्हें टैब नहीं किया जाना चाहिए, लेकिन इसके लिए उन पर ध्यान केंद्रित करने की आवश्यकता हो सकती है

एक अच्छा उदाहरण एक मोडल डायलॉग विंडो है - जब खोला जाता है, तो डायलॉग पर फ़ोकस सेट किया जाना चाहिए ताकि स्क्रीन रीडर पढ़ना शुरू हो जाए और कीबोर्ड डायलॉग के भीतर नेविगेट करना शुरू कर देगा । क्योंकि संवाद (शायद सिर्फ एक <div>तत्व) डिफ़ॉल्ट रूप से tabindex="-1"ध्यान देने योग्य नहीं है, इसे असाइन करने से स्क्रिप्ट को प्रस्तुत करने के साथ उस पर ध्यान केंद्रित करने की अनुमति मिलती है।

-1कॉम्प्लेक्स विजेट्स और मेन्यू में एक मान उपयोगी हो सकता है जो तीर कुंजी या अन्य शॉर्टकट कुंजियों का उपयोग करता है ताकि यह सुनिश्चित किया जा सके कि विजेट के भीतर केवल एक तत्व टैब कुंजी के साथ नेविगेट करने योग्य है, लेकिन फिर भी विजेट के भीतर अन्य घटकों पर ध्यान केंद्रित करने की अनुमति देता है।

स्रोत: http://webaim.org/techniques/keyboard/tabindex

यही कारण है कि आपको tabindex="-1"मोडल की आवश्यकता है <div>, इसलिए उपयोगकर्ता सामान्य माउस और कीबोर्ड शॉर्टकट तक पहुंच सकते हैं। उम्मीद है की वो मदद करदे।


1
विशेषता HTML का हिस्सा है, इसका बूटस्ट्रैप से कोई लेना-देना नहीं है।
लूत्ज प्रीचेल

8
हाँ, ठीक यही बात यहाँ कही जा रही है, कि यह "HTML में विशिष्ट कार्यक्षमता" है और बूटस्ट्रैप के साथ कुछ करने के लिए नहीं।
काइल एंडरसन

1
जावास्क्रिप्ट के साथ <div> पर ध्यान केंद्रित करने में सक्षम होने के लिए, टैबइंडेक्स विशेषता को इस तत्व पर परिभाषित किया जाना चाहिए (किसी भी मान जैसे कि टैबइंडेक्स = -1)। यदि टैविंडेक्स डिव पर मौजूद नहीं है, तो फोकस करने से काम नहीं चलेगा। यही कारण है कि बीएस मोडल डिवीजन में टैबइंडेक्स = -1 जोड़ता है। Developer.mozilla.org/en-US/docs/Web/Accessibility/… देखें : यदि टैबइंडेक्स मौजूद नहीं है, तो JS के साथ फ़ोकस करने योग्य तत्व के प्लेटफॉर्म कन्वेंशन का पालन करेगा (हाँ फॉर्म नियंत्रण, लिंक, आदि के लिए)। इसका मतलब है कि अगर टैबइंडेक्स मौजूद नहीं है तो <div> फेक नहीं है।
कनाडा वान

टैबइंडेक्स = "- 1" के साथ उन तत्वों को जोड़ने के लायक भी उन पर क्लिक करके ध्यान देने योग्य हैं।
काला मन्त्र

13

Tabindex विशेषता एचटीएमएल साथ जुड़ा हुआ है , यह बूटस्ट्रैप के लिए विशिष्ट नहीं है।

यह गुण यह इंगित करने के लिए जिम्मेदार है कि क्या कोई तत्व कीबोर्ड नेविगेशन द्वारा उपलब्ध है।

आपको तीन अलग-अलग परिदृश्यों को देखने की आवश्यकता है:

  1. tabindex = "0"एक तत्व को जोड़ने पर इसका मतलब है कि यह कीबोर्ड नेविगेशन द्वारा उपलब्ध है, लेकिन आदेश को दस्तावेज़ स्रोत आदेश द्वारा परिभाषित किया गया है।

  2. जब एक सकारात्मक मूल्य जोड़ने tabindex विशेषता (उदाहरण के लिए करने के लिए tabindex = "1", tabindex = "2") उन तत्वों कीबोर्ड नेविगेशन द्वारा पहुंचा जा सकता है और आदेश विशेषता के मान से परिभाषित किया गया है।

  3. जब एक नकारात्मक मूल्य जोड़ने tabindex (आमतौर पर tabindex="-1") तो इसका मतलब है तत्व है कीबोर्ड नेविगेशन तक पहुंचा जा सकता है, लेकिन जे एस में फोकस समारोह का उपयोग कर ध्यान केंद्रित किया जा सकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.