डिफ़ॉल्ट DOM क्रम की अहमियत
नेटिव एलिमेंट के साथ काम करना, फ़ोकस के व्यवहार के बारे में जानने का एक बेहतरीन तरीका है. ऐसा इसलिए, क्योंकि वे DOM में अपनी पोज़िशन के आधार पर, टैब ऑर्डर में अपने-आप शामिल हो जाते हैं.
उदाहरण के लिए, आपके पास डीओएम में एक के बाद एक तीन बटन एलिमेंट हो सकते हैं. Tab दबाने पर, हर बटन पर क्रम से फ़ोकस होता है. नेविगेशन के शुरू होने के पॉइंट को दूसरी जगह ले जाने के लिए, नीचे दिए गए कोड ब्लॉक पर क्लिक करें. इसके बाद, बटन की मदद से फ़ोकस को दूसरी जगह ले जाने के लिए Tab दबाएं.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
हालांकि, यह ध्यान रखना ज़रूरी है कि सीएसएस का इस्तेमाल करके, डीओएम में चीज़ों को एक क्रम में रखा जा सकता है, लेकिन वे स्क्रीन पर किसी दूसरे क्रम में दिख सकती हैं. उदाहरण के लिए, अगर किसी बटन को दाईं ओर ले जाने के लिए, float जैसी सीएसएस प्रॉपर्टी का इस्तेमाल किया जाता है, तो बटन स्क्रीन पर अलग क्रम में दिखते हैं. हालांकि, DOM में उनका क्रम एक जैसा रहता है, इसलिए उनका टैब क्रम भी एक जैसा रहता है. जब उपयोगकर्ता पेज पर टैब करता है, तो बटनों पर फ़ोकस, सामान्य क्रम में नहीं होता. नेविगेशन के शुरू होने के पॉइंट को दूसरी जगह ले जाने के लिए, नीचे दिए गए कोड ब्लॉक पर क्लिक करें. इसके बाद, बटन पर फ़ोकस ले जाने के लिए Tab दबाएं.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
सीएसएस का इस्तेमाल करके, स्क्रीन पर एलिमेंट की विज़ुअल पोज़िशन में बदलाव करते समय सावधानी बरतें. इससे, टैब का क्रम अचानक बदल सकता है. इससे कीबोर्ड का इस्तेमाल करने वाले लोगों को परेशानी हो सकती है. इस वजह से, वेब एआईएम की चेकलिस्ट के सेक्शन 1.3.2 में बताया गया है कि कोड के क्रम के हिसाब से, पढ़ने और नेविगेट करने का क्रम, लॉजिकल और आसान होना चाहिए.
आम तौर पर, अपने पेजों पर समय-समय पर टैब करके देखें कि आपने गलती से टैब के क्रम में कोई बदलाव तो नहीं किया है. यह एक अच्छी आदत है और इसे अपनाने के लिए ज़्यादा मेहनत की ज़रूरत नहीं होती.
ऑफ़स्क्रीन कॉन्टेंट
अगर आपके पास ऐसा कॉन्टेंट है जो फ़िलहाल नहीं दिख रहा है, लेकिन उसे DOM में रखना ज़रूरी है, तो क्या करें? जैसे, रिस्पॉन्सिव साइड-नेविगेशन? अगर आपके पेज पर ऐसे एलिमेंट हैं जो स्क्रीन पर न होने पर भी फ़ोकस में रहते हैं, तो ऐसा लग सकता है कि उपयोगकर्ता जब पेज पर टैब करता है, तब फ़ोकस हट रहा है और फिर से आ रहा है. यह एक ऐसा असर है जिसकी ज़रूरत नहीं है. आम तौर पर, हमें पैनल को स्क्रीन से हटने पर फ़ोकस होने से रोकना चाहिए. साथ ही, उसे सिर्फ़ तब फ़ोकस करने की अनुमति देनी चाहिए, जब उपयोगकर्ता उससे इंटरैक्ट कर सकता हो.
कभी-कभी आपको यह पता लगाने के लिए थोड़ी जासूसी करनी पड़ती है कि फ़ोकस कहां गया है. कंसोल में document.activeElement का इस्तेमाल करके, यह पता लगाया जा सकता है कि फ़िलहाल किस एलिमेंट पर फ़ोकस किया गया है.
यह पता चलने के बाद कि स्क्रीन से बाहर मौजूद किस एलिमेंट पर फ़ोकस किया जा रहा है, उसे display: none या visibility: hidden पर सेट किया जा सकता है. इसके बाद, उपयोगकर्ता को दिखाने से पहले, उसे display:
block या visibility: visible पर वापस सेट किया जा सकता है.
आम तौर पर, हम डेवलपर को हर पब्लिश करने से पहले, अपनी साइटों पर टैब करने का सुझाव देते हैं. इससे यह पता चलता है कि टैब का क्रम न तो गायब हो रहा है और न ही लॉजिकल क्रम से बाहर जा रहा है. अगर ऐसा होता है, तो आपको यह पक्का करना चाहिए कि आपने display: none या visibility: hidden का इस्तेमाल करके, स्क्रीन से बाहर के कॉन्टेंट को सही तरीके से छिपाया हो. इसके अलावा, यह भी पक्का करें कि आपने DOM में एलिमेंट की जगहों को फिर से व्यवस्थित किया हो, ताकि वे सही क्रम में हों.