एक्सेसिबिलिटी: साइट का DOM ऑर्डर चेक और एडजस्ट करना
साइट का DOM ऑर्डर वह क्रम है जिसमें स्क्रीन रीडर और Tab की, पेज के कंटेंट को हाइलाइट और/या “रीड” करते हैं। यह क्रम लॉजिकल होना चाहिए, ताकि विज़िटर्स को साइट पर बेहतरीन अनुभव मिले और वे आसानी से नेविगेट करके इसके कंटेंट का आनंद ले सकें।
ज़रूरी:
यह आर्टिकल, Wix Editor और Studio एडिटर में बनाई गई साइटों के DOM ऑर्डर को ऑप्टिमाइज़ करने के बारे में है। Wix Harmony Editor में DOM ऑर्डर के साथ काम करने की जानकारी के लिए,
यहां क्लिक करें।
साइटों पर DOM ऑर्डर
साइट का DOM, साइट पृष्ठों पर एलिमेंट्स के लोड होने और रीड किए जाने का क्रम है। Wix, एलिमेंट्स के विज़ुअल ऑर्डर के आधार पर अपने-आप DOM ऑर्डर सेट करता है। अपने एक्सेसिबिलिटी टूल्स डेवलप करते समय, हम इन स्क्रीन रीडर्स से अपने प्रोडक्ट्स टेस्ट करते हैं:
- Windows और Firefox या Chrome: NVDA (मुफ़्त रीडर)
- iOS और Safari: VoiceOver (बिल्ट-इन रीडर)
इसका मतलब है कि हमने ऊपर दिए गए ऐप्लिकेशन के फ़ंक्शन को ध्यान में रखकर आपकी साइट का ऑटोमैटिक DOM ऑर्डर बनाया है।
DOM ऑर्डर क्यों ज़रूरी है
कुछ साइट विज़िटर्स आपकी साइट पर नेविगेट करने के लिए स्क्रीन रीडर और दूसरी असिस्टिव टेक्नोलॉजी का इस्तेमाल कर सकते हैं। ये टेक्नोलॉजी साइट के कंटेंट को स्कैन करके और उसे विज़िटर को पढ़कर सुनाकर, दृष्टि संबंधी दिव्यांगता या समस्याओं वाले विज़िटर्स की मदद करती हैं।
स्क्रीन रीडर इस्तेमाल करने वाले विज़िटर्स और चलने-फिरने की क्षमता को प्रभावित करने वाली स्थितियों वाले विज़िटर्स, आपकी साइट के कंटेंट पर नेविगेट करने के लिए Tab की का इस्तेमाल कर सकते हैं। इसलिए स्क्रीन रीडर और/या Tab की इस्तेमाल करने वाले विज़िटर्स के लिए साइट का DOM ऑर्डर ज़रूरी है, क्योंकि उन्हें आपकी साइट पर लॉजिकल क्रम में नेविगेट करने में सक्षम होना चाहिए।
उदाहरण के लिए, साइट मेन्यू सबसे पहले आना चाहिए, उसके बाद शीर्षलेख के बाकी एलिमेंट्स, फिर पेज का शीर्षक, फिर पेज का कंटेंट वगैरह। DOM ऑर्डर गलत होने पर, स्क्रीन रीडर/Tab की आपके पेज के कंटेंट को स्किप कर सकती है या इधर-उधर जंप कर सकती है।
साइट का DOM ऑर्डर टेस्ट करना चाहते हैं?
Wix साइट के ऑटोमैटिक DOM ऑर्डर को टेस्ट करने के लिए, साइट के लाइव वर्ज़न पर अपने कीबोर्ड की Tab की या स्क्रीन रीडर का इस्तेमाल करें।
एक्सेसिबिलिटी विज़ार्ड में ऑटो DOM
Studio एडिटर में एक्सेसिबिलिटी विज़ार्ड खोलने पर, आपको साइट का DOM ऑर्डर ऑटोमैटिकली ऑर्गनाइज़ करने का ऑप्शन दिख सकता है। हम यह ऑप्शन चुनने की सलाह देते हैं, क्योंकि इससे विज़ार्ड का स्कैन और उससे मिलने वाले टास्क सही होते हैं।
यह चेकबॉक्स नहीं दिख रहा है?
साइट के DOM को ऑर्गनाइज़ करने का ऑप्शन इन स्थितियों में दिखाई नहीं देता:
- साइट नवंबर 2024 की शुरुआत के बाद बनाई गई थी।
- आपने पहले ही एक्सेसिबिलिटी विज़ार्ड से साइट का DOM ऑर्गनाइज़ कर लिया है।
- आपने साइट पर ऑटो DOM डिसेबल किया है।
साइट का DOM ऑर्डर मैन्युअली बदलना
अगर आपको अपनी साइट का DOM ऑर्डर लॉजिकल नहीं लगता, तो विज़िटर्स का अनुभव बेहतर बनाने के लिए इसे मैन्युअली एडजस्ट करें।
Wix Editor साइट्स पर DOM ऑर्डर बदलने के लिए,
एक्सेसिबिलिटी विज़र्ड और लेयर्स पैनल का इस्तेमाल करें। अगर आप Studio Editor में साइट बना रहे हैं, तो साइट के लेयर्स और पेजेज पैनल से ऑर्डर एडजस्ट कर सकते हैं।
महत्वपूर्ण:
अगर आपकी साइट का टैबिंग ऑर्डर सही और लॉजिकल है, तो आपको कुछ भी करने की जरूरत नहीं है। सही ऑर्डर को बदलने से स्क्रीन रीडर और/या Tab की का इस्तेमाल करने वाले विज़िटर्स को समस्याएं हो सकती हैं।
DOM ऑर्डर बदलने के लिए:
Wix Editor
Studio एडिटर
Wix आपकी साइट के लिए DOM ऑर्डर अपने-आप सेट करता है, इसलिए पहले इसे
एक्सेसिबिलिटी विज़र्ड में डिसेबल करें। इसके बाद, जरूरत के मुताबिक अपनी साइट के लेयर्स पैनल में एलिमेंट्स का DOM ऑर्डर मैन्युअली एडजस्ट करें।
DOM ऑर्डर को मैन्युअली अरेंज करने के लिए:
- अपने एडिटर पर जाएं।
- सबसे ऊपर सेटिंग्स पर क्लिक करें और एक्सेसिबिलिटी विज़र्ड चुनें।
- दाईं ओर मौजूद विज़र्ड में स्कैन साइट चुनें।
- डिटेक्टेड इश्यूज टैब पर क्लिक करें।
- साइट लेवल चुनें।
- ऑर्गनाइज़ DOM ऑर्डर पर क्लिक करें।
- मैन्युअली चुनें।
- अप्लाई पर क्लिक करें।
- अपने एडिटर में नीचे बाईं ओर लेयर्स
पर क्लिक करें। - लिस्ट चेक करें और ऐसे सभी गैर-जरूरी एलिमेंट्स हटा दें जिनकी जरूरत नहीं है। इनमें वे डुप्लीकेट एलिमेंट्स भी शामिल हैं जिनका आपकी साइट पर कोई इस्तेमाल नहीं है और जो स्क्रीन रीडर यूजर्स को कंफ्यूज कर सकते हैं।
- बाकी एलिमेंट्स को ड्रैग और ड्रॉप करके अपने पसंदीदा ऑर्डर में लगाएं।
अगला चरण:
मोबाइल एडिटर खोलें और वही स्टेप्स दोहराएं।
नोट्स:
- सिर्फ Tab key का इस्तेमाल करके साइट नेविगेट करने पर आप केवल इंटरैक्टिव एलिमेंट्स पर जा सकते हैं, टेक्स्ट जैसे स्टैटिक एलिमेंट्स पर नहीं। टेक्स्ट जैसे स्टैटिक एलिमेंट्स पर स्क्रीन रीडर टेस्ट करने के लिए, कीबोर्ड से वेबसाइट को सही तरीके से नेविगेट करने का तरीका जानने के लिए अपने स्क्रीन रीडर के हेल्प सेंटर में दिए गए निर्देशों का पालन करें।
- पिन किए गए एलिमेंट्स अपने-आप टैबिंग सीक्वेंस के आखिर में रखे जाते हैं। अगर आप चाहते हैं कि वह सीक्वेंस में पहले टैब हो, तो हमारा सुझाव है कि एलिमेंट को अनपिन करके हेडर में रखें।
आगे क्या है?
अपनी साइट की एक्सेसिबिलिटी पर काम जारी रखने के लिए,
एक्सेसिबिलिटी चेकलिस्ट पर वापस जाएं।
साइट की भाषा और DOM
अलग-अलग भाषाओं को पढ़ने की दिशा अलग होती है। उदाहरण के लिए, अंग्रेज़ी बाएं से दाएं और हिब्रू दाएं से बाएं पढ़ी जाती है। अगर आपने साइट की भाषा बदलकर ऐसी भाषा सेट की है जिसकी पढ़ने की दिशा अलग है, तो एलिमेंट्स का विज़ुअल और DOM ऑर्डर अब एक-दूसरे के साथ अलाइन नहीं हो सकता।
एलिमेंट्स का ऑर्डर साइट की भाषा की पढ़ने की दिशा से मैच हो, यह पक्का करने के लिए हमारा सुझाव है कि एक्सेसिबिलिटी विज़ार्ड में ऑटोमैटिक DOM ऑप्शन इनेबल करें।
ज़रूरी:
अगर साइट पर बाएं से दाएं और दाएं से बाएं पढ़ी जाने वाली, दोनों भाषाओं में कंटेंट है, तो हमारा सुझाव है कि DOM ऑर्डर को मैन्युअली एडजस्ट करें।
विज़ार्ड में ऑटो DOM इनेबल करने के लिए:
- एक्सेसिबिलिटी विज़ार्ड से साइट स्कैन करें।
- डिटेक्टेड इश्यूज टैब पर क्लिक करें।
- साइट लेवल चुनें।
- ऑर्गनाइज़ DOM ऑर्डर पर क्लिक करें।
- ऑटोमैटिकली (रिकमेंडेड) चुनें।
- अप्लाई पर क्लिक करें।
- (वैकल्पिक) साइट के एलिमेंट्स का विज़ुअल डिस्प्ले चेक करके पक्का करें कि वे अलाइन हैं।
नोट्स:
- यह ऑप्शन एलिमेंट्स का विज़ुअल डिस्प्ले बदल सकता है। इसलिए, बदलावों को रिव्यू करके पक्का करें कि साइट वैसी ही दिख रही है जैसी आप चाहते हैं।
- यह फीचर साइट के सभी कंपोनेंट्स को सपोर्ट नहीं करता, इसलिए आपको उनकी पढ़ने की दिशा मैन्युअली एडजस्ट करनी पड़ सकती है।
क्या आपने अपना फैसला बदल लिया?
आप अपने एडिटर से ऑटोमैटिक DOM ऑर्डर को पहले जैसा कर सकते हैं:
- Wix Editor: अपने एडिटर के टॉप बार में अनडू आइकन
पर क्लिक करें।
नोट: यह ऑप्शन सिर्फ तभी लागू होता है, जब आपकी पिछली कार्रवाई DOM को ऑटोमैटिकली फिर से ऑर्गनाइज़ करना थी। - Studio एडिटर: साइट हिस्ट्री से साइट का पिछला वर्जन रीस्टोर करें।