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