डिफ़ॉल्ट 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 के साथ ऑफ़स्क्रीन कॉन्टेंट या
तत्वों को फिर से व्यवस्थित करें' डीओएम में फ़िज़िकल पोज़िशन होनी चाहिए, ताकि वे लॉजिकल
ऑर्डर.