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