इस पेज पर, Chrome DevTools में सुलभता सुविधाओं के बारे में ज़्यादा जानकारी दी गई है. यह उन वेब डेवलपर के लिए है जो:
- DevTools की बुनियादी जानकारी होनी चाहिए, जैसे कि उसे खोलने का तरीका.
- सुलभता से जुड़े सिद्धांतों और सबसे सही तरीकों के बारे में पता हो.
इस रेफ़रंस का मकसद, DevTools में उपलब्ध सभी टूल को खोजने में आपकी मदद करना है. इन टूल से, किसी पेज की सुलभता को जांचने में मदद मिलती है.
अगर आपको स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी की मदद से DevTools पर जाने में मदद चाहिए, तो सहायक टेक्नोलॉजी की मदद से Chrome DevTools पर नेविगेट करना देखें.
अगर आपको ऐसी वेबसाइटें डेवलप करने का तरीका जानना है जिन्हें ऐक्सेस किया जा सकता है, तो सुलभता के बारे में जानें लेख पढ़ें.
Chrome DevTools में सुलभता सुविधाओं के बारे में खास जानकारी
इस सेक्शन में बताया गया है कि DevTools आपके सभी सुलभता टूलकिट में किस तरह फ़िट होता है.
यह तय करते समय कि पेज को ऐक्सेस किया जा सकता है या नहीं, आपको दो सामान्य सवालों का ध्यान रखना होगा:
- क्या कीबोर्ड या स्क्रीन रीडर की मदद से पेज पर नेविगेट किया जा सकता है?
- क्या पेज के एलिमेंट, स्क्रीन रीडर के लिए सही तरीके से मार्कअप किए गए हैं?
आम तौर पर, DevTools #2 से जुड़ी गड़बड़ियां ठीक करने में आपकी मदद कर सकता है, क्योंकि इन गड़बड़ियों का ऑटोमेटेड तरीके से पता लगाना आसान होता है. सवाल #1 उतना ही ज़रूरी है, लेकिन माफ़ करें, DevTools आपकी मदद नहीं कर सकता. सवाल #1 से जुड़ी गड़बड़ियों को ढूंढने का बस एक ही तरीका है. खुद से कीबोर्ड या स्क्रीन रीडर वाले पेज का इस्तेमाल करके देखें. इस बारे में ज़्यादा जानने के लिए, सुलभता की समीक्षा करने का तरीका देखें.
किसी पेज की सुलभता सुविधाओं को ऑडिट करना
आम तौर पर, लाइटहाउस पैनल में सुलभता जांच का इस्तेमाल करके यह तय करें कि:
- पेज को स्क्रीन रीडर के लिए ठीक से मार्क अप किया गया है.
- पेज पर मौजूद टेक्स्ट एलिमेंट में ज़रूरत के मुताबिक कंट्रास्ट अनुपात हैं. अपनी वेबसाइट को पढ़ने में ज़्यादा आसान बनाना लेख भी देखें.
किसी पेज को ऑडिट करने के लिए:
- उस यूआरएल पर जाएं जिसका आपको ऑडिट करना है.
DevTools में, लाइटहाउस टैब पर क्लिक करें. DevTools आपको कॉन्फ़िगरेशन के कई विकल्प दिखाता है.
डिवाइस के लिए, अगर किसी मोबाइल डिवाइस को सिम्युलेट करना है, तो मोबाइल चुनें. यह विकल्प आपकी उपयोगकर्ता एजेंट स्ट्रिंग में अलग तरीके से बदलाव करता है और व्यूपोर्ट का साइज़ बदल देता है. अगर पेज का मोबाइल वर्शन, डेस्कटॉप वर्शन से अलग दिखता है, तो इस विकल्प से आपके ऑडिट के नतीजों पर काफ़ी असर पड़ सकता है.
Lighthouse सेक्शन में जाकर, पक्का करें कि सुलभता चालू हो. रिपोर्ट से दूसरी कैटगरी को बाहर रखने के लिए, उन्हें बंद कर दें. अगर आपको अपने पेज की क्वालिटी को बेहतर बनाने के दूसरे तरीके जानने हैं, तो इन्हें चालू रहने दें.
थरॉटलिंग सेक्शन की मदद से, नेटवर्क और सीपीयू को थ्रॉटल किया जा सकता है. इससे लोड की परफ़ॉर्मेंस का विश्लेषण करने में मदद मिलती है. यह विकल्प आपके सुलभता स्कोर के हिसाब से नहीं होना चाहिए, ताकि आप अपने हिसाब से कोई भी इस्तेमाल कर सकें.
स्टोरेज खाली करें चेकबॉक्स से, पेज लोड होने से पहले ही सारा स्टोरेज खाली किया जा सकता है या पेज लोड होने के बीच स्टोरेज खाली किया जा सकता है. यह विकल्प शायद आपके सुलभता स्कोर के लिए भी काम का न हो, इसलिए आप अपनी पसंद के मुताबिक विकल्प चुन सकते हैं.
रिपोर्ट जनरेट करें पर क्लिक करें. DevTools 10 से 30 सेकंड के बाद रिपोर्ट उपलब्ध कराता है. आपकी रिपोर्ट, पेज की सुलभता को बेहतर बनाने के बारे में कई सलाह देती है.
किसी ऑडिट के बारे में ज़्यादा जानने के लिए उस पर क्लिक करें.
उस ऑडिट के दस्तावेज़ देखने के लिए, ज़्यादा जानें पर क्लिक करें.
यह भी देखें: aXe एक्सटेंशन
Chrome में डिफ़ॉल्ट रूप से उपलब्ध लाइटहाउस पैनल के बजाय, aXe एक्सटेंशन या Lighthouse एक्सटेंशन का इस्तेमाल करें. आम तौर पर, इनसे एक ही जानकारी मिलती है, क्योंकि aXe वह इंजन है जो लाइटहाउस पैनल को चलाता है. aXe एक्सटेंशन का यूज़र इंटरफ़ेस (यूआई) अलग है और यह ऑडिट के बारे में थोड़ा अलग तरीके से बताता है.
ऑडिट पैनल की तुलना में, aXe एक्सटेंशन का एक फ़ायदा यह है कि इससे आप काम न करने वाले नोड की जांच कर सकते हैं और उन्हें हाइलाइट कर सकते हैं.
सुलभता पैनल
सुलभता पैनल में, सुलभता ट्री, ARIA एट्रिब्यूट, और डीओएम नोड की कंप्यूट की गई सुलभता प्रॉपर्टी देखी जा सकती हैं.
सुलभता पैनल खोलने के लिए:
- एलिमेंट टैब पर क्लिक करें.
- DOM ट्री में, वह एलिमेंट चुनें जिसकी आपको जांच करनी है.
- सुलभता टैब पर क्लिक करें. यह टैब, ज़्यादा टैब
बटन के पीछे छिपा हो सकता है.
सुलभता ट्री में किसी एलिमेंट की पोज़िशन देखना
सुलभता ट्री, डीओएम ट्री का एक सबसेट है. इसमें सिर्फ़ डीओएम ट्री के एलिमेंट शामिल होते हैं, जो स्क्रीन रीडर में पेज का कॉन्टेंट दिखाने के लिए काम के और काम के होते हैं.
सुलभता पैनल से, सुलभता ट्री में किसी एलिमेंट की पोज़िशन की जांच करें.
इस व्यू की मदद से, सिर्फ़ एक नोड और उसके पहले के हिस्सों को एक्सप्लोर किया जा सकता है. पूरे सुलभता ट्री के बारे में जानने के लिए, नीचे दिया गया तरीका अपनाएं.
(झलक) पूरे पेज वाले सुलभता ट्री के बारे में जानें
सुलभता ट्री की फ़ुल-पेज व्यू से, आपको पूरे ट्री के बारे में जानने में मदद मिलती है. साथ ही, यह बेहतर तरीके से समझने में मदद मिलती है कि आपका वेब कॉन्टेंट, सहायक टेक्नोलॉजी को कैसे दिखाता है.
सुलभता ट्री के बारे में जानने के लिए:
पूरे पेज की सुलभता ट्री चालू करें पर सही का निशान लगाएं.सबसे ऊपर मौजूद ऐक्शन बार पर, DevTools फिर से लोड करें पर क्लिक करें.
एलिमेंट पैनल के ऊपर दाएं कोने में,
सुलभता ट्री व्यू पर स्विच करें बटन को टॉगल करें.
सुलभता ट्री ब्राउज़ करें. नोड को बड़ा किया जा सकता है या कंप्यूट की गई प्रॉपर्टी में जानकारी देखने के लिए क्लिक किया जा सकता है.
कोई नोड चुनें और डीओएम ट्री पर वापस टॉगल करने के लिए,
DOM ट्री व्यू पर स्विच करें बटन पर क्लिक करें.अब इससे जुड़ा DOM नोड चुना गया. यह DOM नोड और इसके सुलभता ट्री नोड के बीच की मैपिंग को समझने का एक बेहतरीन तरीका है.
किसी एलिमेंट के ARIA एट्रिब्यूट देखना
ARIA एट्रिब्यूट यह पक्का करते हैं कि स्क्रीन रीडर के पास वह सभी जानकारी हो जिसकी उन्हें ज़रूरत है, ताकि वे पेज के कॉन्टेंट को सही तरीके से दिखा सकें.
सुलभता पैनल में किसी एलिमेंट के ARIA एट्रिब्यूट देखें.
स्क्रीन पर एलिमेंट का सोर्स ऑर्डर देखना
पेज पर मौजूद एलिमेंट हमेशा उसी क्रम में नहीं दिखते जिस क्रम में वे सोर्स में मौजूद होते हैं. इससे उन उपयोगकर्ताओं को भ्रम हो सकता है जो वेब पर नेविगेट करने के लिए सहायक टेक्नोलॉजी पर निर्भर हैं.
अपनी वेबसाइट पर सोर्स ऑर्डर देखने और उसे डीबग करने के लिए:
- पेज पर किसी एलिमेंट की जांच करें.
- एलिमेंट > सुलभता > सोर्स ऑर्डर व्यूअर में,
सोर्स ऑर्डर दिखाएं को चुनें.
व्यूपोर्ट में, DevTools बॉर्डर के साथ नेस्ट किए गए एलिमेंट को आउटलाइन करता है और उनके सोर्स क्रम के हिसाब से संख्याओं से उन पर निशान लगाता है.
किसी एलिमेंट की कंप्यूट की गई सुलभता प्रॉपर्टी देखना
कुछ सुलभता प्रॉपर्टी को ब्राउज़र, डाइनैमिक तौर पर कैलकुलेट करता है. इन प्रॉपर्टी को सुलभता पैनल के कंप्यूटेड प्रॉपर्टी सेक्शन में देखा जा सकता है.
सुलभता पैनल में, किसी एलिमेंट की कैलकुलेट की गई सुलभता प्रॉपर्टी देखें.
कम कंट्रास्ट वाला टेक्स्ट खोजना और उसे ठीक करना
DevTools कम कंट्रास्ट वाली समस्याओं का अपने-आप पता लगा सकता है. साथ ही, उन्हें ठीक करने में आपकी मदद करने के लिए, बेहतर रंगों के सुझाव दे सकता है. ज़्यादा जानने के लिए, अपनी वेबसाइट को पढ़ने लायक बनाना लेख पढ़ें.