डिफ़ॉल्ट DOM ऑर्डर की अहमियत
फ़ोकस व्यवहार के बारे में जानने के लिए नेटिव एलिमेंट के साथ काम करना सबसे बढ़िया तरीका है, क्योंकि DOM में उनकी स्थिति के आधार पर उन्हें टैब क्रम में अपने-आप शामिल किया जाता है.
उदाहरण के लिए, आपके पास तीन बटन एलिमेंट हो सकते हैं, जो DOM में एक के बाद एक बटन
हो सकते हैं. Tab दबाने से, हर बटन पर फ़ोकस हो जाता है. नेविगेशन के शुरू होने के पॉइंट को दूसरी जगह ले जाने के लिए, नीचे दिए गए कोड ब्लॉक पर क्लिक करें. इसके बाद, बटन की मदद से फ़ोकस को दूसरी जगह ले जाने के लिए Tab दबाएं.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
हालांकि, यह ध्यान रखना ज़रूरी है कि सीएसएस का इस्तेमाल करके, डीओएम में चीज़ों को एक क्रम में रखा जा सकता है, लेकिन वे स्क्रीन पर किसी दूसरे क्रम में दिख सकती हैं. उदाहरण के लिए, अगर किसी बटन को दाईं ओर ले जाने के लिए 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 के साथ सही तरीके से छिपाया जा रहा हो या डीओएम में एलिमेंट की फ़िज़िकल पोज़िशन को फिर से व्यवस्थित किया जा रहा हो, ताकि वे लॉजिकल ऑर्डर में हों.