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

Kayce Basques

Sofia Emelianova

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

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

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

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

अगर आपको सुलभ वेबसाइटें बनाने का तरीका जानना है, तो सुलभता के बारे में जानें पर जाएं.

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

इस सेक्शन में बताया गया है कि DevTools, ऐक्सेसिबिलिटी टूलकिट में किस तरह काम करता है.

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

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

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

किसी पेज की सुलभता का ऑडिट करना

आम तौर पर, Lighthouse पैनल में मौजूद सुलभता की जांचों का इस्तेमाल करके यह पता लगाया जा सकता है कि:

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

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

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

2. DevTools में, Lighthouse पैनल पर क्लिक करें. DevTools में, कॉन्फ़िगरेशन के अलग-अलग विकल्प दिखते हैं.

   

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

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

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

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

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

   

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

   

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

   

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

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

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

डिवाइस टूलबार की मदद से, कॉन्टेंट के फिर से व्यवस्थित होने की जांच करना

वेब कॉन्टेंट ऐक्सेसिबिलिटी दिशा-निर्देश (डब्ल्यूसीएजी) रिफ़्लो के सिद्धांत के मुताबिक, वेब कॉन्टेंट को इस तरह से बनाया जाना चाहिए कि व्यूपोर्ट का साइज़ बदलने या ओरिएंटेशन बदलने पर भी, कॉन्टेंट में मौजूद जानकारी बनी रहे. कॉन्टेंट को एक कॉलम में अलाइन करने से, बड़े किए गए टेक्स्ट का इस्तेमाल करने वाले लोगों को मदद मिलती है. यह जांचने के लिए कि आपका कॉन्टेंट कैसे रिफ़्लो होता है, Lighthouse पैनल में मौजूद डिवाइस टूलबार की मदद से, व्यूपोर्ट का साइज़ डाइनैमिक तरीके से बदलें.

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

ऐक्सेसिबिलिटी टैब

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

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

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

आने वाले समय में इसे तुरंत ऐक्सेस करने के लिए, सुलभता टैब को सबसे आगे खींचकर ले जाएं.

सुलभता ट्री में किसी एलिमेंट की जगह देखना

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

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

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

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

किसी भी समय, टॉगल करके वापस DOM ट्री पर जाया जा सकता है. इससे जुड़ा डीओएम नोड चुना हुआ रहता है. डीओएम नोड और उसके सुलभता ट्री नोड के बीच मैपिंग को समझने का यह एक बेहतरीन तरीका है.

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

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

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

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

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

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

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

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

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

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

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

रेंडरिंग टैब

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

• देखने से जुड़ी समस्याओं को एम्युलेट करें. इससे, देखने से जुड़ी अलग-अलग समस्याओं के हिसाब से अपने पेज को देखा जा सकता है.
• सीएसएस मीडिया फ़ीचर prefers-color-scheme को एम्युलेट करें, ताकि यह देखा जा सके कि गहरे या हल्के रंग वाला मोड चालू होने पर आपका पेज कैसा दिखता है. कई लोग गहरे रंग वाले मोड को सिर्फ़ एक स्टाइल मानते हैं, लेकिन गहरे रंग वाले मोड को सुलभता टूल के तौर पर इस्तेमाल करने से पता चलता है कि यह मोड और भी कई तरह से फ़ायदेमंद है.
• अपने पेज को प्रिंट या स्क्रीन मीडिया स्टाइल में देखने के लिए, सीएसएस मीडिया टाइप को एम्युलेट करें.
• सीएसएस मीडिया फ़ीचर forced-colors को एम्युलेट करें, ताकि यह देखा जा सके कि अगर उपयोगकर्ता एजेंट ने फ़ोर्स्ड कलर्स मोड चालू किया है, तो आपका पेज कैसा दिखेगा.
• ज़्यादा, कम या खास कंट्रास्ट वैल्यू के साथ अपना वेब कॉन्टेंट देखने के लिए, सीएसएस मीडिया फ़ीचर prefers-contrast को एम्युलेट करें.
• मोशन कम करके अपने वेब कॉन्टेंट को देखने के लिए, सीएसएस मीडिया फ़ीचर prefers-reduced-motion को एम्युलेट करें. कुछ लोगों को ऐनिमेशन वाले कॉन्टेंट से ध्यान भटकने या उल्टी आने की समस्या हो सकती है. इस विकल्प का इस्तेमाल करके देखें कि आपका पेज बिना ऐनिमेशन या स्मूथ-स्क्रोलिंग जैसी सुविधाओं के कैसा दिखता है.
• सीएसएस मीडिया फ़ीचर prefers-reduced-transparency की नकल करें, ताकि यह देखा जा सके कि अगर उपयोगकर्ता डिवाइस पर इस्तेमाल किए गए पारदर्शी या हल्के पारदर्शी लेयर इफ़ेक्ट को कम करने का अनुरोध करता है, तो आपका वेब कॉन्टेंट कैसा दिखेगा.

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

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