वेब एक्सेसिबिलिटी डिज़ाइन की मूल बातें करने के लिए डिज़ाइनर गाइड

वेब एक ऐसी जगह होनी चाहिए जहां हर कोई दुनिया में कहीं से भी एक ही सामग्री का उपयोग कर सके। उत्तरदायी तकनीकों के लिए एक लंबा रास्ता तय किया है उपकरण-अज्ञेय डिजाइन. लेकिन क्या बारे में पहुँच-अज्ञेय डिजाइन?

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

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

पहुँच के लिए परिचय

सामान्यतया, पहुंच सामग्री निर्माण का विचार है इसका सेवन कोई भी कर सकता है. इसमें नेत्रहीन लोग शामिल हो सकते हैं जो पढ़ नहीं सकते हैं, और इसमें शारीरिक अक्षमता वाले लोग शामिल हो सकते हैं जो माउस या कीबोर्ड (या तो) संचालित नहीं कर सकते हैं.

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

शायद इससे भी महत्वपूर्ण बात यह है कि विकीपीडिया की परिभाषा के अनुसार वेब एक्सेसिबिलिटी क्या दे सकती है:

फिर भी, ऐनी गिब्सन अपनी सूची से अलग पोस्ट में तर्क देती है कि विकिपीडिया की परिभाषा बहुत अस्पष्ट है, और यह नहीं है केवल विकलांग लोगों के बारे में। यह वास्तव में है हर कोई वेब पर दुनिया भर से है कि इंटरनेट तक इष्टतम पहुंच नहीं हो सकती है.

कई देवों को लगता है कि पहुंच सिर्फ अंधे लोगों के लिए है जो पढ़ नहीं सकते हैं। लेकिन वास्तव में वेब पहुंच की चार प्राथमिक श्रेणियां हैं:

1. दृश्य - कम-दृष्टि या खराब / कोई दृष्टि नहीं
2. श्रवण - श्रवण-बाधित या बहरा
3. संज्ञानात्मक - जानकारी को समझने या उपभोग करने में परेशानी
4. मोटर - भौतिक सुलभता संबंधी समस्याएं जिनमें कीबोर्ड या वॉइस कमांड प्रोग्राम जैसे विशेष इनपुट डिवाइस की आवश्यकता हो सकती है

इन श्रेणियों में से प्रत्येक में व्यापक तकनीकें हैं जो हैं वेब मानकों के रूप में बस के रूप में तेजी से बदल रहा है. लेकिन WCAG (वेब ​​कंटेंट एक्सेसिबिलिटी गाइडलाइंस) में इन मानकों की पुष्टि की गई है.

कुछ वेबसाइट, जैसे इन दिशानिर्देशों का पालन करने के लिए सरकारी संस्थानों को कानून की आवश्यकता होती है. वे W3C के माध्यम से अंतरराष्ट्रीय स्तर पर लागू होते हैं.

आइए, वेब पहुंच के पीछे की नौकरशाही पर एक नज़र डालें और फिर कुछ लागू डिज़ाइन युक्तियों में गोता लगाएँ.

W3C और सुलभ डिजाइन

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

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

अन्य दिशानिर्देश WAI छतरी के नीचे मौजूद हैं, जिनमें शामिल हैं UAAG उपयोगकर्ता एजेंटों के लिए तथा टैग वेब संलेखन उपकरण के लिए. अभी के लिए, आपको डब्ल्यूएआई द्वारा दिए गए सुझावों और डब्ल्यूएआई के नियमों के तहत लगाए गए दिशा-निर्देशों में सबसे ज्यादा दिलचस्पी होनी चाहिए।.

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

एक और महत्वपूर्ण विषय जो आपको समझना चाहिए वह है WCAG अनुरूपता। इससे संबंधित है वेबसाइट की पहुंच का स्तर कारकों की एक विस्तृत विविधता को कवर करना। स्तर के अनुरूप हैं ए, एए और एएए की रेटिंग प्रणाली. आप इसे वेब एक्सेसिबिलिटी चेकर टूल से देख सकते हैं। सबसे अच्छा स्कोर AAA है.

इन दिशानिर्देशों के बारे में अधिक जानने के लिए W3C का परिचय WCAG 2.0 लेख को समझना। अधिक विवरणों के लिए इन संबंधित लिंक पर एक नज़र डालें:

• WCAG 2.0 सरलीकृत
• धारा 508 डब्ल्यूसीएजी प्रदर्शन

सुलभ डिजाइन के लिए कदम

मैं अत्यधिक व्यावहारिक पहुंच युक्तियों के लिए A11Y परियोजना की वेबसाइट पर जाने की सलाह देता हूं। A11Y (जो कि एक अंक भी है) GitHub पर होस्ट किया गया एक निशुल्क ओपन सोर्स प्रोजेक्ट है, सुलभ वेब डिजाइन के लिए तकनीक की पेशकश.

आप एक्सेसिबिलिटी आइटम्स की उनकी चेकलिस्ट, या ड्रॉपडाउन, टैब, एक्ट्रेसेज़, बटन और मोडल विंडो जैसे तत्वों के लिए डिज़ाइन पैटर्न का एक गुच्छा ब्राउज़ कर सकते हैं (अन्य मदों के बीच).

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

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

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

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

पहुंच परीक्षण उपकरण

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

यह ध्यान देने योग्य है कि यह प्रक्रिया निराशा हो सकती है. विचार करने के लिए बहुत कुछ है, और WCAG दिशानिर्देशों को समझना इतना कठिन है कि आप सूचना अधिभार के साथ समाप्त हो सकते हैं.

महत्वपूर्ण बात बस चलते रहना है। एक्सेसिबिलिटी का एक क्षेत्र चुनें, और इसे अपना ध्यान केंद्रित करें। फिर इन उपकरणों का उपयोग आपको ट्वीक करने और अपने काम को बेहतर बनाने में मदद करने के लिए करते हैं.

उदाहरण के लिए आप WCAG के विपरीत चश्मे के साथ काम करने की कोशिश कर सकते हैं पठनीयता में सुधार. एक बार जब आप अपने रंग चुनते हैं, तो यह देखने के लिए कि क्या वे एक साथ काम करते हैं, इस मुफ्त कंट्रास्ट अनुपात परीक्षक का उपयोग करें.

दुर्भाग्य से WCAG 2.0 दिशानिर्देश इतने भ्रमित हैं कि आपको आवश्यकताओं को समझने में कठिनाई हो सकती है। लेकिन जितना अधिक आप सीखेंगे, उतना ही अधिक आप सीखेंगे.

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

सिंथिया वेबसाइट पर एक और मुफ्त ऐप है जो कर सकता है ए, एए, एएए की डब्ल्यूसीएजी सफलता रेटिंग के लिए वेबसाइटों की जांच करें, तथा सरकारी अनुपालन के लिए धारा 508.

और अगर आप खुले स्रोत में हैं तो इन पर एक नज़र डालें GitHub पर मुफ्त पहुंच-योग्यता परीक्षण उपकरण.

• HTML कोडस्निफ़र
• स्वचालित अभिगम्यता परीक्षण उपकरण
• WCAG मान्यकर्ता

ब्राउज़र ऐड-ऑन

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

फ़ायरफ़ॉक्स के लिए इंस्पेक्टर को एक्सेसिबिलिटी के लिए जरूरी माना जाता है। यह सब कुछ जांचता है, और यह WAVE परीक्षक की तुलना में बहुत अधिक पूरी तरह से है.

मोज़िला उपयोगकर्ता WCAG कंट्रास्ट चेकर को भी पसंद कर सकते हैं जो एक मुफ्त ऐड-ऑन भी है.

Chrome उपयोगकर्ताओं के पास AInspector नहीं है, लेकिन उनके पास Google द्वारा आधिकारिक तौर पर बनाए गए Accessibility Developer Tools हैं। यह एक्सेसिबिलिटी दिशानिर्देशों की जांच के लिए इंस्पेक्टर विंडो में अतिरिक्त टूल जोड़ता है.

क्रोम उपयोगकर्ताओं के पास रंग विपरीत के लिए ल्युमिनोसिटी चेकर्स और कुछ अन्य मुफ्त एक्सटेंशन भी हैं.

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

आगे की पढाई

यदि आप वेब पहुंच सीखने के बारे में गंभीर हैं तो एक लंबी सड़क के लिए तैयार रहें। यह आसान नहीं है लेकिन यह बहुत पूरा करने वाला है.

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

अधिक जानकारी के लिए निम्न पोस्ट देखें, और यदि आप स्रोत से सीधे ज्ञान चाहते हैं तो WCAG दिशानिर्देशों से परामर्श करना सुनिश्चित करें.

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