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