सुलभता सुविधाओं के बारे में जानकारी

Kayce Basques

Sofia Emelianova

इस पेज पर, Chrome DevTools की सुलभता सुविधाओं के बारे में पूरी जानकारी दी गई है. यह उन वेब डेवलपर के लिए है जो:

• DevTools के बारे में बुनियादी जानकारी होनी चाहिए, जैसे कि इसे खोलने का तरीका.
• सुलभता से जुड़े सिद्धांतों और सबसे सही तरीकों के बारे में जानते हों.

इस रेफ़रंस का मकसद, DevTools में उपलब्ध सभी टूल के बारे में आपकी मदद करना है. इन टूल से किसी पेज की सुलभता के बारे में पता करने में मदद मिलती है.

अगर आपको स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी की मदद से DevTools को नेविगेट करने में मदद चाहिए, तो सहायक टेक्नोलॉजी की मदद से Chrome DevTools को नेविगेट करना लेख पढ़ें.

अगर आपको ऐक्सेस करने लायक वेबसाइटें बनाने का तरीका जानना है, तो सुलभता सीखें देखें.

Chrome DevTools की सुलभता सुविधाओं के बारे में खास जानकारी

इस सेक्शन में बताया गया है कि DevTools आपकी सभी सुलभता टूलकिट में कैसे फ़िट होता है.

पेज को ऐक्सेस किया जा सकता है या नहीं, यह तय करते समय आपको इन दो सामान्य सवालों का ध्यान रखना होगा:

1. क्या कीबोर्ड या स्क्रीन रीडर की मदद से पेज पर नेविगेट किया जा सकता है?
2. क्या स्क्रीन रीडर के लिए पेज के एलिमेंट को ठीक से मार्कअप किया गया है?

आम तौर पर, DevTools आपको सवाल #2 से जुड़ी गड़बड़ियों को ठीक करने में मदद कर सकता है, क्योंकि इन गड़बड़ियों का अपने-आप पता लगाना आसान होता है. सवाल #1 उतना ही ज़रूरी है, लेकिन माफ़ करें, DevTools आपकी मदद नहीं कर सकता. सवाल #1 से जुड़ी गड़बड़ियों को ढूंढने का सिर्फ़ एक ही तरीका है कि आप कीबोर्ड या स्क्रीन रीडर वाले पेज का इस्तेमाल करें. ज़्यादा जानने के लिए सुलभता की समीक्षा करने का तरीका देखें.

किसी पेज की सुलभता की जांच करें

आम तौर पर, लाइटहाउस पैनल में सुलभता जांच का इस्तेमाल करके यह पता लगाएं कि:

• पेज को स्क्रीन रीडर के लिए सही तरीके से मार्क अप किया गया है.
• पेज पर मौजूद टेक्स्ट एलिमेंट के कंट्रास्ट रेशियो काफ़ी हैं. अपनी वेबसाइट को पढ़ने में आसान बनाना भी पढ़ें.

किसी पेज को ऑडिट करने के लिए:

1. उस यूआरएल पर जाएं जिसका ऑडिट करना है.

2. DevTools में Lighthouse टैब पर क्लिक करें. DevTools आपको कॉन्फ़िगरेशन के कई विकल्प दिखाता है.

   

3. अगर आपको किसी मोबाइल डिवाइस को सिम्युलेट करना है, तो डिवाइस के लिए मोबाइल चुनें. यह विकल्प आपकी उपयोगकर्ता एजेंट स्ट्रिंग को अलग-अलग बदल देता है और व्यूपोर्ट का साइज़ बदल देता है. अगर पेज का मोबाइल वर्शन, डेस्कटॉप वर्शन से अलग दिखता है, तो इस विकल्प से आपके ऑडिट के नतीजों पर काफ़ी असर पड़ सकता है.

4. लाइटहाउस सेक्शन में पक्का करें कि सुलभता चालू हो. अगर आप अन्य श्रेणियों को अपनी रिपोर्ट से बाहर रखना चाहते हैं, तो उन्हें बंद कर दें. अगर आपको पेज की क्वालिटी को बेहतर बनाने के दूसरे तरीके खोजने हैं, तो उन्हें चालू रखें.

5. थ्रॉटलिंग सेक्शन में, नेटवर्क और सीपीयू को थ्रॉटल किया जा सकता है. इससे लोड की परफ़ॉर्मेंस का विश्लेषण करने में मदद मिलती है. यह विकल्प आपके सुलभता स्कोर से जुड़ा नहीं होना चाहिए, ताकि आप किसी भी सुविधा का इस्तेमाल कर सकें.

6. स्टोरेज खाली करें चेकबॉक्स से, आपको पेज लोड करने से पहले सारा स्टोरेज खाली करने की सुविधा मिलती है. इसके अलावा, पेज लोड होने के दौरान स्टोरेज को भी सुरक्षित रखा जा सकता है. यह विकल्प शायद आपके सुलभता स्कोर के हिसाब से सही नहीं है, इसलिए अपनी पसंद के मुताबिक इस्तेमाल किया जा सकता है.

7. रिपोर्ट जनरेट करें पर क्लिक करें. DevTools 10 से 30 सेकंड के बाद, एक रिपोर्ट उपलब्ध कराता है. आपकी रिपोर्ट से आपको पेज की सुलभता को बेहतर बनाने के बारे में कई तरह की सलाह मिलती है.

   

8. किसी ऑडिट के बारे में ज़्यादा जानने के लिए, उस पर क्लिक करें.

   

9. उस ऑडिट के दस्तावेज़ को देखने के लिए, ज़्यादा जानें पर क्लिक करें.

   

यह भी देखें: aXe एक्सटेंशन

आप Chrome में डिफ़ॉल्ट रूप से उपलब्ध लाइटहाउस पैनल के बजाय, aXe एक्सटेंशन या Lighthouse एक्सटेंशन का इस्तेमाल कर सकते हैं. इन दोनों में आम तौर पर एक जैसी जानकारी मिलती है, क्योंकि लाइटहाउस पैनल को चलाने के लिए AXe एक अहम इंजन है. AXe एक्सटेंशन का यूज़र इंटरफ़ेस (यूआई) अलग है और यह ऑडिट के बारे में थोड़ा अलग तरीके से बताता है.

ऑडिट पैनल की तुलना में AXe एक्सटेंशन का एक फ़ायदा यह है कि इसकी मदद से काम न करने वाले नोड की जांच की जा सकती है और उन्हें हाइलाइट किया जा सकता है.

सुलभता पैनल

सुलभता पैनल में, डीओएम नोड की सुलभता ट्री, ARIA एट्रिब्यूट, और कंप्यूट की गई सुलभता प्रॉपर्टी देखी जा सकती हैं.

सुलभता पैनल खोलने के लिए:

1. एलिमेंट टैब पर क्लिक करें.
2. डीओएम ट्री में, वह एलिमेंट चुनें जिसकी जांच करनी है.
3. Accessibility टैब पर क्लिक करें. यह टैब, ज़्यादा टैब बटन के पीछे हो सकता है.

सुलभता ट्री में किसी एलिमेंट की पोज़िशन देखना

सुलभता ट्री, डीओएम ट्री का सबसेट है. इसमें सिर्फ़ डीओएम ट्री के ऐसे एलिमेंट होते हैं जो स्क्रीन रीडर में पेज के कॉन्टेंट को दिखाने के लिए सही और काम के हैं.

सुलभता पैनल में जाकर, सुलभता ट्री में किसी एलिमेंट की पोज़िशन की जांच करें.

इस व्यू की मदद से, सिर्फ़ एक नोड और उसके पूर्वजों को एक्सप्लोर किया जा सकता है. सुलभता ट्री के बारे में पूरी जानकारी पाने के लिए, नीचे दिया गया तरीका अपनाएं.

(झलक) पूरे पेज पर सुलभता ट्री के बारे में जानें

सुलभता ट्री के पूरे पेज का व्यू आपको पूरी जानकारी देने में मदद करता है. साथ ही, इससे आपको यह समझने में मदद मिलती है कि सहायक टेक्नोलॉजी के संपर्क में आपका वेब कॉन्टेंट किस तरह से दिख रहा है.

सुलभता ट्री के बारे में जानने के लिए:

1. पूरे पेज पर सुलभता ट्री चालू करें को चुनें.

2. सबसे ऊपर मौजूद कार्रवाई बार में, DevTools फिर से लोड करें पर क्लिक करें.

   

3. एलिमेंट पैनल के सबसे ऊपर दाएं कोने में, सुलभता ट्री व्यू पर स्विच करें बटन को टॉगल करें.

   

4. सुलभता ट्री को ब्राउज़ करें. नोड को बड़ा किया जा सकता है या कंप्यूट की गई प्रॉपर्टी में जानकारी देखने के लिए क्लिक किया जा सकता है.

5. नोड चुनकर DOM ट्री पर वापस टॉगल करने के लिए, डीओएम ट्री व्यू पर स्विच करें बटन पर क्लिक करें.

   संबंधित DOM नोड अब चुना गया है. यह डीओएम नोड और इसके सुलभता ट्री नोड के बीच मैपिंग को समझने का एक शानदार तरीका है.

किसी एलिमेंट के ARIA एट्रिब्यूट देखना

ARIA एट्रिब्यूट यह पक्का करते हैं कि स्क्रीन रीडर के पास वह सारी जानकारी हो जिसकी उन्हें किसी पेज के कॉन्टेंट को सही तरीके से दिखाने के लिए ज़रूरी है.

सुलभता पैनल में किसी एलिमेंट के ARIA एट्रिब्यूट देखें.

स्क्रीन पर एलिमेंट का सोर्स ऑर्डर देखें

पेज पर मौजूद एलिमेंट, हमेशा उसी क्रम में नहीं दिखते जिस क्रम में वे सोर्स में होते हैं. इससे उन उपयोगकर्ताओं को भ्रम हो सकता है जो वेब पर नेविगेट करने के लिए, सहायक टेक्नोलॉजी का इस्तेमाल करते हैं.

अपनी वेबसाइट पर सोर्स ऑर्डर देखने और उसे डीबग करने के लिए:

1. पेज पर मौजूद किसी एलिमेंट की जांच करें.
2. एलिमेंट > सुलभता > सोर्स ऑर्डर व्यूअर में, सोर्स ऑर्डर दिखाएं को चुनें.

व्यूपोर्ट में, DevTools नेस्ट किए गए एलिमेंट को बॉर्डर से आउटलाइन करता है. साथ ही, उन एलिमेंट को उनके सोर्स ऑर्डर के मुताबिक संख्याओं से मार्क करता है.

किसी एलिमेंट की कंप्यूट की गई सुलभता प्रॉपर्टी देखना

कुछ सुलभता प्रॉपर्टी को ब्राउज़र डाइनैमिक तरीके से कैलकुलेट करता है. इन प्रॉपर्टी को सुलभता पैनल के कंप्यूट की गई प्रॉपर्टी सेक्शन में देखा जा सकता है.

सुलभता पैनल में किसी एलिमेंट की कंप्यूट की गई सुलभता प्रॉपर्टी देखें.

कम कंट्रास्ट वाले टेक्स्ट का पता लगाना और उसे ठीक करना

DevTools कम कंट्रास्ट वाली समस्याएं अपने-आप ढूंढ सकता है और उन्हें ठीक करने में आपकी मदद करने के लिए, बेहतर रंगों के सुझाव दे सकता है. ज़्यादा जानने के लिए, अपनी वेबसाइट को पढ़ने में आसान बनाएं लेख पढ़ें.