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