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