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