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

Sofia Emelianova

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

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

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

कम कंट्रास्ट वाला टेक्स्ट ढूंढना

कम कंट्रास्ट वाला टेक्स्ट ढूंढने के लिए:

1. अपने पेज पर DevTools खोलें.

2. तीन पैनल में से किसी एक का इस्तेमाल करके, कंट्रास्ट से जुड़ी सभी समस्याएं देखें:

   • सीएसएस की खास जानकारी
   • (प्रीव्यू) समस्याएं
   • Lighthouse

हमारा CodePen खोलकर, प्रयोग किया जा सकता है.

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

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

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

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

   

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

(प्रीव्यू) समस्याएं टैब में, कंट्रास्ट से जुड़ी समस्याएं

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

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

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

   

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

Lighthouse की रिपोर्ट में, कंट्रास्ट से जुड़ी समस्याएं

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

1. DevTools में, ज़्यादा टैब > Lighthouse खोलें.

2. Lighthouse की रिपोर्ट जनरेट करने के लिए, ये सेटिंग इस्तेमाल करें:

   • मोड: नेविगेशन (डिफ़ॉल्ट)
   • कैटगरी: सुलभता
   • डिवाइस: डेस्कटॉप

   

3. पेज लोड होने की प्रोसेस का विश्लेषण करें पर क्लिक करें और Lighthouse के रिपोर्ट जनरेट करने का इंतज़ार करें.

4. कंट्रास्ट सेक्शन पर जाएं. एलिमेंट की सूची में से, असर पड़े किसी एलिमेंट के लिंक पर क्लिक करें.

   

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

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

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

1. कंट्रास्ट से जुड़ी कोई समस्या ढूंढें और असर पड़े किसी एलिमेंट के लिंक पर क्लिक करें. यह लिंक आपको सीएसएस की खास जानकारी वाले पैनल, समस्याएं टैब या Lighthouse रिपोर्ट में मिलेगा. DevTools, आपको एलिमेंट पैनल पर ले जाता है और उससे जुड़ा एलिमेंट चुनता है.

   

   उदाहरण के लिए, हमारे ऐक्सेस न किए जा सकने वाले डेमो CodePen में, असर पड़ा पहला एलिमेंट h1.line1 है.

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

   

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

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

   

   कलर पिकर से पता चलता है कि कंट्रास्ट रेशियो, WebAIM की गाइडलाइन के AA या AAA लेवल की ज़रूरी शर्तें पूरी नहीं करता.

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

   

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

   

6. इसी तरह, कंट्रास्ट से जुड़ी वे सभी समस्याएं ठीक करें जो आपको सीएसएस की खास जानकारी वाले पैनल, समस्याएं टैब या Lighthouse रिपोर्ट में मिली हैं.

बदलाव सेव करना

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

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

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

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

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