# वेबपृष्ठे सुलभ बनवणे ![सुलभतेबद्दल सर्व काही](../../../../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 सह कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसण्यासाठी बनवणे शक्य आहे. `` वापरून `