पेज का टैब क्रम नियमों के हिसाब से है

कई तरह के उपयोगकर्ता, ऐप्लिकेशन पर नेविगेट करने के लिए कीबोर्ड का इस्तेमाल करते हैं. इनमें, कुछ ऐसे उपयोगकर्ता होते हैं जिन्हें कुछ समय के लिए या हमेशा के लिए, हिलने-डुलने और चलने-फिरने में दिक्कत होती है. वहीं, कुछ ऐसे उपयोगकर्ता भी होते हैं जो ज़्यादा बेहतर और ज़्यादा काम करने के लिए, कीबोर्ड शॉर्टकट का इस्तेमाल करते हैं. कीबोर्ड से नेविगेट करने का बेहतर अनुभव देने के लिए, टैब का क्रम तय करना ज़रूरी है.

मैन्युअल तरीके से जांच करने का तरीका

यह देखने के लिए कि आपके ऐप्लिकेशन के टैब का क्रम सही है या नहीं, अपने पेज पर टैब करके देखें. एलिमेंट को फ़ोकस करने का क्रम, डीओएम के क्रम के हिसाब से होना चाहिए. आम तौर पर, फ़ोकस को पढ़ने के क्रम में ले जाना चाहिए. जैसे, पेज के ऊपर से नीचे और बाईं से दाईं ओर.

कीबोर्ड से ऐक्सेस करने की बुनियादी बातें में ज़्यादा जानें.

क्या आपको पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल दिख रहे हैं? अगर ऐसा नहीं है, तो आपको उन कंट्रोल पर फ़ोकस करने की सुविधा को बेहतर बनाने के लिए, tabindex का इस्तेमाल करना पड़ सकता है. आम तौर पर, यह माना जाता है कि जिस कंट्रोल से उपयोगकर्ता इंटरैक्ट कर सकता है या जिस पर इनपुट दिया जा सकता है उस पर फ़ोकस किया जा सकता है और फ़ोकस इंडिकेटर दिखना चाहिए. अगर कीबोर्ड का इस्तेमाल करने वाले व्यक्ति को यह नहीं दिखता कि फ़ोकस कहां है, तो उसके पास पेज के साथ इंटरैक्ट करने का कोई तरीका नहीं होता.

कैसे ठीक करें

अगर फ़ोकस का क्रम गलत लगता है, तो टैब के क्रम को ज़्यादा स्वाभाविक बनाने के लिए, आपको डीओएम में एलिमेंट का क्रम फिर से तय करना चाहिए.

अगर आपको पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल नहीं दिख रहे हैं, तो सबसे पहले कस्टम कंट्रोल को स्टैंडर्ड एचटीएमएल विकल्पों से बदलें. उदाहरण के लिए, बटन की तरह काम करने वाले <div> को <button> से बदलें. पहले से मौजूद एचटीएमएल एलिमेंट का इस्तेमाल करने से, आपकी साइट को ऐक्सेस करना काफ़ी आसान हो जाता है. साथ ही, आपका काम भी कम हो जाता है.

अगर कोई ऐसा कस्टम इंटरैक्टिव कॉम्पोनेंट बनाया जा रहा है जिसका कोई स्टैंडर्ड एचटीएमएल वर्शन नहीं है, तो tabindex एट्रिब्यूट का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि वे कीबोर्ड से ऐक्सेस किए जा सकते हैं. उदाहरण के लिए:

<div tabindex="0">Focus me with the TAB key</div>

ज़्यादा जानकारी के लिए, tabindex की मदद से फ़ोकस कंट्रोल करना लेख पढ़ें.

संसाधन

पेज पर टैब का क्रम सही है ऑडिट के लिए सोर्स कोड