30 KiB
वेबपृष्ठे सुलभ बनवणे
स्केच नोट Tomomi Imura यांच्याकडून
व्याख्यानपूर्व प्रश्नमंजूषा
वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असो वा नसो, प्रत्येकासाठी प्रवेश हा एक आवश्यक पैलू आहे.
- सर टिमोथी बर्नर्स-ली, W3C संचालक आणि वर्ल्ड वाइड वेबचे शोधक
ही उद्धरण सुलभ वेबसाइट्स तयार करण्याचे महत्त्व उत्तम प्रकारे अधोरेखित करते. ज्या अॅप्लिकेशनमध्ये सर्वांना प्रवेश करता येत नाही, ते मूलतः वगळणारे आहे. वेब डेव्हलपर म्हणून आपल्याला नेहमी सुलभतेचा विचार करायला हवा. सुरुवातीपासूनच यावर लक्ष केंद्रित केल्याने आपण तयार केलेल्या पृष्ठांमध्ये सर्वांना प्रवेश मिळेल याची खात्री करण्याच्या दिशेने आपण चांगल्या प्रकारे पुढे जाल. या धड्यात, आपण आपल्या वेब अॅसेट्स सुलभ आहेत याची खात्री करण्यासाठी मदत करणाऱ्या साधनांबद्दल शिकाल आणि सुलभतेचा विचार करून कसे तयार करावे हे शिकाल.
आपण Microsoft Learn वर हा धडा घेऊ शकता!
वापरण्यासाठी साधने
स्क्रीन रीडर्स
सर्वात प्रसिद्ध सुलभता साधनांपैकी एक म्हणजे स्क्रीन रीडर्स.
स्क्रीन रीडर्स हे दृष्टीदोष असलेल्या लोकांसाठी सामान्यतः वापरले जाणारे क्लायंट आहेत. ब्राउझर योग्य प्रकारे आपल्याला शेअर करायची माहिती देतो याची खात्री करण्यासाठी आपण वेळ घालवतो, त्याचप्रमाणे स्क्रीन रीडर देखील तेच करतो याची खात्री करणे आवश्यक आहे.
त्याच्या मूलभूत स्वरूपात, स्क्रीन रीडर पृष्ठ वरून खाली ऐकण्यायोग्य वाचतो. जर आपले पृष्ठ सर्व मजकूर असेल, तर वाचक ब्राउझरप्रमाणेच माहिती देईल. अर्थात, वेब पृष्ठे क्वचितच शुद्ध मजकूर असतात; त्यामध्ये दुवे, ग्राफिक्स, रंग आणि इतर दृश्य घटक असतात. स्क्रीन रीडरने ही माहिती योग्य प्रकारे वाचली जाईल याची काळजी घेणे आवश्यक आहे.
प्रत्येक वेब डेव्हलपरने स्क्रीन रीडरशी परिचित असले पाहिजे. वर नमूद केल्याप्रमाणे, हे आपल्या वापरकर्त्यांनी वापरलेले क्लायंट आहे. ज्या प्रकारे आपण ब्राउझर कसा कार्य करतो याबद्दल परिचित आहात, त्याचप्रमाणे स्क्रीन रीडर कसा कार्य करतो हे शिकले पाहिजे. सुदैवाने, स्क्रीन रीडर्स बहुतेक ऑपरेटिंग सिस्टममध्ये अंगभूत आहेत.
काही ब्राउझरमध्ये अंगभूत साधने आणि विस्तार आहेत जे मजकूर मोठ्याने वाचू शकतात किंवा अगदी मूलभूत नेव्हिगेशन वैशिष्ट्ये प्रदान करू शकतात, जसे की या सुलभतेवर केंद्रित Edge ब्राउझर साधने. ही देखील महत्त्वाची सुलभता साधने आहेत, परंतु स्क्रीन रीडर चाचणी साधनांसाठी त्यांची चूक होऊ नये.
✅ स्क्रीन रीडर आणि ब्राउझर मजकूर वाचक वापरून पहा. Windows वर Narrator डीफॉल्टने समाविष्ट आहे, आणि JAWS आणि NVDA देखील स्थापित केले जाऊ शकतात. macOS आणि iOS वर, VoiceOver डीफॉल्टने स्थापित आहे.
झूम
दृष्टीदोष असलेल्या लोकांद्वारे सामान्यतः वापरले जाणारे आणखी एक साधन म्हणजे झूमिंग. झूमिंगचा सर्वात मूलभूत प्रकार म्हणजे स्थिर झूम, जो Control + plus sign (+) द्वारे किंवा स्क्रीन रिझोल्यूशन कमी करून नियंत्रित केला जातो. या प्रकारच्या झूममुळे संपूर्ण पृष्ठाचा आकार बदलतो, त्यामुळे प्रतिसादात्मक डिझाइन वापरणे वाढलेल्या झूम स्तरांवर चांगला वापरकर्ता अनुभव प्रदान करण्यासाठी महत्त्वाचे आहे.
झूमिंगचा दुसरा प्रकार विशेष सॉफ्टवेअरवर अवलंबून असतो जे स्क्रीनच्या एका भागाचा आकार वाढवते आणि पॅन करते, जसे की वास्तविक मॅग्निफाइंग ग्लास वापरणे. Windows वर, Magnifier अंगभूत आहे, आणि ZoomText हे अधिक वैशिष्ट्यांसह आणि मोठ्या वापरकर्ता बेससह तृतीय-पक्ष वाढवणारे सॉफ्टवेअर आहे. macOS आणि iOS मध्ये Zoom नावाचे अंगभूत वाढवणारे सॉफ्टवेअर आहे.
कॉन्ट्रास्ट तपासक
वेबसाइटवरील रंग काळजीपूर्वक निवडले पाहिजेत जेणेकरून रंगांध लोक किंवा कमी कॉन्ट्रास्ट रंग पाहण्यात अडचण असलेल्या लोकांच्या गरजा पूर्ण होतील.
✅ ब्राउझर विस्तारासारख्या WCAG च्या रंग तपासक सह रंग वापरासाठी आपल्याला आवडणाऱ्या वेबसाइटची चाचणी करा. तुम्हाला काय शिकायला मिळते?
Lighthouse
आपल्या ब्राउझरच्या डेव्हलपर टूल क्षेत्रात, आपल्याला Lighthouse साधन सापडेल. हे साधन वेबसाइटच्या सुलभतेचा (तसेच इतर विश्लेषण) पहिला आढावा घेण्यासाठी महत्त्वाचे आहे. Lighthouse वर पूर्णपणे अवलंबून राहणे महत्त्वाचे नसले तरी, 100% स्कोअर बेसलाइन म्हणून खूप उपयुक्त आहे.
✅ आपल्या ब्राउझरच्या डेव्हलपर टूल पॅनेलमध्ये Lighthouse शोधा आणि कोणत्याही साइटवर विश्लेषण चालवा. तुम्हाला काय सापडते?
सुलभतेसाठी डिझाइन करणे
सुलभता हा तुलनेने मोठा विषय आहे. आपल्याला मदत करण्यासाठी, अनेक संसाधने उपलब्ध आहेत.
आपण सुलभ साइट्स तयार करण्याच्या प्रत्येक पैलूवर चर्चा करू शकणार नाही, परंतु खाली काही मुख्य तत्त्वे दिली आहेत जी आपण अंमलात आणू इच्छिता. सुरुवातीपासून सुलभ पृष्ठ डिझाइन करणे नेहमीच विद्यमान पृष्ठ सुलभ बनवण्यासाठी परत जाण्यापेक्षा सोपे असते.
चांगले प्रदर्शन तत्त्वे
रंग सुरक्षित पॅलेट्स
लोक जग वेगवेगळ्या प्रकारे पाहतात, आणि यामध्ये रंगांचा समावेश होतो. आपल्या साइटसाठी रंग योजना निवडताना, आपण सर्वांसाठी सुलभ असल्याची खात्री केली पाहिजे. रंग पॅलेट्स तयार करण्यासाठी एक उत्तम साधन म्हणजे Color Safe.
✅ रंग वापरण्यात खूप समस्याग्रस्त असलेली वेबसाइट ओळखा. का?
योग्य HTML वापरा
CSS आणि JavaScript सह कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसण्यासाठी बनवणे शक्य आहे. <span> वापरून <button> तयार केले जाऊ शकते, आणि <b> हायपरलिंक बनू शकते. जरी हे शैलीसाठी सोपे मानले जाऊ शकते, तरीही ते स्क्रीन रीडरला काहीही सांगत नाही. पृष्ठावर नियंत्रण तयार करताना योग्य HTML वापरा. जर तुम्हाला हायपरलिंक हवे असेल, तर <a> वापरा. योग्य नियंत्रणासाठी योग्य HTML वापरणे म्हणजे सेमॅंटिक HTML चा वापर करणे.
✅ कोणत्याही वेबसाइटवर जा आणि डिझायनर्स आणि डेव्हलपर्स HTML योग्य प्रकारे वापरत आहेत का ते पहा. तुम्हाला असे बटण सापडते का जे लिंक असायला हवे? सूचना: उजवे क्लिक करा आणि आपल्या ब्राउझरमध्ये 'View Page Source' निवडा आणि अंतर्निहित कोड पहा.
वर्णनात्मक हेडिंग श्रेणी तयार करा
स्क्रीन रीडर वापरकर्ते माहिती शोधण्यासाठी आणि पृष्ठावर नेव्हिगेट करण्यासाठी हेडिंगवर मोठ्या प्रमाणावर अवलंबून असतात. वर्णनात्मक हेडिंग सामग्री लिहिणे आणि सेमॅंटिक हेडिंग टॅग वापरणे स्क्रीन रीडर वापरकर्त्यांसाठी सहज नेव्हिगेट करण्यायोग्य साइट तयार करण्यासाठी महत्त्वाचे आहे.
चांगल्या दृश्य संकेतांचा वापर करा
CSS पृष्ठावरील कोणत्याही घटकाच्या स्वरूपावर पूर्ण नियंत्रण देते. तुम्ही आउटलाइनशिवाय मजकूर बॉक्स तयार करू शकता किंवा अंडरलाइनशिवाय हायपरलिंक्स तयार करू शकता. दुर्दैवाने, त्या संकेत काढून टाकल्याने कोणत्याही प्रकारच्या नियंत्रणाला ओळखण्यासाठी त्यांच्यावर अवलंबून असलेल्या व्यक्तीसाठी ते अधिक आव्हानात्मक होऊ शकते.
लिंक मजकूराचे महत्त्व
हायपरलिंक्स वेबवर नेव्हिगेट करण्यासाठी मुख्य आहेत. परिणामी, स्क्रीन रीडर योग्य प्रकारे दुवे वाचू शकतो याची खात्री करणे सर्व वापरकर्त्यांना आपल्या साइटवर नेव्हिगेट करण्यास अनुमती देते.
स्क्रीन रीडर्स आणि दुवे
आपल्याला अपेक्षित असल्याप्रमाणे, स्क्रीन रीडर्स पृष्ठावरील इतर कोणत्याही मजकुराप्रमाणे दुवा मजकूर वाचतात. हे लक्षात घेऊन, खाली प्रदर्शित मजकूर परिपूर्णपणे स्वीकारार्ह वाटू शकतो.
लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे. इथे क्लिक करा अधिक माहितीसाठी.
लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे. अधिक माहितीसाठी https://en.wikipedia.org/wiki/Little_penguin ला भेट द्या.
NOTE तुम्ही वाचणार आहात, तुम्ही कधीही वर दिलेल्या प्रकारचे दुवे तयार करू नयेत.
लक्षात ठेवा, स्क्रीन रीडर्स ब्राउझरपेक्षा वेगळे इंटरफेस आहेत ज्यामध्ये वेगळ्या वैशिष्ट्यांचा संच आहे.
URL वापरण्याची समस्या
स्क्रीन रीडर्स मजकूर वाचतात. जर मजकुरात URL दिसला, तर स्क्रीन रीडर URL वाचेल. सामान्यतः, URL अर्थपूर्ण माहिती देत नाही आणि त्रासदायक वाटू शकतो. जर तुमच्या फोनने कधीही URL असलेला मजकूर संदेश मोठ्याने वाचला असेल तर तुम्ही हे अनुभवले असेल.
"इथे क्लिक करा" वापरण्याची समस्या
स्क्रीन रीडर्स पृष्ठावरील फक्त हायपरलिंक्स वाचण्याची क्षमता देखील असते, जसे की दृष्टिसंपन्न व्यक्ती दुवे शोधण्यासाठी पृष्ठ स्कॅन करेल. जर दुवा मजकूर नेहमी "इथे क्लिक करा" असेल, तर वापरकर्त्याला "इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, ..." असे ऐकू येईल. सर्व दुवे आता एकमेकांपासून वेगळे करता येत नाहीत.
चांगला दुवा मजकूर
चांगला दुवा मजकूर दुव्याच्या दुसऱ्या बाजूला काय आहे याचे थोडक्यात वर्णन करतो. लहान पेंग्विनबद्दल बोलणाऱ्या वरील उदाहरणात, दुवा प्रजातीबद्दल विकिपीडिया पृष्ठावर आहे. लहान पेंग्विन ही वाक्ये परिपूर्ण दुवा मजकूर बनवेल कारण ते स्पष्ट करते की कोणीतरी दुवा क्लिक केल्यास त्यांना काय शिकायला मिळेल - लहान पेंग्विन.
लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे.
✅ काही मिनिटे वेबवर सर्फ करा आणि अस्पष्ट लिंकिंग रणनीती वापरणाऱ्या पृष्ठांचा शोध घ्या. त्यांची इतर, चांगल्या प्रकारे लिंक केलेल्या साइट्सशी तुलना करा. तुम्हाला काय शिकायला मिळते?
शोध इंजिन नोट्स
आपल्या साइटवर सर्वांसाठी सुलभता सुनिश्चित करण्याचा अतिरिक्त बोनस म्हणून, आपण शोध इंजिनला आपल्या साइटवर नेव्हिगेट करण्यात मदत कराल. शोध इंजिन पृष्ठांच्या विषयांबद्दल शिकण्यासाठी दुवा मजकूर वापरतात. त्यामुळे चांगला दुवा मजकूर वापरणे सर्वांना मदत करते!
ARIA
खालील पृष्ठाची कल्पना करा:
| उत्पादन | वर्णन | ऑर्डर |
|---|---|---|
| Widget | वर्णन | ऑर्डर |
| Super widget | वर्णन | ऑर्डर |
या उदाहरणात, वर्णन आणि ऑर्डर मजकूर पुनरावृत्ती करणे ब्राउझर वापरणाऱ्या व्यक्तीसाठी अर्थपूर्ण आहे. तथापि, स्क्रीन रीडर वापरणाऱ्या व्यक्तीला वर्णन आणि ऑर्डर शब्द केवळ संदर्भाशिवाय ऐकू येतील.
या प्रकारच्या परिस्थितींना समर्थन देण्यासाठी, HTML मध्ये Accessible Rich Internet Applications (ARIA) नावाच्या गुणधर्मांचा संच आहे. हे गुणधर्म स्क्रीन रीडर्सना अतिरिक्त माहिती प्रदान करण्यास अनुमती देतात.
NOTE: HTML च्या अनेक पैलूंप्रमाणे, ब्राउझर आणि स्क्रीन रीडर समर्थन वेगवेगळे असू शकते. तथापि, बहुतेक मुख्य प्रवाहातील क्लायंट ARIA गुणधर्मांना समर्थन देतात.
आपण aria-label वापरून दुव्याचे वर्णन करू शकता जेव्हा पृष्ठाचे स्वरूप आपल्याला ते करण्याची परवानगी देत नाही. Widget साठी वर्णन सेट केले जाऊ शकते
<a href="#" aria-label="Widget description">description</a>
✅ सामान्यतः, वरील वर्णन केल्याप्रमाणे सेमॅंटिक मार्कअपचा वापर ARIA च्या वापरावर प्राधान्य देतो, परंतु कधीकधी विविध HTML विजेट्ससाठी सेमॅंटिक समकक्ष नसतो. चांगले उदाहरण म्हणजे ट्री. ट्रीसाठी HTML समकक्ष नाही, त्यामुळे आपण या घटकासाठी सामान्य <div> योग्य भूमिका आणि ARIA मूल्यांसह ओळखता. MDN च्या ARIA दस्तऐवजीकरण मध्ये अधिक उपयुक्त माहिती आहे.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
प्रतिमा
हे सांगणे आवश्यक नाही की स्क्रीन रीडर्स प्रतिमेमध्ये काय आहे ते आपोआप वाचू शकत नाहीत. प्रतिमा सुलभ आहेत याची खात्री करणे फारसे काम करत नाही - हे alt गुणधर्माबद्दल आहे. सर्व अर्थपूर्ण प्रतिमांमध्ये त्या काय आहेत याचे वर्णन करण्यासाठी alt असावे.
शुद्ध सजावटीच्या प्रतिमांसाठी त्यांचे alt गुणधर्म रिक्त स्ट्रिंगवर सेट केले पाहिजे: alt="". हे स्क्रीन रीडर्सना सजावटीच्या प्रतिमेची अनावश्यक घोषणा करण्यापासून प्रतिबंधित करते.
✅ तुम्हाला अपेक्षित असल्याप्रमाणे, शोध इंजिन देखील प्रतिमेमध्ये काय आहे ते समजून घेऊ शकत नाहीत. ते देखील alt मजकूर वापरतात. त्यामुळे पुन्हा एकदा, आपले पृष्ठ सुलभ असल्याची खात्री करणे अतिरिक्त बोनस प्रदान करते!
कीबोर्ड
काही वापरकर्ते माऊस किंवा ट्रॅकपॅड वापरण्यास असमर्थ असतात, त्याऐवजी कीबोर्ड संवादांवर अवलंबून असतात जे एका घटकावरून पुढील घटकावर टॅब करतात. कीबोर्ड वापरकर्ता दस्तऐवज खाली जात असताना प्रत्येक परस्पर घटकावर प्रवेश करू शकेल अशा प्रकारे आपल्या वेबसाइटने आपली अनेक सरकारांकडे प्रवेशयोग्यता आवश्यकता संबंधित कायदे आहेत. आपल्या देशातील प्रवेशयोग्यता कायद्यांबद्दल वाचा. काय समाविष्ट आहे आणि काय नाही? याचे एक उदाहरण म्हणजे हा सरकारी वेब साइट.
असाइनमेंट
प्रवेशयोग्यता नसलेल्या वेब साइटचे विश्लेषण करा
क्रेडिट्स: Turtle Ipsum Instrument द्वारे
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.