पता बार

Question

के माध्यम से टैब को चक्र को रोकना मुझे एहसास है कि यह संभवतः एक एक्सेसिबिलिटी समस्या है जिसे अकेले छोड़ दिया जा सकता है, लेकिन मैं यह जानना चाहता हूं कि टैब को टैबबिंग चक्र में पता बार पर जाने से रोकने के लिए संभव है या नहीं।

मेरा आवेदन इनपुट क्षेत्रों के माध्यम से साइकिल का एक और तरीका है, लेकिन कई नए उपयोगकर्ताओं सहज टैब का उपयोग करने का प्रयास करें, और यह अपेक्षा के अनुरूप काम नहीं करता है।

Answer 1

आप वैश्विक tabindex attribute के साथ टैबबिंग ऑर्डर (और कौन से तत्वों को ध्यान केंद्रित करने में सक्षम होना चाहिए) को नियंत्रित कर सकते हैं।

हालांकि, अगर आप इस विशेषता के साथ पेज (जैसे ब्राउज़र की पता पट्टी) के नियंत्रण में नहीं एक और संदर्भ में टैब पर उन नहीं रोका जा सकता। (हालांकि जावास्क्रिप्ट के साथ संयोजन में यह संभव हो सकता है।)

ऐसे (बुराई!) मामले के लिए, आपको कीबोर्ड जाल पर देखना होगा।

डब्लुसीएजी 2.0 दिशानिर्देश हैं: 2.1.2 No Keyboard Trap। Understanding SC 2.1.2 में आप इस निर्देश के लिए "तकनीक और विफलताओं" पा सकते हैं:

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

तो हो सकता है आप उस से कुछ उपाय प्राप्त कैसे इस तरह के एक जाल संभव होगा ।

Answer 2

आपको Javascript का उपयोग करें और उच्चतम "tabindex" के साथ तत्व पर "keydown" घटना ले सकता है। यदि उपयोगकर्ता "शिफ्ट" कुंजी (event.shiftKey == झूठी) के बिना "टैब" कुंजी (event.keyCode == 9) दबाता है तो बस सबसे कम tabindex के साथ तत्व पर फ़ोकस सेट करें।

फिर आप भी सबसे कम tabindex साथ तत्व के लिए रिवर्स में एक ही बात करने की ज़रूरत होगी। इस तत्व के लिए "कीडाउन" घटना कैप्चर करें। यदि उपयोगकर्ता "टैब" कुंजी (event.keyCode == 9) को "Shift" कुंजी (event.shiftKey == true) के साथ दबाता है तो उच्चतम tabindex के साथ तत्व पर फ़ोकस सेट करें।

यह प्रभावी ढंग से पता बार को टैब कुंजी का उपयोग करके ध्यान केंद्रित करने से रोक देगा। मैं अपने वर्तमान प्रोजेक्ट में इस तकनीक का उपयोग कर रहा हूं।

उचित कुंजी संयोजन दबाए जाने पर कीडाउन ईवेंट को रद्द करना न भूलें! JQuery के साथ यह "event.preventDefault()" है। मानक जावास्क्रिप्ट में, मेरा मानना ​​है कि आप बस "झूठी वापसी" करते हैं।

यहाँ एक JQuery से लदी टुकड़ा मैं उपयोग कर रहा हूँ है ...

$('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == false) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=1]').focus(); 
     } 
    }); 
    $('#dos-area [tabindex=1]').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == true) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=' + maxTabIndex + ']').focus(); 
     } 
    }); 

यह भी ध्यान रखें कि tabindex की स्थापना = 0 जिस क्रम में बातें ध्यान केंद्रित कर रहे पर अवांछनीय परिणाम है। मुझे हमेशा याद है (मेरे उद्देश्यों के लिए) कि tabindex एक 1-आधारित सूचकांक है।

Answer 3

मैं टैबिंडेक्स 1 और अंतिम टैबिंडेक्स पर दो छोटे, अदृश्य तत्व जोड़ता था। इन दोनों के लिए एक ऑनफोकस जोड़ें: टैबिंडेक्स 1 वाले तत्व को अंतिम वास्तविक तत्व पर ध्यान देना चाहिए, अधिकतम टैबिंडेक्स वाला पहला व्यक्ति वास्तविक वास्तविक तत्व पर ध्यान केंद्रित करना चाहिए। सुनिश्चित करें कि आप डोम पर पहला वास्तविक तत्व केंद्रित करते हैं: लोड किया गया।

Answer 4

मैंने m-albert समाधान का उपयोग किया और यह काम करता है।लेकिन मेरे मामले में मैं tabindex गुण नियंत्रण नहीं करते। मेरा इरादा पेज (पहले नियंत्रण) के शीर्ष पर एक उपकरण पट्टी पर फ़ोकस सेट जब उपयोगकर्ता पृष्ठ पर अंतिम नियंत्रण छोड़ देता है।

$(':input:visible').last().on('keydown', function (e) { 
    if (e.keyCode == 9 && e.shiftKey == false) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     $(':input:visible', context).first().focus(); 
    } 
}); 

कहाँ संदर्भ किसी भी jQuery वस्तु, चयनकर्ता, या यहाँ तक कि दस्तावेज़ हो सकता है, या आप इसे छोड़ सकते हैं।

स्क्रॉल एनीमेशन, ज़ाहिर है, वैकल्पिक है।

Answer 5

यहाँ आप अधिकतम टैब सूचकांक को खोजने के लिए की जरूरत नहीं है, जहां एक सामान्य jQuery कार्यान्वयन है। ध्यान दें कि यदि आप अपने डोम में तत्व जोड़ते हैं या हटाते हैं तो यह कोड भी काम करेगा।

$('body').on('keydown', function (e) { 
    var jqTarget = $(e.target); 
    if (e.keyCode == 9) { 

     var jqVisibleInputs = $(':input:visible'); 
     var jqFirst = jqVisibleInputs.first(); 
     var jqLast = jqVisibleInputs.last(); 

     if (!e.shiftKey && jqTarget.is(jqLast)) { 
      e.preventDefault(); 
      jqFirst.focus(); 
     } else if (e.shiftKey && jqTarget.is(jqFirst)) { 
      e.preventDefault(); 
      jqLast.focus(); 
     } 
    } 
}); 

हालांकि, आपको ध्यान रखना चाहिए कि उपरोक्त कोड केवल दृश्य इनपुट के साथ काम करेगा। कुछ तत्व दस्तावेज़ के activeElement बन सकते हैं, भले ही वे इनपुट नहीं कर रहे हैं, इसलिए यदि यह आपके मामला है, तो आप उन्हें $(':input:visible') चयनकर्ता को जोड़ने पर विचार करना चाहिए।

मैं ध्यान केंद्रित तत्व करने के लिए स्क्रॉल करने के लिए कोड में नहीं जोड़ा था के रूप में इस सब के लिए वांछित व्यवहार नहीं हो सकता है ... यदि आप इसे की जरूरत है, सिर्फ focus()