कई अलग-अलग उपयोगकर्ता ऐप्लिकेशन नेविगेट करने के लिए कीबोर्ड का इस्तेमाल करते हैं. अपने ऐप्लिकेशन के लिए एक अच्छी कीबोर्ड नेविगेशन रणनीति होने से सभी के लिए बेहतर अनुभव मिलता है.
फ़ोकस और टैब का क्रम
किसी दिए गए समय पर, फ़ोकस का मतलब है कि आपके ऐप्लिकेशन के किस एलिमेंट (जैसे कि कोई फ़ील्ड, चेकबॉक्स, बटन या लिंक) को फ़िलहाल कीबोर्ड से इनपुट मिल रहा है. फ़ोकस किए गए एलिमेंट को कीबोर्ड इवेंट के अलावा, क्लिपबोर्ड से चिपकाया गया कॉन्टेंट भी मिलता है.
किसी पेज पर फ़ोकस को ले जाने के लिए, "आगे ले जाने" के लिए TAB और "पीछे की ओर" नेविगेट करने के लिए SHIFT + TAB का इस्तेमाल करें. मौजूदा समय में फ़ोकस किए गए एलिमेंट को अक्सर फ़ोकस रिंग के ज़रिए दिखाया जाता है और अलग-अलग ब्राउज़र उनके फ़ोकस रिंग की स्टाइल अलग-अलग होते हैं. जिस क्रम में इंटरैक्टिव एलिमेंट की मदद से फ़ोकस आगे और पीछे जाता है उसे टैब क्रम कहा जाता है.
टेक्स्ट फ़ील्ड, बटन, और चुनी गई सूचियों जैसे इंटरैक्टिव एचटीएमएल एलिमेंट सीधे तौर पर फ़ोकस किए जा सकते हैं: DOM में उनकी पोज़िशन के आधार पर, उन्हें टैब में अपने-आप शामिल कर लिया जाता है. इन इंटरैक्टिव एलिमेंट में, कीबोर्ड इवेंट मैनेज करने की सुविधा भी पहले से मौजूद होती है. पैराग्राफ़ और डीआईवी जैसे एलिमेंट पर साफ़ तौर पर फ़ोकस नहीं किया जा सकता, क्योंकि उपयोगकर्ताओं को आम तौर पर उनसे इंटरैक्ट करने की ज़रूरत नहीं होती.
लॉजिकल टैब ऑर्डर को लागू करना, अपने उपयोगकर्ताओं को आसान कीबोर्ड नेविगेशन का अनुभव देने के लिए एक अहम हिस्सा है. अपने टैब के क्रम का आकलन और उसे अडजस्ट करने के दौरान, दो मुख्य बातों को ध्यान में रखना चाहिए:
- डीओएम के एलिमेंट को लॉजिकल क्रम में व्यवस्थित करें
- ऑफ़स्क्रीन कॉन्टेंट के दिखने की सेटिंग को सही तरीके से सेट करें, ताकि उस कॉन्टेंट पर फ़ोकस न किया जा सके
डीओएम के एलिमेंट को लॉजिकल क्रम में व्यवस्थित करें
यह देखने के लिए कि आपके ऐप्लिकेशन का टैब क्रम सही है या नहीं, अपने पेज पर टैब करके देखें. आम तौर पर, फ़ोकस, पेज पढ़ने के क्रम के मुताबिक होना चाहिए. इस क्रम में, पेज के बाएं से दाएं, ऊपर से नीचे की ओर जाना चाहिए.
अगर फ़ोकस का क्रम गलत लगता है, तो आपको 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
अगले चरण
ऐसे उपयोगकर्ता जो अपने कंप्यूटर को करीब पूरी तरह से कीबोर्ड या किसी दूसरे इनपुट डिवाइस के ज़रिए ऑपरेट करते हैं उनके लिए आपके ऐप्लिकेशन को ऐक्सेस करने लायक और इस्तेमाल करने लायक बनाने के लिए, लॉजिकल टैब ऑर्डर ज़रूरी है. टैब का क्रम देखना अच्छी आदत है, इसलिए हर बार ऐप्लिकेशन पब्लिश करने से पहले उसे टैब करें.