सहयोगी: डिजाइनरों के लिए यूआई अभिगम्यता चेकलिस्ट

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

सहायक तकनीक:

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

स्क्रीन रीडर्स:

स्क्रीन रीडर एक्सेसिबिलिटी सॉफ्टवेयर, जैसे Android पर Google का TalkBack, iOS पर Apple का VoiceOver, और डेस्कटॉप पर फ्रीडम साइंटिफिक का JAWS। स्क्रीन रीडर दृश्य और अदृश्य वैकल्पिक पाठ सहित ऑन-स्क्रीन पाठ और तत्वों (जैसे बटन) को जोर से पढ़ते हैं।

पाठ और टाइपोग्राफी:

• पाठ और पाठ की छवियों की दृश्य प्रस्तुति में कम से कम 4.5:1 (स्तर AA) का पर्याप्त कंट्रास्ट अनुपात होता है।
• ऐसे फोंट का उपयोग करें जो पढ़ने में आसान हों, और सजावटी या घसीट फोंट से बचें।
• सभी बड़े अक्षरों का उपयोग करने से बचें क्योंकि यह डिस्लेक्सिया वाले लोगों के लिए पाठ को पढ़ने में कठिन बना देता है।
• पठनीयता में सुधार के लिए उपयुक्त फ़ॉन्ट आकार और लाइन स्पेसिंग का उपयोग करें।
• अर्थ संप्रेषित करने के लिए अकेले रंग का उपयोग करने से बचें।

• सूचना देने के एकमात्र तरीके के रूप में रंग पर निर्भर न रहें।
• सुनिश्चित करें कि पाठ और पृष्ठभूमि के रंगों के बीच पर्याप्त कंट्रास्ट है। यहाँ एक सहायक उपकरण है:https://webaim.org/resources/contrastchecker/
• कलर ब्लाइंडनेस सिमुलेटर का उपयोग करके अपने डिजाइन का परीक्षण करें ताकि यह सुनिश्चित हो सके कि यह कलर ब्लाइंडनेस वाले लोगों के लिए सुलभ है।

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

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

• सभी ऑडियो और वीडियो सामग्री के लिए ट्रांसक्रिप्ट या कैप्शन प्रदान करें।
• सुनिश्चित करें कि ऑडियो और वीडियो नियंत्रण सुलभ और उपयोग में आसान हैं।
• मल्टीमीडिया सामग्री के लिए वैकल्पिक प्रारूप प्रदान करें (उदाहरण के लिए, वीडियो सामग्री के लिए ऑडियो विवरण)।
• देवों के लिए: छवियों और मल्टीमीडिया के लिए एरिया-लेबल और ऑल्ट टैग का उपयोग करें ताकि यह वर्णन किया जा सके कि वे क्या हैं। शब्दार्थ के आधार पर, यह सुनिश्चित करेगा कि स्क्रीन रीडर उन्हें छोड़े नहीं।
• ऑल्ट टेक्स्ट विज़ुअल UI को टेक्स्ट-आधारित UI में बदल देता है। ऑल्ट टेक्स्ट कोड में एक छोटा लेबल (125 वर्ण तक) है जो उन उपयोगकर्ताओं के लिए एक छवि का वर्णन करता है जो उन्हें नहीं देख सकते।

• सुनिश्चित करें कि डिजाइन मोबाइल उपकरणों के लिए अनुकूलित है।
• यह सुनिश्चित करने के लिए उत्तरदायी डिज़ाइन का उपयोग करें कि लेआउट विभिन्न स्क्रीन आकारों के अनुकूल हो।
• सुनिश्चित करें कि स्पर्श लक्ष्य इतने बड़े हैं कि उन्हें आसानी से सक्रिय किया जा सके. Android के लिए क्षेत्र कम से कम 44x44 पिक्सेल और 48x48dp होना चाहिए। अधिक विवरण यहाँ

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

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

आगे पढ़ना और संसाधन:

https://m2.material.io/design/usability/accessibility.html

https://design.gitlab.com/accessibility/keyboard-only

https://web.dev/focus/

https://www.sarasoueidan.com/blog/focus-indicators/