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