थीम के लिए पहुंच-क्षमता

इस सेक्शन में भी

• थीम इमेज में वैकल्पिक टेक्स्ट जोड़ना

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

नीचे दिए गए दिशानिर्देश Web Content Accessibility Guidelines (WCAG) को ध्यान में रखकर बनाया गए थें. चूंकि एक सुलभ वेबसाइट बनाते समय विचार करने के लिए कई कारक हैं, केवल नीचे दिए गए दिशानिर्देशों की गारंटी नहीं है कि आपका ऑनलाइन स्टोर पूरी तरह से सुलभ है. आप WCAG वेबसाइट पर जाकर या नीचे सूचीबद्ध संसाधनों को देखकर वेब पहुंच के बारे में अधिक जान सकते हैं.

पाठ की पहुंच मे आसानी

यह महत्वपूर्ण है कि आपके ऑनलाइन स्टोर पर पाठ उन ग्राहकों के लिए पठनीय हो, जो नेत्रहीन हैं या जिन्हें पाठ के घने खंड पढ़ने में कठिनाई होती है.

युक्ति

और वीडियो देखने के लिए, हमारे YouTube चैनल पर जाएं.

रंग कंट्रास्ट

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

नीचे दिए गए उदाहरण में, पाठ का कंट्रास्ट अनुपात इसकी पृष्ठभूमि की तुलना में 2.4:1 है और कुछ ग्राहकों के लिए इसे पढ़ना मुश्किल है.

अगले उदाहरण में, पाठ में कंट्रास्ट अनुपात 4.8:1 है और कई ग्राहकों के लिए इसे पढ़ना आसान है.

मुख्य भाग के टेक्स्ट, शीर्षक, लिंक, और फ़ॉर्म फ़ील्ड समेत, सभी टेक्स्ट के कंट्रास्ट का परीक्षण करें. आगे दिए गए दिशानिर्देशों का पालन करें:

• बॉडी पाठ और बटन पाठ के रंग की पृष्ठभूमि के मुकाबले कम से कम 4.5: 1 का कंट्रास्ट अनुपात है.
• शीर्षक और अन्य बड़े टेक्स्ट (जिसका फ़ॉन्ट आकार 24 px और इससे अधिक हो) का कंट्रास्ट अनुपात इसकी पृष्ठभूमि के मुकाबले कम से कम 3:1 होता है.
• स्लाइड शो, बैनर और वीडियो सहित इमेज के सभी टेक्स्ट के रंग में इसकी पृष्ठभूमि के प्रति पर्याप्त कंट्रास्ट अनुपात है. बड़े टेक्स्ट के लिए (फ़ॉन्ट आकार 24 px और इससे अधिक) के लिए, कंट्रास्ट कम से कम 3:1 है. छोटे टेक्स्ट के लिए, कंट्रास्ट कम से कम 4.5:1 है.
• इनपुट सीमाओं और आइकन सहित गैर-पाठ तत्वों का रंग इसकी पृष्ठभूमि के विपरीत कम से कम 3: 1 का अनुपात है.

युक्ति

कुछ थीम में, आप टेक्स्ट का कंट्रास्ट और पठनीयता बेहतर करने के लिए टेक्स्ट और इमेज के बीच एक रंग ओवरले रख सकते हैं.

पाठ का शीर्षक

जब आप rich text editor के साथ अपने पेज में शीर्षक जोड़ते हैं, तो उन्हें अनुक्रमिक क्रम (1 - 6) में रखना महत्वपूर्ण है. हेडिंग का उपयोग सहायक तकनीकों द्वारा किया जाता है ताकि यह सूचित किया जा सके कि पेज सामग्री कैसे व्यवस्थित है. स्तरों पर लंघन, जैसे कि शीर्ष स्तर 2 के बाद शीर्ष स्तर 4, उपयोगकर्ताओं को भ्रमित कर सकता है. निम्नलिखित दिशानिर्देश का उपयोग करें:

• शीर्षक का इस्तेमाल ऑर्डर में किया जाता है और स्तरों पर छोड़ा नहीं जाता है.

टेक्स्ट का आकार और पंक्तिबद्ध करना

जब आप अपनी थीम की टाइपोग्राफ़िक सेटिंग संपादित करें, तो सुनिश्चित करें कि आपका टेक्स्ट इतना बड़ा हो कि ग्राहक उसे सुविधाजनक ढंग से पढ़ सकें.

पाठ में शब्दों और अक्षरों के बीच लगातार अंतर होना चाहिए जिससे इसे पढ़ने में आसानी हो. नीचे दिए गए उदाहरण में पाठ पंक्तिबद्ध उचित है, जो शब्दों के बीच असंगत अंतर पैदा करता है.

अगले उदाहरण में, टेक्स्ट पंक्तिबद्ध बाईं ओर पंक्तिबद्ध है, जो शब्दों के बीच एक समान स्पेस बनाता है.

पाठ के आकार और पंक्तिबद्ध को कस्टमाइज़ करते समय निम्नलिखित दिशानिर्देशों का उपयोग करें:

• बॉडी पाठ के लिए न्यूनतम फ़ॉन्ट आकार 16 px के बराबर है.
• पाठ पंक्तिबद्ध उचित नहीं है. उचित पाठ शब्दों के बीच असंगत अंतर पैदा करता है.

टिप्पणी

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

टेक्स्ट लिंक

जब आप अपने पाठ में लिंक जोड़ते हैं, तो सुनिश्चित करें कि उन्हें आपके सभी ग्राहकों द्वारा पहचाना जा सकता है. क्योंकि कुछ ग्राहक को रंग देखने में परेशानी होती है आप नियमित पाठ से लिंक को अलग करने के लिए अकेले रंग में बदलाव पर भरोसा नहीं कर सकते. नीचे दिए गए उदाहरण में, डिस्कवर हमारे कहानी पाठ को रेखांकित किया गया है ताकि यह पाठ को लिंक करने के लिए रंग में परिवर्तन पर निर्भर न हो:

यदि आप अपनी थीम की स्टाइलशीट को संपादित करते हैं, तो सुनिश्चित करें कि आप पाठ लिंक स्टाइलं को नहीं निकलाते हैं. निम्नलिखित दिशानिर्देश का उपयोग करें:

• टेक्स्ट के लिंक या तो अंडरलाइन किए हुए हों या उनमें नियमित टेक्स्ट से अलग करने वाली कोई दिखाई देने वाली विशेषता हो.

इमेज के लिए वैकल्पिक टेक्स्ट

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

आप Shopify व्यवस्थापक से अपने उत्पाद इमेज में ऑल्ट टेक्स्ट जोड़सकते हैं. आप थीम एडिटर से अपने विषय में अन्य छवियों के लिए ऑल्ट टेक्स्ट जोड़सकते हैं.

जब आप इमेज में वैकल्पिक पाठ जोड़ते हैं, तो अच्छी चीज़ यह है कि आप किसी इमेज के बारे में ऐसे व्यक्ति को बताने जा रहे हैं, जिसकी आंखें बंद हैं. उनके दिमाग में इमेज बनाने के लिए उनकी मदद करें. इमेज का वर्णन करने का आपका तरीका आपके वेब पेज के संदर्भ पर भी निर्भर करता है. उदाहरण के लिए, अगर आपका व्यवसाय स्टोर आउटडोर उपकरण देने वाले स्टोर के बजाय ट्रैवल एजेंसी है, तो आप इमेज का अलग तरह से वर्णन कर सकते हैं. निम्नलिखित इमेज पर विचार करें:

ट्रैवल एजेंसी के लिए, हो सकता है कि आप उस देश और क्षेत्र का संदर्भ लें, जहां दो दोस्त यात्रा कर रहें हैं और उस समुद्र या बीच के नाम का संदर्भ लें, जिसे वे देख रहे हैं. दूसरी तरफ, आउटडोर उपकरण देने वाले स्टोर के लिए, हो सकता है कि आप दो दोस्तों के बैकपैक्स के ब्रैंड और सुविधाओं पर ध्यान केंद्रित करें.

अगर आपका व्यवसाय ट्रैवल एजेंसी है, तो "दो दोस्त समुद्र के सामने खड़े हैं" एक वैकल्पिक पाठ का ख़राब उदाहरण हो सकता है. इसी तरह की एजेंसी के लिए, "दो दोस्त लैगोस, पुर्तगाल, एक खिलती हुई धूप वाले दिन में प्राया डो कैमियो के सैंडी कोव को देख रहे है" एक अच्छे alt पाठ का उदाहरण हो सकता है.

स्लाइड शो और वीडियो पहुंच

अपने ऑनलाइन स्टोर में वीडियो जोड़ते समय, सुनिश्चित करें कि आपने ऐसे ग्राहकों की आवश्यकताओं पर विचार किया है, जिन्हें कम दिखाई देता है, जिन्हें सुनाई नहीं देता या सुनने में कठिनाई होती है या जो वेस्टिब्यूलर विकार से ग्रसित हैं.

इनमें से कुछ ग्राहक स्क्रीन पाठकों की भाषण क्षमता पर भरोसा करते हैं, जो वेब पेज की सामग्री को जोर से पढ़ते हैं. वीडियो और संगीत से अतिरिक्त ऑडियो, खासकर जब यह अप्रत्याशित है, इस अनुभव को मुश्किल बना सकता है. जो ग्राहक सुन नहीं सकते हैं या सुनने में कठिनाई आती हैं, उनके लिए अपने वीडियो में बंद अनुशीर्षक को जोड़ना एक अच्छा विचार है, ताकि वे ग्राहक सामग्री तक पहुंच सकें.

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

स्लाइडशो

अपने ऑनलाइन स्टोर में स्लाइड शो जोड़ते समय निम्न दिशानिर्देशों का इस्तेमाल करें:

• स्लाइड शो अपने आप नहीं चलते.
• यदि स्लाइडशो ऑटोमेटिकली चलाते हैैं, तब सेटिंग शामिल करते हैं जिसका उपयोग ग्राहक स्लाइड शो को रोकने या बंद करने के लिए कर सकते हैं.

वीडियो

अपने ऑनलाइन स्टोर में विडियो जोड़ते समय निम्न दिशानिर्देशों का इस्तेमाल करें:

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

ये दिशानिर्देश उन वीडियो पर भी लागू होते हैं जो स्लाइड शो में हैं.

कीबोर्ड सहायता

दृष्टि या मोटर से क्षतिग्रस्त ग्राहक कीबोर्ड का इस्तेमाल नेविगेट करने और कार्यों को ऑनलाइन पूरा करने के लिए कर सकते हैं. ये ग्राहक यह देखने के लिए एक दृश्य संकेतक पर निर्भर होते हैं कि उनके कीबोर्ड का फोकस किसी वेब पेज पर कहां है. नीचे दिए गए उदाहरण में, ईमेल फ़ील्ड में दृश्य फ़ोकस संकेतक है:

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

• जब वे कीबोर्ड फ़ोकस होते हैं तब सभी इंटरैक्टिव पेज तत्वों में एक स्पष्ट दृश्य संकेतक होता है. इन तत्वों में लिंक, बटन और फ़ॉर्म फ़ील्ड शामिल हैं.

संसाधन

इस लेख में वेब पहुंच की चर्चा किए गए विषयों के लिए के बारे में अधिक जानने के लिए निम्न संसाधन देखें.

रंग कॉन्ट्रास्ट संसाधन

• गुड कंट्रास्ट के साथ रंग वेब एक्सेसिबिलिटी इनिशिएटिव का एक लेख
• कंट्रास्ट अनुपात एक ऑनलाइन टूल जिसका उपयोग आप दो रंगों के बीच विपरीत अनुपात का पता लगाने के लिए कर सकते हैं
• रंग कंट्रास्ट एनालाइज़र, Paciello Group द्वारा डेवलप किया गया, डाउनलोड करने के लिए कंट्रास्ट अनुपात ऐप्लिकेशन

टेक्स्ट संसाधन

• 16 पिक्सल फ़ॉन्ट का आकार: बॉडी कॉपी के लिए कम इज़ ए कॉस्टली मिस्टेकस्मैशिंग मैगज़ीन का एक लेख
• टेक्स्ट पंक्तिबद्ध, Web AIM का एक लेख
• लिंक की मौजूदगी, Web AIM का आलेख
• सामग्री संरचना के लिए शीर्षक Web AIM से एक लेख का उपयोग करना

वैकल्पिक पाठ संसाधन

• Text to Speech, वेब एक्सेसेबिलिटी इनिशिएटिव का एक लेख
• Alternative Text, वेब AIM का एक लेख
• वैकल्पिक टेक्स्ट लिखते समय विचार, Medium पर एक लेख.

स्लाइड शो और वीडियो संसाधन

• एक प्राइमर से वेस्टिबुलर डिसऑर्डरA11Y Project का एक लेख
• Text to Speech, वेब एक्सेसेबिलिटी इनिशिएटिव का एक लेख
• वीडियो कैप्शन वेब एक्सेसिबिलिटी इनिशिएटिव का एक लेख
• स्वचालित कैप्शन का इस्तेमाल करें, YouTube सहायता का आलेख
• कैप्शन और उपशीर्षक, Vimeo सहायता केंद्र का एक लेख

कीबोर्ड सहायता संसाधन

• Keyboard Compatibility, वेब एक्सेबिलिटी इनिशिएटिव का एक लेख
• फोकस का परिचय, Google डेवलपर्स का एक आलेख