सभी के लिए इंटरनेट को सुलभ बनाने के सात सरल नियम

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



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

यदि यह मौजूदा साइट पर त्रुटियों को ठीक करने का सवाल है, तो यहां कुछ प्रयास करने होंगे। जब मैंने कार्बन हेल्थ में काम किया, तो हमने एक बार क्रोम में एक विशेष एक्सटेंशन का उपयोग करके पहुंच के लिए साइट का परीक्षण किया। पहले से ही मुख्य पृष्ठ पर, 28 उल्लंघन पाए गए थे जिन्हें समाप्त करने की आवश्यकता थी। पहली नज़र में ऐसा लग रहा था कि यह बहुत समय लेने वाली प्रक्रिया होगी, लेकिन जल्द ही यह स्पष्ट हो गया कि सुधार करना इतना मुश्किल नहीं होगा - आपको बस समय का निवेश करने और मूल बातें समझने की ज़रूरत है। हम कुछ ही दिनों में उल्लंघनों की संख्या को शून्य करने में कामयाब रहे।

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

पहुंच के लिए प्रयास क्यों?

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

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

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

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

1. रंगों को इसके विपरीत पर्याप्त बनाएं

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

ऐसे उपकरण हैं जो आपको इसके विपरीत को जल्दी से जांचने में मदद करते हैं। जो लोग एक मैक पर काम करते हैं, मैं आपको आवेदन कंट्रास्ट प्राप्त करने की सलाह देता हूं - यह आपको तुरंत विंदुक का उपयोग करके अनुपात की गणना करने की अनुमति देता है। यदि आप अधिक विस्तृत मूल्यांकन प्राप्त करना चाहते हैं, तो मेरा सुझाव है कि आप WebAIM से विपरीत की जाँच के लिए उपकरण में आवश्यक मान दर्ज करें। यह विभिन्न फ़ॉन्ट आकारों के लिए अनुपात की गणना करेगा और विभिन्न स्तरों (ए, एए, एएए) के लिए पत्राचार स्थापित करेगा। मूल्यों को बदलकर, आप वास्तविक समय में परिणाम प्राप्त कर सकते हैं।

स्रोत: WCAG विजुअल कंट्रास्ट

2. महत्वपूर्ण जानकारी देने के लिए केवल रंग पर निर्भर न रहें

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

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

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

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

स्रोत: कलर के बिना WCAG विजुअल कंट्रास्ट

3. सक्रिय तत्वों को हाइलाइट करें

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

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

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

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

स्रोत: W3C फोकस दर्शनीय

4. इनपुट फ़ील्ड में कैप्शन और निर्देश जोड़ें

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

स्क्रीन रीडर का उपयोग करने वाले लोग आमतौर पर टैब कुंजी का उपयोग करके एक नियंत्रक से दूसरे में जाते हैं। लेबल तत्वों को उनमें से प्रत्येक के लिए गिना जाता है। बाकी पाठ जो उन पर लागू नहीं होते हैं (खेतों के अंदर एक ही व्याख्यात्मक लेबल) आमतौर पर छोड़ दिया जाता है।

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

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

स्रोत: वेबएआईएम एक्सेसिबल फॉर्म बनाना

5. छवियों और अन्य गैर-पाठीय तत्वों के लिए जानकारीपूर्ण वैकल्पिक विवरण लिखें

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

एक वैकल्पिक विवरण को दो तरीकों से दर्शाया जा सकता है:

• चित्र तत्व की पूरी विशेषता में
• तत्काल संदर्भ में या छवि के साथ पाठ में

छवि पर क्या हो रहा है और यह सामान्य अर्थ से कैसे संबंधित है, यह वर्णन करने का प्रयास करें, और न केवल "चित्र" जैसी टिप्पणी के साथ उतरें। प्रसंग निर्णायक है।

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

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

स्रोत: Alt Attributes का उपयोग करके W3C

6. मार्कअप का सही तरीके से इस्तेमाल करें

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

शीर्षकों में बड़ा फ़ॉन्ट उपयोगकर्ता को सूचना की संरचना को बेहतर ढंग से समझने की अनुमति देता है। स्क्रीन रीडर्स कंटेंट पढ़ते समय हेडर पर भी भरोसा करते हैं। इस प्रकार, कम दृष्टि वाले लोगों को पदानुक्रमित अनुक्रम में शीर्षकों को सुनकर पृष्ठ की सामान्य उपस्थिति का विचार मिलता है।

किसी साइट को विकसित करते समय, आपको सही संरचनात्मक तत्वों का उपयोग करना चाहिए। HTML तत्व ब्राउज़र को जानकारी प्रेषित करते हैं कि वे किस प्रकार की सामग्री ले जाते हैं और इसके साथ क्या कार्रवाई करते हैं। यह पृष्ठ के घटक और संरचना हैं जो ब्राउज़र एक्सेसिबिलिटी ट्री बनाते हैं जिसके साथ नेत्रहीन काम के लिए स्क्रीन रीडर होते हैं।

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

स्रोत: WebAIM शब्दार्थ संरचना

7. कुंजी नियंत्रण का समर्थन करें

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

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

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

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

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

स्रोत: W3C कीबोर्ड

और क्या किया जा सकता है

ये नियम एक अच्छा प्रारंभिक बिंदु हैं, लेकिन यदि आप पहुंच में वृद्धि के लिए कुछ और करना चाहते हैं, तो मैं सुझाव दूंगा:

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

निष्कर्ष

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

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

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

संदर्भ

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

उपयोगी उपकरण

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