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