# वेबपेज को सुलभ बनाना ![सुलभता के बारे में सब कुछ](../../../../sketchnotes/webdev101-a11y.png) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ## प्री-लेक्चर क्विज़ [प्री-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/quiz/5) > वेब की शक्ति इसकी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी के लिए पहुंच एक आवश्यक पहलू है। > > \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक यह उद्धरण सुलभ वेबसाइट बनाने के महत्व को पूरी तरह से उजागर करता है। एक ऐसा एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है, वह स्वाभाविक रूप से बहिष्कृत है। एक वेब डेवलपर के रूप में हमें हमेशा सुलभता को ध्यान में रखना चाहिए। शुरुआत से ही इस पर ध्यान केंद्रित करके, आप यह सुनिश्चित करने की दिशा में सही कदम उठाएंगे कि हर कोई आपके द्वारा बनाए गए पेजों तक पहुंच सके। इस पाठ में, आप उन उपकरणों के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपके वेब संसाधन सुलभ हैं और सुलभता को ध्यान में रखते हुए निर्माण कैसे करें। > आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) पर ले सकते हैं! ## उपयोग करने के उपकरण ### स्क्रीन रीडर सबसे प्रसिद्ध सुलभता उपकरणों में से एक स्क्रीन रीडर हैं। [स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि बाधित लोगों द्वारा उपयोग किए जाते हैं। जैसे हम यह सुनिश्चित करने में समय लगाते हैं कि ब्राउज़र वह जानकारी सही ढंग से प्रस्तुत करता है जिसे हम साझा करना चाहते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे। सबसे बुनियादी स्तर पर, स्क्रीन रीडर एक पेज को ऊपर से नीचे तक सुनने योग्य रूप से पढ़ता है। यदि आपका पेज केवल टेक्स्ट है, तो रीडर जानकारी को ब्राउज़र के समान तरीके से प्रस्तुत करेगा। हालांकि, वेब पेज शायद ही कभी केवल टेक्स्ट होते हैं; उनमें लिंक, ग्राफिक्स, रंग और अन्य दृश्य घटक होते हैं। यह सुनिश्चित करने के लिए सावधानी बरतनी चाहिए कि स्क्रीन रीडर इस जानकारी को सही ढंग से पढ़े। हर वेब डेवलपर को स्क्रीन रीडर से परिचित होना चाहिए। जैसा कि ऊपर बताया गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। जिस तरह आप ब्राउज़र के संचालन से परिचित हैं, आपको स्क्रीन रीडर के संचालन को भी सीखना चाहिए। सौभाग्य से, अधिकांश ऑपरेटिंग सिस्टम में स्क्रीन रीडर अंतर्निहित होते हैं। कुछ ब्राउज़र में भी अंतर्निहित उपकरण और एक्सटेंशन होते हैं जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नेविगेशनल सुविधाएं प्रदान कर सकते हैं, जैसे [Edge ब्राउज़र के ये सुलभता-केंद्रित उपकरण](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये भी महत्वपूर्ण सुलभता उपकरण हैं, लेकिन स्क्रीन रीडर परीक्षण उपकरणों के रूप में इन्हें भ्रमित नहीं करना चाहिए। ✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। Windows पर [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) को भी इंस्टॉल किया जा सकता है। macOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से इंस्टॉल होता है। ### ज़ूम दृष्टि बाधित लोगों द्वारा आमतौर पर उपयोग किया जाने वाला एक अन्य उपकरण ज़ूमिंग है। ज़ूमिंग का सबसे बुनियादी प्रकार स्थिर ज़ूम है, जिसे `Control + प्लस साइन (+)` या स्क्रीन रिज़ॉल्यूशन को कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पेज को पुन: आकार देता है, इसलिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना बढ़े हुए ज़ूम स्तरों पर अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए महत्वपूर्ण है। ज़ूमिंग का एक अन्य प्रकार विशेष सॉफ़्टवेयर पर निर्भर करता है जो स्क्रीन के एक क्षेत्र को बड़ा करता है और पैन करता है, जैसे वास्तविक आवर्धक कांच का उपयोग करना। Windows पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) अंतर्निहित है, और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) एक तृतीय-पक्ष आवर्धन सॉफ़्टवेयर है जिसमें अधिक सुविधाएँ और बड़ा उपयोगकर्ता आधार है। macOS और iOS दोनों में अंतर्निहित आवर्धन सॉफ़्टवेयर है जिसे [Zoom](https://www.apple.com/accessibility/mac/vision/) कहा जाता है। ### कंट्रास्ट चेकर वेबसाइटों पर रंगों का सावधानीपूर्वक चयन करना आवश्यक है ताकि रंग-अंधता वाले उपयोगकर्ताओं या कम-कंट्रास्ट रंगों को देखने में कठिनाई वाले लोगों की ज़रूरतों को पूरा किया जा सके। ✅ किसी ब्राउज़र एक्सटेंशन जैसे [WCAG का रंग चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) का उपयोग करके किसी वेबसाइट का रंग उपयोग परीक्षण करें। आप क्या सीखते हैं? ### Lighthouse आपके ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको Lighthouse टूल मिलेगा। यह टूल किसी वेबसाइट की सुलभता (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए महत्वपूर्ण है। जबकि केवल Lighthouse पर निर्भर रहना महत्वपूर्ण नहीं है, 100% स्कोर एक उपयोगी आधार रेखा है। ✅ अपने ब्राउज़र के डेवलपर टूल पैनल में Lighthouse खोजें और किसी भी साइट पर विश्लेषण चलाएं। आप क्या खोजते हैं? ## सुलभता के लिए डिज़ाइन करना सुलभता एक अपेक्षाकृत बड़ा विषय है। आपकी मदद करने के लिए, कई संसाधन उपलब्ध हैं। - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) हालांकि हम सुलभ साइट बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत दिए गए हैं जिन्हें आप लागू करना चाहेंगे। शुरुआत से ही सुलभ पेज डिज़ाइन करना **हमेशा** मौजूदा पेज को सुलभ बनाने की तुलना में आसान होता है। ## अच्छे प्रदर्शन सिद्धांत ### रंग सुरक्षित पैलेट लोग दुनिया को अलग-अलग तरीकों से देखते हैं, और इसमें रंग भी शामिल हैं। अपनी साइट के लिए रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। [रंग पैलेट बनाने के लिए एक शानदार टूल Color Safe](http://colorsafe.co/) है। ✅ एक ऐसी वेबसाइट की पहचान करें जो रंगों के उपयोग में बहुत समस्याग्रस्त हो। क्यों? ### सही HTML का उपयोग करें CSS और JavaScript के साथ, किसी भी तत्व को किसी भी प्रकार के नियंत्रण जैसा दिखाना संभव है। `` का उपयोग `