कई विभिन्न उपयोगकर्ता ऐप्लिकेशन को नेविगेट करने के लिए—कीबोर्ड का उपयोग करते हैं कीबोर्ड का इस्तेमाल करने वाले उपयोगकर्ताओं को अस्थायी और स्थायी रूप से काम करने से जुड़ी नुकसान में शॉर्टकट बनाए जा सकते हैं. अच्छा कीबोर्ड नेविगेशन होना रणनीति बनाने से सभी के लिए बेहतर अनुभव बनता है.
फ़ोकस और टैब का क्रम
किसी दिए गए समय पर, फ़ोकस आपके ऐप्लिकेशन के एलिमेंट पर आधारित होता है (जैसे कि फ़ील्ड, चेकबॉक्स, बटन या लिंक) को फ़िलहाल कीबोर्ड से इनपुट मिलता है. कीबोर्ड इवेंट पाने के अलावा, फ़ोकस किए गए एलिमेंट को कॉन्टेंट भी मिलता है जिसे क्लिपबोर्ड से चिपकाया जाता है.
किसी पेज पर फ़ोकस ले जाने के लिए, TAB का इस्तेमाल करके "आगे" पर जाएं और SHIFT + TAB
"पीछे की ओर" नेविगेट करने के लिए. जिस एलिमेंट पर फ़ोकस किया गया है उसे अक्सर
फ़ोकस रिंग देख सकते हैं और अलग-अलग ब्राउज़र के फ़ोकस रिंग को अलग-अलग स्टाइल में किया जा सकता है. कॉन्टेंट बनाने
इंटरैक्टिव एलिमेंट के ज़रिए फ़ोकस को आगे और पीछे ले जाने का क्रम
को टैब का क्रम कहा जाता है.
टेक्स्ट फ़ील्ड, बटन, और चुनिंदा सूचियों जैसे इंटरैक्टिव एचटीएमएल एलिमेंट सीधे तौर पर फ़ोकस करने लायक: उन्हें टैब में अपने-आप लगा दिया जाता है स्थिति के हिसाब से, DOM. इन इंटरैक्टिव एलिमेंट में, कीबोर्ड इवेंट को मैनेज करने की सुविधा पहले से मौजूद होती है. Elements जैसे कि पैराग्राफ़ और divs स्पष्ट रूप से फ़ोकस करने लायक नहीं होते हैं, क्योंकि उपयोगकर्ता आम तौर पर उन्हें उनसे बातचीत करने की ज़रूरत नहीं है.
लॉजिकल टैब ऑर्डर लागू करना, अपने उपयोगकर्ताओं की जानकारी देने का एक अहम हिस्सा है कीबोर्ड नेविगेशन का शानदार अनुभव पाएं. रखने के लिए दो मुख्य आइडिया हैं टैब के क्रम का आकलन और उसमें बदलाव करते समय इन बातों का ध्यान रखें:
- डीओएम में एलिमेंट को लॉजिकल क्रम में व्यवस्थित करें
- उस ऑफ़स्क्रीन कॉन्टेंट के दिखने की सेटिंग को सही तरीके से सेट करें जिसे नहीं मिलना चाहिए फ़ोकस
डीओएम में एलिमेंट को लॉजिकल क्रम में व्यवस्थित करें
यह जांचने के लिए कि आपके ऐप्लिकेशन का टैब क्रम लॉजिकल है या नहीं, अपने ऐप्लिकेशन के टैब के ज़रिए पेज. आम तौर पर, फ़ोकस को पढ़ने के क्रम के हिसाब से होना चाहिए. साथ ही, स्क्रीन को बाईं से दाईं ओर ले जाना चाहिए. आपके पेज के सबसे निचले हिस्से तक.
अगर फ़ोकस का क्रम गलत लगता है, तो आपको डीओएम में एलिमेंट को फिर से व्यवस्थित करके, टैब का क्रम ज़्यादा स्वाभाविक बनाएं. अगर आपको कोई चीज़ विज़ुअल तौर पर दिखानी है, तो स्क्रीन पर पहले, उसे DOM में पहले ले जाएं.
लॉजिकल टैब का अनुभव करने के लिए, नीचे दिए गए बटन के दो सेट को टैब करके देखें क्रम बनाम अलॉजिकल टैब ऑर्डर:
लॉजिकल टैब ऑर्डर
अलग-अलग विषयों वाले टैब का क्रम
इन दो उदाहरणों के कोड की तुलना नीचे की गई है:
लॉजिकल टैब ऑर्डर
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
अलग-अलग विषयों वाले टैब का क्रम
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
सीएसएस का इस्तेमाल करके, एलिमेंट की विज़ुअल पोज़िशन बदलते समय सावधानी बरतें टैब का क्रम वापस रखना. ऊपर दिए गए अव्यवस्थित टैब के क्रम को ठीक करने के लिए, तैरते हुए "कीवी" बटन पर क्लिक करें, ताकि यह "नारियल" के बाद आए बटन पर क्लिक करें, और इनलाइन स्टाइल हटाएं.
ऑफ़स्क्रीन सामग्री की दृश्यता सही सेट करें
कभी-कभी ऑफ़स्क्रीन इंटरैक्टिव एलिमेंट का डीओएम में होना ज़रूरी है, लेकिन ये एलिमेंट नहीं होने चाहिए अपने टैब के क्रम में. उदाहरण के लिए, अगर आपके पास कोई रिस्पॉन्सिव साइड-नेविगेशन है जो किसी बटन पर क्लिक करने से, उपयोगकर्ता साइड नेविगेशन पर फ़ोकस नहीं कर पाता बंद हो जाता है.
किसी खास इंटरैक्टिव एलिमेंट को फ़ोकस पाने से रोकने के लिए, आपको नीचे दी गई सीएसएस प्रॉपर्टी में से कोई एक एलिमेंट दें:
display: nonevisibility: hidden
एलिमेंट को टैब के क्रम में वापस जोड़ने के लिए, उदाहरण के लिए, जब साइड-नेविगेशन तो ऊपर दी गई सीएसएस प्रॉपर्टी को इससे बदलें:
display: blockvisibility: visible
अगले चरण
ऐसे उपयोगकर्ताओं के लिए जो अपने कंप्यूटर को करीब-करीब पूरी तरह से कीबोर्ड से ऑपरेट करते हैं या नहीं है, तो आपके ब्राउज़र को बनाने के लिए लॉजिकल टैब ऑर्डर ज़रूरी है आसानी से ऐक्सेस किया जा सकता है. टैब का क्रम देखने की आदत के तौर पर, हर ऐप्लिकेशन पर पब्लिश करने से पहले उसे आज़माएं.