# वेबपेज को सुलभ बनाना ![सुलभता के बारे में सब कुछ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hi.png) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ## प्री-लेक्चर क्विज़ [प्री-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/) > वेब की शक्ति इसकी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी के लिए पहुंच एक आवश्यक पहलू है। > > \- सर टिमोथी बर्नर्स-ली, 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) का उपयोग करके किसी वेबसाइट का रंग उपयोग परीक्षण करें। आप क्या सीखते हैं? ### लाइटहाउस आपके ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। यह टूल किसी वेबसाइट की सुलभता (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए महत्वपूर्ण है। जबकि केवल लाइटहाउस पर निर्भर रहना महत्वपूर्ण नहीं है, 100% स्कोर एक उपयोगी आधार रेखा है। ✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस खोजें और किसी भी साइट पर विश्लेषण चलाएं। आप क्या खोजते हैं? ## सुलभता के लिए डिज़ाइन करना सुलभता एक अपेक्षाकृत बड़ा विषय है। आपकी मदद करने के लिए, कई संसाधन उपलब्ध हैं। - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) हालांकि हम सुलभ साइट बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत दिए गए हैं जिन्हें आप लागू करना चाहेंगे। शुरुआत से ही सुलभ पेज डिज़ाइन करना **हमेशा** मौजूदा पेज को सुलभ बनाने की तुलना में आसान होता है। ## अच्छे प्रदर्शन सिद्धांत ### रंग सुरक्षित पैलेट लोग दुनिया को अलग-अलग तरीकों से देखते हैं, और इसमें रंग भी शामिल हैं। अपनी साइट के लिए रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। [रंग पैलेट बनाने के लिए एक शानदार टूल Color Safe](http://colorsafe.co/) है। ✅ ऐसी वेबसाइट की पहचान करें जो रंगों के उपयोग में बहुत समस्याग्रस्त हो। क्यों? ### सही HTML का उपयोग करें CSS और JavaScript के साथ, किसी भी तत्व को किसी भी प्रकार के नियंत्रण जैसा दिखाना संभव है। `` का उपयोग `