CMS: बेस्ट एक्सेसिबिलिटी प्रैक्टिसेस

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

इमेज, वीडियो और वेक्टर शेप्स के लिए कॉन्टेक्स्ट देने के लिए ऑल्ट टेक्स्ट बहुत ज़रूरी है। ऑल्ट टेक्स्ट लिखते समय, मीडिया का स्पष्ट और संक्षिप्त रूप से वर्णन करें, जैसे कि AI या स्क्रीन रीडर इसकी व्याख्या कर रहे हों। ऑल्ट टेक्स्ट को 125 कैरेक्टर से कम रखें और “image of” जैसे वाक्यांशों से बचें। प्रभावी ऑल्ट टेक्स्ट लिखने के बारे में अधिक विस्तृत गाइड के लिए, एक्सेसिबिलिटी: अपनी इमेज और गैलरी तैयार करना देखें।

हम हर मीडिया आइटम के लिए ऑल्ट टेक्स्ट के रूप में उपयोग करने के लिए आपके CMS कलेक्शन में एक टेक्स्ट फील्ड बनाने की सलाह देते हैं। अपने कलेक्शन को व्यवस्थित रखने के लिए, इस फील्ड को उस मीडिया फील्ड के बगल में रखें जिसे यह दर्शाता है और इसे स्पष्ट नाम दें, जैसे कि “Alt text [image/gallery name]”।

वीडियो एलिमेंट्स के लिए, डेटासेट कनेक्शन पैनल में ऑल्ट टेक्स्ट प्रॉपर्टी को Video description कहा जाता है। वेक्टर इमेजेस या शेप्स के लिए, Alt text connects to विकल्प का इस्तेमाल करें। सेक्शन्स, स्ट्रिप्स, कॉलम्स या रिपीटर आइटम्स (सिर्फ Wix Editor) में बैकग्राउंड इमेजेस के लिए, Background alt text connects to का इस्तेमाल करें।

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

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

जब आप अपने एडिटर में इमेज को डेटासेट से कनेक्ट करते हैं, तो Alt text connects to फील्ड पर क्लिक करें और आपके द्वारा बनाए गए ऑल्ट टेक्स्ट फील्ड को चुनें। इससे स्क्रीन रीडर इमेज और उसके उद्देश्य का वर्णन कर पाते हैं, जिससे आपकी साइट अधिक समावेशी (inclusive) बन जाती है।

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

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

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

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

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

आप उन बटन में एक्सेसिबल नाम (accessible names) जोड़ सकते हैं जो आपके CMS से कनेक्ट होते हैं। एक्सेसिबल नाम ऑल्ट टेक्स्ट की तरह काम करते हैं लेकिन वे बटन के लिए विशिष्ट होते हैं। वे स्क्रीन रीडर को यह बताने में मदद करते हैं कि बटन क्या करता है या वह कहाँ ले जाता है। बटन में एक्सेसिबल नाम जोड़ने से आपकी साइट की एक्सेसिबिलिटी में सुधार होता है और सभी विजिटर्स को आपके कंटेंट को आसानी से नेविगेट करने में मदद मिलती है।

जब आप किसी बटन को अपने डेटासेट से कनेक्ट करते हैं, तो एक्सेसिबल नाम को अपने कलेक्शन के 'Text' फील्ड से कनेक्ट करने के लिए Accessible name connects to ड्रॉप-डाउन का उपयोग करें। यह फील्ड बटन के एक्शन या डेस्टिनेशन का स्पष्ट और संक्षिप्त वर्णन करना चाहिए।

उदाहरण के लिए, “यहाँ क्लिक करें” जैसे सामान्य नाम के बजाय, “हमारी सेवाओं के बारे में और पढ़ें” या “अपना आवेदन सबमिट करें” का उपयोग करें।

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

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

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

स्टैटिक पेजों पर, अगर विजिटर्स 'Next/Previous item' बटन पर क्लिक कर सकते हैं जिससे CMS से जुड़े एलिमेंट्स का कंटेंट बदलता है, तो डिस्प्ले होने वाले एलिमेंट्स को एक सिंगल कंटेनर से जोड़ें। फिर कंटेनर के ARIA (Accessible Rich Internet Applications) एट्रिब्यूट्स सेट करें ताकि जब विजिटर्स बटन पर क्लिक करें, तो स्क्रीन रीडर्स बदले हुए कंटेंट की घोषणा कर सकें।

आपको केवल उन एलिमेंट्स को अटैच करने की ज़रूरत है जो बदलते हुए कंटेंट को डिस्प्ले करते हैं। 'Next/Previous item' बटन को कंटेनर से जोड़ने की ज़रूरत नहीं है।

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

यह तब काम आ सकता है जब विजिटर्स उन इनपुट्स पर क्लिक करते हैं जो कंटेंट को फ़िल्टर करते हैं या कंटेंट इकट्ठा करते हैं। जब भी विजिटर्स के पास डिस्प्ले होने वाले आइटम काउंट को बदलने का विकल्प हो, तो आइटम काउंट दिखाने वाले टेक्स्ट को एक कंटेनर से जोड़ें ताकि स्क्रीन रीडर्स इस बदलाव की घोषणा कर सकें।

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

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

पैजिनेशन बार को अधिक एक्सेसिबल बनाने के लिए, बार और उसके बटन दोनों में एक्सेसिबल नाम जोड़ें। ये नाम स्क्रीन पर दिखाई नहीं देते हैं लेकिन स्क्रीन रीडर्स के लिए ज़रूरी हैं, जिससे यूज़र्स को पेजों पर नेविगेट करने का तरीका समझने में मदद मिलती है। उदाहरण के लिए, आप पैजिनेशन बार को "Page navigation" नाम दे सकते हैं और बटन को "Next page", "Previous page" जैसे स्पष्ट नाम दे सकते हैं, या उन्हें अपने कंटेंट के आधार पर कस्टमाइज़ कर सकते हैं (जैसे "Next story" या "Previous product")।

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