मदद
लॉग इन करें

थीम के लिए एक्सेसिबिलिटी

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

नीचे दिए गए दिशानिर्देश वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देश (WCAG) को ध्यान में रखकर बनाए गए हैं। एक एक्सेसिबल वेबसाइट बनाते समय कई बातों पर विचार करना होता है, इसलिए सिर्फ़ नीचे दिए गए दिशानिर्देशों का पालन करने से यह गारंटी नहीं मिलती कि आपका ऑनलाइन स्टोर पूरी तरह से एक्सेसिबल है। आप WCAG वेबसाइट पर जाकर या नीचे सूचीबद्ध संसाधन देखकर वेब एक्सेसिबिलिटी के बारे में ज़्यादा जान सकते हैं।

इस पेज पर

टेक्स्ट एक्सेसिबिलिटी

यह ज़रूरी है कि आपके ऑनलाइन स्टोर पर मौजूद टेक्स्ट उन ग्राहकों के लिए पढ़ने योग्य हो, जिन्हें कम दिखाई देता है या जिन्हें टेक्स्ट के बड़े ब्लॉक पढ़ने में कठिनाई होती है।

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

जब आप अपने ऑनलाइन स्टोर के लिए रंग एडिट करते हैं, तो पक्का करें कि आपका सारा टेक्स्ट उन ग्राहकों के लिए एक्सेसिबल हो जो वर्णांध हैं या जिन्हें किसी और तरह से कम दिखाई देता है। ये ग्राहक एक चीज़ को दूसरी से अलग पहचानने के लिए पर्याप्त रंग कंट्रास्ट पर निर्भर रहते हैं। आप अपने स्टोर के अलग-अलग हिस्सों के कंट्रास्ट की जांच करने के लिए, एक ऑनलाइन कंट्रास्ट अनुपात टूल का इस्तेमाल कर सकते हैं।

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

हल्के ग्रे रंग के टेक्स्ट का एक ब्लॉक और एक सॉलिड सफ़ेद बैकग्राउंड.

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

गहरे ग्रे रंग के टेक्स्ट का एक ब्लॉक और एक सॉलिड सफ़ेद बैकग्राउंड.

बॉडी टेक्स्ट, हेडिंग, लिंक और फ़ॉर्म फ़ील्ड सहित सभी टेक्स्ट के कंट्रास्ट की जांच करें। निम्नलिखित दिशानिर्देशों का इस्तेमाल करें:

  • बॉडी टेक्स्ट और बटन टेक्स्ट के रंग का उसके बैकग्राउंड के मुकाबले कम से कम 4.5:1 का कंट्रास्ट अनुपात होना चाहिए।
  • हेडिंग और दूसरे बड़े टेक्स्ट (फ़ॉन्ट साइज़ 24 पिक्सल और उससे ज़्यादा) के रंग का उसके बैकग्राउंड के मुकाबले कम से कम 3:1 का कंट्रास्ट अनुपात होना चाहिए।
  • स्लाइड शो, बैनर और वीडियो सहित इमेज के ऊपर मौजूद सभी टेक्स्ट के रंग का उसके बैकग्राउंड के मुकाबले पर्याप्त कंट्रास्ट अनुपात होना चाहिए। बड़े टेक्स्ट (फ़ॉन्ट साइज़ 24 पिक्सल और उससे ज़्यादा) के लिए, कंट्रास्ट कम से कम 3:1 होना चाहिए। छोटे टेक्स्ट के लिए कंट्रास्ट कम से कम 4.5:1 होना चाहिए।
  • इनपुट बॉर्डर और आइकन सहित गैर-टेक्स्ट एलिमेंट के रंग का उसके बैकग्राउंड के मुकाबले कम से कम 3:1 का कंट्रास्ट अनुपात होना चाहिए।

टेक्स्ट हेडिंग

जब आप रिच टेक्स्ट एडिटर का इस्तेमाल करके अपने पेज पर हेडिंग जोड़ते हैं, तो उन्हें क्रमिक क्रम (1 - 6) में रखना ज़रूरी है। पेज की सामग्री को कैसे व्यवस्थित किया गया है, यह बताने के लिए सहायक तकनीक द्वारा हेडिंग का इस्तेमाल किया जाता है। लेवल को छोड़ना, जैसे कि हेडिंग लेवल 2 के बाद हेडिंग लेवल 4 का इस्तेमाल करना, उपयोगकर्ताओं के लिए भ्रमित करने वाला हो सकता है। निम्नलिखित दिशानिर्देश का इस्तेमाल करें:

  • हेडिंग का इस्तेमाल क्रमिक क्रम में किया जाता है और लेवल को छोड़ा नहीं जाता है।

टेक्स्ट साइज़ और अलाइनमेंट

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

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

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

अगले उदाहरण में, टेक्स्ट अलाइनमेंट बायां-अलाइन है, जिससे शब्दों के बीच एक जैसा स्पेस बनता है।

बायां-अलाइन किया गया टेक्स्ट का एक ब्लॉक। हर शब्द के बीच एक जैसा स्पेस है।

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

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

टेक्स्ट लिंक

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

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

अगर आप अपनी थीम की स्टाइल शीट एडिट करते हैं, तो यह पक्का करें कि आप टेक्स्ट लिंक स्टाइल को न हटाएं। इन दिशानिर्देशों का इस्तेमाल करें:

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

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

जब आप अपने ऑनलाइन स्टोर में इमेज जोड़ते हैं, तो यह ज़रूरी है कि आप उन्हें उन ग्राहकों के लिए एक्सेसिबल बनाएं जो नेत्रहीन हैं या जिनकी नज़र कमज़ोर है। आप हर इमेज का सटीक वर्णन करने वाला वैकल्पिक टेक्स्ट जोड़कर ऐसा कर सकते हैं। जो ग्राहक स्क्रीन रीडर का इस्तेमाल करते हैं, वे आपके ऑनलाइन स्टोर पर इमेज की सामग्री को समझने के लिए वैकल्पिक टेक्स्ट पर भरोसा करते हैं।

आप Shopify एडमिन से अपने प्रोडक्ट इमेज में वैकल्पिक टेक्स्ट जोड़ सकते हैं। आप थीम एडिटर से अपनी थीम में अन्य इमेज में वैकल्पिक टेक्स्ट जोड़ सकते हैं।

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

बैकपैक पहने दो दोस्त, एक-दूसरे के गले में बाहें डाले समुद्र को देख रहे हैं।

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

अगर आपका बिज़नेस एक ट्रैवल एजेंसी है, तो खराब वैकल्पिक टेक्स्ट का एक उदाहरण हो सकता है, "समुद्र के सामने दो लोग।" उसी एजेंसी के लिए, अच्छे वैकल्पिक टेक्स्ट का एक उदाहरण हो सकता है, "लागोस, पुर्तगाल में यात्रा कर रहे दो दोस्त, जो धूप वाले दिन Praia do Camilo के रेतीले कोव को देख रहे हैं।"

स्लाइड शो और वीडियो एक्सेसिबिलिटी

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

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

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

स्लाइड शो

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

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

वीडियो

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

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

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

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

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

एक ऑनलाइन स्टोर पर ग्राहक लॉगिन स्क्रीन, जो ईमेल और पासवर्ड के लिए फ़ॉर्म फ़ील्ड दिखाती है। ईमेल फ़ील्ड को नीले रंग से आउटलाइन किया गया है।

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

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

संसाधन

इस लेख में बताए गए विषयों पर वेब एक्सेसिबिलिटी के बारे में ज़्यादा जानने के लिए, निम्नलिखित संसाधनों को देखें।

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

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

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

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

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

इस सेक्शन में