कई तरह के उपयोगकर्ता, ऐप्लिकेशन पर नेविगेट करने के लिए कीबोर्ड का इस्तेमाल करते हैं. इनमें, कुछ ऐसे उपयोगकर्ता होते हैं जिन्हें कुछ समय के लिए या हमेशा के लिए, हिलने-डुलने और चलने-फिरने में दिक्कत होती है. वहीं, कुछ ऐसे उपयोगकर्ता भी होते हैं जो ज़्यादा बेहतर और ज़्यादा काम करने के लिए, कीबोर्ड शॉर्टकट का इस्तेमाल करते हैं. कीबोर्ड से नेविगेट करने का बेहतर अनुभव देने के लिए, टैब का क्रम तय करना ज़रूरी है.
मैन्युअल रूप से टेस्ट करने का तरीका
यह जांचने के लिए कि आपके ऐप्लिकेशन का टैब क्रम लॉजिकल है या नहीं, टैब खोलने का प्रयास करें. एलिमेंट को फ़ोकस करने का क्रम, डीओएम के क्रम के हिसाब से होना चाहिए. सामान्य तौर पर, फ़ोकस बाईं से दाईं ओर जाते हुए, पढ़ने के क्रम के हिसाब से होना चाहिए. आपके पेज के सबसे निचले हिस्से तक.
कीबोर्ड ऐक्सेस की बुनियादी बातें पेज पर ज़्यादा जानें.
क्या आपको पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल दिख रहे हैं?
अगर ऐसा नहीं है, तो उन कंट्रोल को फ़ोकस करने की सुविधा को बेहतर बनाने के लिए, आपको tabindex का इस्तेमाल करना पड़ सकता है.
आम तौर पर, यह माना जाता है कि जिस कंट्रोल से उपयोगकर्ता इंटरैक्ट कर सकता है या जिस पर इनपुट दिया जा सकता है उस पर फ़ोकस किया जा सकता है और फ़ोकस इंडिकेटर दिखना चाहिए.
अगर कीबोर्ड का इस्तेमाल करने वाले व्यक्ति को यह नहीं दिखता कि फ़ोकस कहां है, तो उसके पास पेज के साथ इंटरैक्ट करने का कोई तरीका नहीं होता.
कैसे ठीक करें
अगर फ़ोकस का क्रम गलत लग रहा है, टैब का क्रम ज़्यादा स्वाभाविक बनाने के लिए आपको DOM में एलीमेंट को फिर से व्यवस्थित करना चाहिए.
अगर पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल ऐक्सेस नहीं हो पा रहे हैं, तो
सबसे पहला काम यह है कि कस्टम कंट्रोल को मानक एचटीएमएल विकल्पों से बदला जाए.
उदाहरण के लिए,
बटन की तरह काम करने वाले <div> को <button> से बदलें.
पहले से मौजूद एचटीएमएल एलिमेंट का इस्तेमाल करने से, आपकी साइट को ऐक्सेस करना काफ़ी आसान हो जाता है. साथ ही, आपका काम भी कम हो जाता है.
अगर कोई ऐसा कस्टम इंटरैक्टिव कॉम्पोनेंट बनाया जा रहा है जिसका कोई स्टैंडर्ड एचटीएमएल वर्शन नहीं है, तो tabindex एट्रिब्यूट का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि वे कीबोर्ड से ऐक्सेस किए जा सकते हैं.
उदाहरण के लिए:
<div tabindex="0">Focus me with the TAB key</div>
ज़्यादा जानकारी के लिए, tabindex की मदद से फ़ोकस कंट्रोल करना लेख पढ़ें.