CMS: एक्सेसिबिलिटी के बेहतरीन तरीके

अपनी साइट को सभी विज़िटर्स के लिए इस्तेमाल में आसान बनाने के लिए, अपने CMS (कंटेंट मैनेजमेंट सिस्टम) में एक्सेसिबिलिटी के बेहतरीन तरीके लागू करें। इनमें बटन के लिए एक्सेसिबल नाम जोड़ना, सभी मीडिया के लिए असरदार ऑल्ट टेक्स्ट इस्तेमाल करना और एलिमेंट्स को ARIA एट्रिब्यूट वाले सेक्शन या कंटेनर में रखना शामिल है। इन गाइडलाइंस का इस्तेमाल करने से हर कोई आपके कंटेंट को ज़्यादा आसानी से नेविगेट कर सकता है और उसके साथ इंटरैक्ट कर सकता है।

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

हमारा सुझाव है कि हर मीडिया आइटम के ऑल्ट टेक्स्ट के लिए, अपने CMS कलेक्शन में एक टेक्स्ट फ़ील्ड बनाएं। अपने कलेक्शन को व्यवस्थित रखने के लिए, इस फ़ील्ड को संबंधित मीडिया फ़ील्ड के पास रखें और इसे साफ़ नाम दें, जैसे “ऑल्ट टेक्स्ट [इमेज/गैलरी का नाम]”।

वीडियो एलिमेंट के लिए, डेटासेट कनेक्शन पैनल में ऑल्ट टेक्स्ट प्रॉपर्टी को  वीडियो डिस्क्रिप्शन कहा जाता है। वेक्टर इमेज या शेप के लिए,  ऑल्ट टेक्स्ट कनेक्ट्स टू ऑप्शन इस्तेमाल करें। सेक्शन, स्ट्रिप, कॉलम या रिपीटर आइटम (सिर्फ़ Wix Editor) में बैकग्राउंड इमेज के लिए,  बैकग्राउंड ऑल्ट टेक्स्ट कनेक्ट्स टू का इस्तेमाल करें।

ऐसी डेकोरेटिव इमेज और मीडिया के ऑल्ट टेक्स्ट को खाली छोड़ा जा सकता है जो कोई ज़रूरी जानकारी नहीं देते। ऐसा करने से स्क्रीन रीडर उन्हें स्किप कर सकते हैं और ध्यान भटकने की संभावना कम होती है।

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

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

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

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

एक्सप्रेशन की मदद से, आप स्टैटिक टेक्स्ट (जैसे "इसके बारे में और पढ़ें") को डायनामिक कलेक्शन फ़ील्ड की वैल्यू (जैसे "Willis McSmoot") के साथ जोड़ सकते हैं, ताकि हर इमेज का ऑल्ट टेक्स्ट अलग हो। इससे असिस्टिव टेक्नोलॉजी इस्तेमाल करने वाले विज़िटर इमेज का मकसद समझ सकते हैं।

कस्टम ऑल्ट टेक्स्ट बनाने के लिए एक्सप्रेशन इस्तेमाल करें: 

'इमेज' फ़ील्ड टाइप से कनेक्ट होने वाली गैलरी में हर इमेज के लिए ऑल्ट टेक्स्ट देना ज़रूरी है। इमेज के ऑल्ट टेक्स्ट के लिए अपने CMS कलेक्शन में खास तौर पर एक अलग 'टेक्स्ट' फ़ील्ड टाइप बनाएं। गैलरी को अपने डेटासेट से कनेक्ट करते समय, ऑल्ट टेक्स्ट्स कनेक्ट टू ड्रॉप-डाउन को संबंधित ऑल्ट टेक्स्ट फ़ील्ड से कनेक्ट करें। ऐसा करने से स्क्रीन रीडर गैलरी में मौजूद इमेज के डिस्क्रिप्शन बता सकते हैं, जिससे एक्सेसिबिलिटी बेहतर होती है।

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

आप अपने CMS से कनेक्ट होने वाले बटन में एक्सेसिबल नेम जोड़ सकते हैं। एक्सेसिबल नेम ऑल्ट टेक्स्ट की तरह काम करते हैं, लेकिन ये खास तौर पर बटन के लिए होते हैं। इनसे स्क्रीन रीडर यह बता सकते हैं कि बटन क्या करता है या कहां ले जाता है। बटन में एक्सेसिबल नेम जोड़ने से आपकी साइट की एक्सेसिबिलिटी बेहतर होती है और सभी विज़िटर आपके कंटेंट में आसानी से नेविगेट कर पाते हैं।

किसी बटन को अपने डेटासेट से कनेक्ट करते समय, एक्सेसिबल नेम कनेक्ट्स टू ड्रॉप-डाउन का इस्तेमाल करके एक्सेसिबल नेम को अपने कलेक्शन के किसी 'टेक्स्ट' फ़ील्ड से कनेक्ट करें। इस फ़ील्ड में बटन के एक्शन या डेस्टिनेशन के बारे में साफ़ और कम शब्दों में जानकारी होनी चाहिए।

उदाहरण के लिए, “क्लिक हियर” जैसे सामान्य नाम के बजाय “हमारी सेवाओं के बारे में और जानें” या “अपना एप्लिकेशन सबमिट करें” इस्तेमाल करें।

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

Studio एडिटर में 'लोड मोर' बटन जोड़ते समय, रिपीटर या गैलरी के नीचे मौजूद सभी चीज़ों को एक अलग सेक्शन में रखें। अगर आप किसी एलिमेंट को रिपीटर या गैलरी वाले सेक्शन में और उसके ठीक नीचे रखते हैं, तो 'लोड मोर' बटन पर क्लिक करने के बाद एलिमेंट एक-दूसरे पर ओवरलैप हो जाएंगे। इस ओवरलैप से विज़िटर को कंटेंट देखने और एक्सेस करने में परेशानी हो सकती है।

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

स्टैटिक पेज पर, अगर विज़िटर 'नेक्स्ट/प्रीवियस आइटम' बटन पर क्लिक करके CMS से कनेक्टेड एलिमेंट का कंटेंट बदल सकते हैं, तो कंटेंट दिखाने वाले एलिमेंट को एक ही कंटेनर से अटैच करें। इसके बाद, कंटेनर के ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशंस) एट्रिब्यूट सेट करें, ताकि विज़िटर के बटन पर क्लिक करने पर स्क्रीन रीडर बदले हुए कंटेंट की जानकारी दे सकें।

आपको सिर्फ़ उन एलिमेंट को अटैच करना है जो बदलता हुआ कंटेंट दिखाते हैं। 'नेक्स्ट/प्रीवियस आइटम' बटन को किसी कंटेनर से अटैच करने की ज़रूरत नहीं है।

अगर आप किसी टेक्स्ट एलिमेंट में डेटासेट के आइटम की गिनती दिखाते हैं और विजिटर किसी इनपुट एलिमेंट पर क्लिक करके आइटम की गिनती बदल सकते हैं, तो उस टेक्स्ट को कंटेनर से अटैच करें। फिर कंटेनर के ARIA (Accessible Rich Internet Applications) एट्रिब्यूट्स सेट करें, ताकि आइटम की गिनती बदलने पर स्क्रीन रीडर उसकी जानकारी दे सकें।

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

जब आपके पास कंटेंट फ़िल्टर करने के लिए सेट किए गए इनपुट एलिमेंट हों, तो डिफ़ॉल्ट रूप से विज़िटर के कोई ऑप्शन सिलेक्ट करते ही फ़िल्टर अप्लाई हो जाते हैं। आप ‘अप्लाई फ़िल्टर्स’ बटन जोड़कर इस व्यवहार को बदल सकते हैं।

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

पेजिनेशन बार को अधिक एक्सेसिबल बनाने के लिए, बार और उसके बटन—दोनों में एक्सेसिबल नाम जोड़ें। ये नाम स्क्रीन पर दिखाई नहीं देते, लेकिन स्क्रीन रीडर के लिए ज़रूरी होते हैं। इनसे यूज़र समझ पाते हैं कि पृष्ठों के बीच कैसे नेविगेट करना है। उदाहरण के लिए, आप पेजिनेशन बार को "पेज नेविगेशन" नाम दे सकते हैं और बटन को "अगला पृष्ठ" या "पिछला पृष्ठ" जैसे स्पष्ट नाम दे सकते हैं। आप अपने कंटेंट के हिसाब से इन्हें कस्टमाइज़ भी कर सकते हैं, जैसे "अगली स्टोरी" या "पिछला प्रोडक्ट"।

एक्सेसिबिलिटी से जुड़े आम सवालों के जवाब पाने के लिए नीचे क्लिक करें।