# वेबपृष्ठे सुलभ बनवणे ![सुलभतेबद्दल सर्व काही](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mr.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 + plus sign (+)` द्वारे किंवा स्क्रीन रिझोल्यूशन कमी करून नियंत्रित केले जाते. या प्रकारचे झूम संपूर्ण पृष्ठाचा आकार बदलतो, त्यामुळे [प्रतिसादात्मक डिझाइन](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 च्या मदतीने कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसायला लावता येते. `` वापरून `