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

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

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

एक्सेसिबल वेब डिज़ाइन क्या है?

W3C के अनुसार :

वेब एक्सेसिबिलिटी का मतलब है कि वेबसाइट, टूल और टेक्नोलॉजी को डिज़ाइन और विकसित किया गया है ताकि विकलांग लोग उनका उपयोग कर सकें।

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

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

जैसे, वेब विकास को हमेशा विकलांग लोगों को वेब को देखने, समझने, नेविगेट करने या अन्यथा बातचीत करने की अनुमति देनी चाहिए। हालाँकि, आप किससे पूछते हैं, इसके आधार पर अक्षमताओं के प्रकार भिन्न होते हैं, W3C - जिम्मेदार वेब डिज़ाइन में अग्रणी - निम्नलिखित अक्षमताओं को वेब डेवलपर्स के लिए प्राथमिक चिंताओं के रूप में निर्दिष्ट करता है:

• श्रवण अक्षमता
• संज्ञानात्मक अक्षमता
• तंत्रिका संबंधी अक्षमता
• शारीरिक अक्षमता (कभी-कभी मोटर अक्षमता के रूप में संदर्भित)
• भाषण अक्षमता
• दृश्य अक्षमता

एक्सेसिबिलिटी क्यों?

सही काम करने के अलावा, सुलभ वेब सामग्री होने से उपयोगकर्ताओं और डिजाइनरों दोनों के लिए कई तरह के लाभ मिलते हैं:

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

2. सुलभ डिजाइन व्यवसायों और संगठनों के लिए बहुत अच्छा है। जैसा कि निंदक लगता है, एक सुलभ वेबसाइट का होना अनिवार्य रूप से एक बड़े वेबसाइट दर्शकों में तब्दील हो जाएगा। इसमें निश्चित रूप से अधिक बिक्री, अधिक उपयोगकर्ता पंजीकरण, और बहुत कुछ शामिल होगा।

3. सुलभ डिजाइन आपके काम को भविष्य-प्रमाणित करता है। जैसे-जैसे अधिक संगठन पहुंच-योग्यता की ओर बढ़ते हैं, होने और आवास-पहली मानसिकता कम हो जाएगी कि आपको भविष्य में अपने काम पर कितनी बार फिर से जाना होगा।

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

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

आपके डिजाइन में अभिगम्यता

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

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

वर्णनात्मक पाठ

सुलभ वेब विकास के प्राथमिक सिद्धांतों में से एक है सभी गैर-पाठ्य सामग्री के लिए वर्णनात्मक पाठ समकक्ष होना। इसमें छवियों के लिए वैकल्पिक टेक्स्ट शामिल है, लेकिन इसमें वर्णनात्मक लिंक, मल्टी-पेज या मल्टी-स्टेप इवेंट के लिए नेविगेशन गाइड और वीडियो के लिए कैप्शन भी शामिल हैं।

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

उदाहरण के लिए, उस लिंक के बारे में सोचें जिस पर उपयोगकर्ता हमसे संपर्क करें पृष्ठ पर जाने के लिए क्लिक करेंगे। अभिगम्यता संबंधी विचारों में निम्नलिखित शामिल हैं:

1. लिंक यूआरएल वर्णनात्मक होना चाहिए ।
2. दुर्गम URL : www.website.com/ संपर्क। यह गंतव्य पृष्ठ की सामग्री या उद्देश्य का स्पष्ट रूप से वर्णन नहीं करता है।
3. सुलभ यूआरएल : वेबसाइट .com / contact-us. यह स्पष्ट रूप से गंतव्य पृष्ठ का उद्देश्य बताता है, और आपको वहां क्या मिलेगा।
• दुर्गम लिंक : हमसे संपर्क करें । यह अक्सर ऐसे मुद्दे पैदा करता है जहां स्क्रीन पाठक प्रत्येक पत्र को अलग-अलग पढ़ेंगे। यही है, पाठक "सी" की घोषणा करेगा, और फिर "ओ", और फिर "एन", एट अल।
• सुलभ लिंक : हमसे संपर्क करें या हमसे संपर्क करें । स्क्रीन रीडर इन्हें "हमसे संपर्क करें" के रूप में पढ़ेगा, जैसा कि (शायद) डेवलपर द्वारा किया गया था।

• दुर्गम Alt टेक्स्ट : "एक लाल बटन।" यह वैकल्पिक पाठ यह नहीं बताता कि बटन क्या करता है, न ही यह उपयोगकर्ताओं को कहां ले जाता है।
• एक्सेसिबल ऑल्ट टेक्स्ट: “यह बटन आपको हमारे कॉन्टैक्ट अस पेज पर ले जाता है । "यह बटन के उद्देश्य और लिंक के गंतव्य का वर्णन करता है।
• छवियों के लिए वैकल्पिक पाठ पर एक नोट — यदि बटन या छवि सजावटी है, तो alt घटक को पूरी तरह से हटाने के बजाय <… alt=““> का उपयोग करें। यह स्क्रीन रीडर्स के लिए बेहतर है।
• उदाहरण : "यह लिंक आपको उस पेज पर ले जाएगा जहां आप हमसे संपर्क कर सकते हैं।"
• उदाहरण : "हम तक पहुँचने के लिए, हमारे हमसे संपर्क करें पृष्ठ पर जाएँ।"

सुलभ लिंक पर यूज़ेबलनेट का लेख आपके लिंक नामों को बेहतर बनाने के लिए असाधारण उदाहरण प्रदान करता है।

अंतर

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

सबसे अच्छी पठनीयता काले पाठ के साथ एक सफेद पृष्ठभूमि से आती है, लेकिन यदि आप चाहें तो पीले पाठ के साथ एक नीली पृष्ठभूमि भी हो सकती है, जब तक कि यह सुनिश्चित करने के लिए कंट्रास्ट पर्याप्त हो कि आपका पृष्ठ संदर्भ पृष्ठभूमि से अलग है .



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

ऐसे कई टूल हैं जिनका उपयोग आप यह सुनिश्चित करने के लिए कर सकते हैं कि आपका डिज़ाइन दृष्टिकोण एक्सेसिबिलिटी बाधा नहीं बना रहा है। एक उदाहरण WebAIM का कंट्रास्ट चेकर है।

फार्म



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

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

• ग्रे प्लेसहोल्डर टेक्स्ट से बचें। हालांकि यह कुछ के लिए अधिक सौंदर्यपूर्ण रूप से प्रसन्न हो सकता है, सफेद पृष्ठभूमि पर ग्रे टेक्स्ट का कम कंट्रास्ट दृष्टिहीन उपयोगकर्ताओं के लिए उदाहरण टेक्स्ट को देखना कठिन बनाता है।
• सभी प्रपत्र तत्वों को स्पष्ट रूप से चिह्नित करें । कोई फर्क नहीं पड़ता कि यह कितना अप्रासंगिक लग सकता है, किसी को यह जानने की जरूरत है कि अपना पहला नाम कहां रखा जाए और अपना अंतिम नाम कहां रखा जाए।
• जहां संभव हो समयबद्ध घटनाओं से बचें। इसमें स्वचालित लॉग आउट, फ़ॉर्म सबमिट, या अन्य कार्रवाइयां शामिल हो सकती हैं जहां पूरी एजेंसी सीधे उपयोगकर्ता से छीन ली जाती है। निश्चित रूप से कुछ मामलों में यह अपरिहार्य है जहां संवेदनशील जानकारी शामिल है। हालांकि, स्क्रीन रीडर वाले उपयोगकर्ताओं या संज्ञानात्मक या मोटर/शारीरिक अक्षमता वाले उपयोगकर्ताओं के लिए समयबद्ध घटनाएँ तनावपूर्ण और रुकावट पैदा करने वाली हो सकती हैं। यदि संभव हो, तो टाइमर, गतिविधि चेकर्स, या उपयोगकर्ताओं को यह बताने के अन्य तरीके शामिल करें कि उनके इनपुट की आवश्यकता है या निगरानी की जाती है।
• यदि आपके पास एक बहु-पृष्ठ प्रपत्र है, तो नेविगेशन तत्व शामिल करें । उदाहरण के लिए, "5 का पृष्ठ 1" कहने वाली एक पंक्ति का होना, उपयोगकर्ताओं को यह बताने में अत्यंत सहायक हो सकता है कि वे एक प्रक्रिया में कितनी दूर हैं। यह उपयोगकर्ताओं को आवश्यक ब्रेक लेने की अनुमति देता है, और यह कुछ अनुप्रयोगों और प्रौद्योगिकियों के लिए सहायक होता है यदि उन्हें उपयोगकर्ता के लिए पूर्ण फ़ॉर्म को अनियंत्रित करना पड़ता है।
• उन लिंक्स को शामिल करें जो पेज की मुख्य सामग्री को छोड़ देते हैं। आप इसे खाद्य ब्लॉगों में बहुत कुछ देखते हैं, जहां आप लेखक के उनके बेटे के सॉकर गेम के विवरण को छोड़ सकते हैं और सीधे नुस्खा पर पहुंच सकते हैं। यह महत्वपूर्ण है ताकि उपयोगकर्ता ऐसी सामग्री के इंतजार में थके या निराश न हों जो उनके लिए अप्रासंगिक है। यह पृष्ठ संरचना में भी मदद करता है, जो स्क्रीन रीडर के उपयोग की सुविधा प्रदान करता है।

यहां कुछ युक्तियां दी गई हैं जिन्हें साझा करना मुझे अच्छा लगा, लेकिन मैं उन्हें उपरोक्त किसी भी श्रेणी में व्यवस्थित नहीं कर सका।

• एक विकलांग व्यक्ति को अपनी वेबसाइट को आज़माने के लिए कहें और उनके विचार प्राप्त करें कि आप इसे कैसे सुधार सकते हैं। स्वयं अक्षम उपयोगकर्ताओं की जानकारी प्राप्त करने के अलावा और कुछ भी आपकी मदद नहीं कर सकता है।
• अभिगम्यता का अधिकांश कार्य HTML के साथ किया जाएगा, इसलिए रणनीतिक और अपने कोड के साथ विचार-विमर्श करें। उदाहरण के लिए, केवल प्राथमिक पृष्ठ शीर्षकों के लिए <h1> का उपयोग करें, और हेडर टैग का उपयोग विशुद्ध रूप से अवरोही तरीके से करें (<h1>, और फिर <h2>, और फिर <h3>, आदि) ताकि उपयोगकर्ता जान सकें कि उन्होंने ऐसा नहीं किया कुछ भी याद करो। आपके HTML के लिए ARIA मार्कर भी उपयोगी हो सकते हैं:https://www.w3.org/TR/html-aria/
• अपने डिज़ाइन और परीक्षण के दौरान स्क्रीन रीडर, ब्राउज़र एक्सटेंशन, API या अन्य एक्सेसिबिलिटी सहायता का उपयोग करने का प्रयास करें। यह आपको एक बेहतर विचार देगा कि ये उपकरण कैसे काम करते हैं, साथ ही साथ आपके डिज़ाइन उनके साथ कैसे काम करते हैं।
• वेब डेवलपर्स को उनके काम की पहुंच में अंतर्दृष्टि देने के लिए डिज़ाइन किए गए कुछ टूल भी हैं। उदाहरण के लिए, जब आप वेबसाइट का उपयोग करते हैं तो WAVE ब्राउज़र एक्सटेंशन वेबसाइट एक्सेसिबिलिटी रिपोर्ट बनाता है । यह वर्तमान में क्रोम, फ़ायरफ़ॉक्स और माइक्रोसॉफ्ट एज पर काम करता है।
• यदि आपके पास प्रत्येक पृष्ठ को तुरंत पहुँच योग्य बनाने के लिए समय या संसाधन नहीं हैं, तो सबसे अधिक ट्रैफ़िक वाले पृष्ठों और उन पृष्ठों को प्राथमिकता दें जो उपयोगकर्ताओं के लिए सबसे अधिक प्रासंगिक होंगे।
• यदि आपको अपने उपयोगकर्ताओं को सीधे संबोधित करने की आवश्यकता है, तो "विकलांग लोगों" जैसी व्यक्ति-प्रथम भाषा का उपयोग करने से बचें। हां, मुझे पता है कि मैंने पहले प्रदान किया गया W3C उद्धरण ऐसा करता है, लेकिन इसलिए मैं इसे इंगित करना चाहता हूं। अधिकांश विकलांग लोग (स्वयं शामिल) इस शब्द को अनावश्यक रूप से जटिल पाते हैं और, कुछ मामलों में, कृपालु। "विकलांग लोग" वही जानकारी है जो "विकलांग लोगों" के रूप में है, लेकिन कम शब्दों में और अधिक प्रत्यक्ष तरीके से। यहाँ इस नोट पर एक स्पष्ट उदाहरण दिया गया है: एक आकस्मिक बातचीत में, क्या आप अपने आप को एक वेब डेवलपर के रूप में या वेब के लिए विकसित होने वाले व्यक्ति के रूप में संदर्भित करते हैं?

जब मैंने उच्च शिक्षा में काम किया, तो मैंने एक सहकर्मी को "अतिरिक्त काम" के बारे में शिकायत करते हुए सुना जो कि पहुँच में जाता है, यह कहते हुए कि यह बहुत कम लोगों के लिए बहुत दूर जाता है। मैं असहमत हूं—मुझे नहीं लगता कि आप कभी भी किसी और के जीवन को बेहतर बनाने के लिए बहुत दूर जा सकते हैं। हर कोई आपके काम सहित इंटरनेट तक समान पहुंच का हकदार है। आपने इसमें बहुत प्रयास किया है, क्या सभी को इसे देखने और उपयोग करने का मौका नहीं मिलना चाहिए, यदि वे चाहते हैं?

आगे की पढाई:

• W3C की वेब सामग्री अभिगम्यता मार्गदर्शिका
• प्रयोग करने योग्य नेट अभिलेखागार
• एमडीएन: वेब एक्सेसिबिलिटी
• टेक्सास ए एंड एम: एक्सेसिबिलिटी को ध्यान में रखते हुए वेबसाइटों का विकास करना