अपनी वेबसाइट को इस तरह डिज़ाइन करना कि उसे आसानी से पढ़ा जा सके

सोफ़िया इमेलियानोवा

GitHub

अहम जानकारी: कम कंट्रास्ट वाला टेक्स्ट, वेब पर सुलभता से जुड़ी सबसे बड़ी समस्या है. फ़रवरी 2022 में, टॉप 10 लाख होम पेजों में से 83.9% पेजों पर यह समस्या थी. ज़्यादा जानने के लिए, WebAIM Million 2022 की रिपोर्ट देखें.

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

DevTools का इस्तेमाल करके:

• कंट्रास्ट से जुड़ी समस्याओं का पता लगाना. सभी समस्याओं की सूची पाने के लिए, सीएसएस की खास जानकारी पैनल, (झलक) समस्याएं टैब या लाइटहाउस रिपोर्ट का इस्तेमाल करें.
• कंट्रास्ट से जुड़ी समस्याएं ठीक करना. इंस्पेक्टर मोड में टूलटिप की समस्याओं को देखें. साथ ही, कंट्रास्ट का अनुपात ठीक करने के लिए, कलर पिकर से मिले रंग चुनें.
• देखने की क्षमता से जुड़ी कमी को दूर करना. अपनी साइट को उस तरह देखें जिस तरह वह उपयोगकर्ताओं को दिखती है.

कम कंट्रास्ट वाले टेक्स्ट का पता लगाना

कम कंट्रास्ट वाले टेक्स्ट को खोजने के लिए:

1. अपने पेज पर DevTools खोलें. इस ट्यूटोरियल में, इस डेमो पेज का इस्तेमाल किया जा सकता है.

2. तीन पैनल में से किसी एक का इस्तेमाल करके सभी कंट्रास्ट समस्याओं की सूची पाएं:

   • सीएसएस की खास जानकारी
   • (झलक देखें) समस्याएं
   • लाइटहाउस

सीएसएस की खास जानकारी वाले पैनल में कंट्रास्ट की समस्याएं

खास जानकारी पाने के लिए:

1. सीएसएस की खास जानकारी खोलें.
2. खास जानकारी कैप्चर करें.
3. रंग सेक्शन खोलें. इसके बाद, स्क्रोल करके कंट्रास्ट से जुड़ी समस्याओं पर जाएं और अगर कोई समस्या है, तो उस पर क्लिक करें.

4. कंट्रास्ट से जुड़ी समस्याएं टेबल में, किसी एलिमेंट पर कर्सर घुमाएं और उसके बगल में मौजूद लिंक पर क्लिक करें.

   

5. कम कंट्रास्ट वाले टेक्स्ट को ठीक करें सेक्शन में बताए गए तरीके से समस्या को ठीक करें.

(झलक देखें) समस्याएं टैब में कंट्रास्ट की समस्याएं

ध्यान दें: यह झलक दिखाने की सुविधा है, जो डिफ़ॉल्ट रूप से बंद होती है.

समस्याओं की सूची पाने के लिए:

1. समस्याएं टैब में जाकर, कंट्रास्ट की समस्याओं की शिकायत करने की सुविधा चालू करें:
   1. सेटिंग > प्रयोग के तौर पर खोलें.
   2. फ़िल्टर बार में, contrast issue खोजें.
   3. 'समस्याएं' पैनल के ज़रिए, कंट्रास्ट की समस्या की अपने-आप रिपोर्ट करने की सुविधा चालू करें को चुनें.
   4. सबसे ऊपर मौजूद प्रॉम्प्ट में, DevTools फिर से लोड करें पर क्लिक करें.
2. 'समस्याएं' टैब खोलें.

3. DevTools में कंट्रास्ट की समस्याओं को बड़ा करें. इसके बाद, एलिमेंट की टेबल को बड़ा करें और एलिमेंट के बगल में दिए गए किसी लिंक पर क्लिक करें.

   

4. कम कंट्रास्ट वाले टेक्स्ट को ठीक करें सेक्शन में बताए गए तरीके से समस्या को ठीक करें.

लाइटहाउस रिपोर्ट में कंट्रास्ट की समस्याएं

रिपोर्ट चलाने के लिए:

1. DevTools में ही, ज़्यादा टैब > लाइटहाउस खोलें.
2. इन सेटिंग की मदद से लाइटहाउस रिपोर्ट जनरेट करें:
   • मोड: नेविगेशन (डिफ़ॉल्ट)
   • कैटगरी: सुलभता
   • डिवाइस: डेस्कटॉप
3. पेज लोड का विश्लेषण करें पर क्लिक करें और रिपोर्ट जनरेट करने के लिए Lighthouse का इंतज़ार करें.
4. नीचे कंट्रास्ट सेक्शन तक स्क्रोल करें और एलिमेंट की सूची में, उस एलिमेंट के लिंक पर क्लिक करें जिस पर असर पड़ा है.
5. कम कंट्रास्ट वाले टेक्स्ट को ठीक करें सेक्शन में बताए गए तरीके से समस्या को ठीक करें.

कम कंट्रास्ट वाले टेक्स्ट की समस्या ठीक करना

कम कंट्रास्ट वाली समस्या को ठीक करने के लिए:

1. कंट्रास्ट से जुड़ी समस्या ढूंढें और सीएसएस की खास जानकारी पैनल, समस्याएं टैब या लाइटहाउस रिपोर्ट पर जाकर, किसी ऐसे एलिमेंट के लिंक पर क्लिक करें जिस पर असर पड़ा है. DevTools आपको एलिमेंट पैनल पर ले जाता है और उससे जुड़ा एलिमेंट चुनता है. उदाहरण के लिए, इस डेमो पेज पर, सबसे पहले h1.line1 एलिमेंट पर असर पड़ा है.

2. DevTools के सबसे ऊपर दाएं कोने में मौजूद जांच करें पर क्लिक करें और व्यूपोर्ट में एलिमेंट पर कर्सर घुमाएं. DevTools इस एलिमेंट के लिए एक टूलटिप दिखाता है.

   

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

3. एलिमेंट के टेक्स्ट के रंग की जानकारी के बगल में मौजूद कलर पिकर खोलें. इसके बाद, कलर पिकर में जाकर, कंट्रास्ट अनुपात सेक्शन को बड़ा करें.

   

   कलर पिकर से पता चलता है कि कंट्रास्ट का अनुपात, WebAIM के दिशा-निर्देशों के AA या AAA लेवल के मुताबिक नहीं है.

4. एएए लेवल के बगल में मौजूद, सुझाए गए रंग का इस्तेमाल करें बटन पर क्लिक करें. कलर पिकर, टेक्स्ट के उस रंग को लागू करता है जो कंट्रास्ट अनुपात से जुड़े दिशा-निर्देशों के मुताबिक होता है.

   

5. इसके अलावा, मैन्युअल तरीके से कोई रंग चुनने के लिए, शेड की झलक में दिखने वाले सर्कल को खींचें और छोड़ें. AA या AAA लेवल के अंदर बने रहने के लिए, सबसे ऊपर या सबसे नीचे वाली लाइन के नीचे कोई रंग चुनें.

   

6. इसी तरह, सीएसएस की खास जानकारी पैनल, समस्याएं टैब या लाइटहाउस रिपोर्ट की मदद से, कंट्रास्ट की सभी समस्याओं को ठीक करें.

बदलावों को सेव करें

DevTools में किए गए बदलावों को सेव करने के लिए:

• सीएसएस के सभी बदलावों को एक साथ कॉपी करें और उन्हें अपने कोड में चिपकाएं
• ऐसा फ़ाइल फ़ोल्डर सेट अप करें जिसकी मदद से, DevTools सीधे आपके सोर्स में फ़ाइलें सेव कर सके.

आगे क्या करना है?

ज़्यादा जानें:

• सामान्य तौर पर सुलभता जानना
• खास तौर पर, सुलभता रंग और कंट्रास्ट