You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
30 KiB
175 lines
30 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
|
|
"translation_date": "2025-08-25T22:58:52+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
"language_code": "mr"
|
|
}
|
|
-->
|
|
# वेबपृष्ठे सुलभ बनवणे
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
|
|
|
|
## व्याख्यानपूर्व प्रश्नमंजुषा
|
|
[व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/5)
|
|
|
|
> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असो वा नसो, प्रत्येकासाठी प्रवेश हा एक आवश्यक पैलू आहे.
|
|
>
|
|
> \- सर टिमोथी बर्नर्स-ली, 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 सह कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसण्यासाठी बनवणे शक्य आहे. `<span>` वापरून `<button>` तयार केले जाऊ शकते, आणि `<b>` हायपरलिंक बनू शकते. जरी हे शैलीसाठी सोपे मानले जाऊ शकते, तरीही ते स्क्रीन रीडरला काहीही सांगत नाही. पृष्ठावर नियंत्रण तयार करताना योग्य HTML वापरा. जर तुम्हाला हायपरलिंक हवे असेल, तर `<a>` वापरा. योग्य नियंत्रणासाठी योग्य HTML वापरणे म्हणजे Semantic HTML चा वापर करणे.
|
|
|
|
✅ कोणत्याही वेबसाइटवर जा आणि डिझायनर्स आणि विकसक HTML योग्य प्रकारे वापरत आहेत का ते पहा. तुम्हाला असे बटण सापडते का जे लिंक असायला हवे? संकेत: तुमच्या ब्राउझरमध्ये 'View Page Source' निवडण्यासाठी उजवे क्लिक करा आणि अंतर्निहित कोड पहा.
|
|
|
|
### वर्णनात्मक शीर्षक श्रेणी तयार करा
|
|
|
|
स्क्रीन रीडर वापरकर्ते [माहिती शोधण्यासाठी आणि पृष्ठावर नेव्हिगेट करण्यासाठी शीर्षकांवर मोठ्या प्रमाणावर अवलंबून असतात](https://webaim.org/projects/screenreadersurvey8/#finding). वर्णनात्मक शीर्षक सामग्री लिहिणे आणि सेमॅंटिक शीर्षक टॅग वापरणे स्क्रीन रीडर वापरकर्त्यांसाठी सहज नेव्हिगेट करण्यायोग्य साइट तयार करण्यासाठी महत्त्वाचे आहे.
|
|
|
|
### चांगल्या दृश्य संकेतांचा वापर करा
|
|
|
|
CSS पृष्ठावरील कोणत्याही घटकाच्या स्वरूपावर संपूर्ण नियंत्रण देते. तुम्ही outline शिवाय टेक्स्ट बॉक्स किंवा underline शिवाय हायपरलिंक तयार करू शकता. दुर्दैवाने, हे संकेत काढून टाकल्याने कोणत्याही प्रकारच्या नियंत्रणाला ओळखण्यासाठी त्यावर अवलंबून असलेल्या व्यक्तीसाठी ते अधिक आव्हानात्मक होऊ शकते.
|
|
|
|
## लिंक मजकूराचे महत्त्व
|
|
|
|
हायपरलिंक्स वेबवर नेव्हिगेट करण्यासाठी मुख्य आहेत. परिणामी, स्क्रीन रीडर योग्य प्रकारे दुवे वाचू शकतो याची खात्री करणे सर्व वापरकर्त्यांना तुमच्या साइटवर नेव्हिगेट करण्यास अनुमती देते.
|
|
|
|
### स्क्रीन रीडर्स आणि दुवे
|
|
|
|
तुम्ही अपेक्षा कराल, स्क्रीन रीडर्स पृष्ठावरील इतर मजकूराप्रमाणेच लिंक मजकूर वाचतात. हे लक्षात घेऊन, खाली प्रदर्शित मजकूर परिपूर्णपणे स्वीकारार्ह वाटू शकतो.
|
|
|
|
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे. [Click here](https://en.wikipedia.org/wiki/Little_penguin) अधिक माहितीसाठी.
|
|
|
|
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे. अधिक माहितीसाठी https://en.wikipedia.org/wiki/Little_penguin ला भेट द्या.
|
|
|
|
> **NOTE** तुम्ही वाचणार आहात, तुम्ही **कधीही** वर दिलेल्या प्रकारचे दुवे तयार करू नयेत.
|
|
|
|
लक्षात ठेवा, स्क्रीन रीडर्स ब्राउझरपेक्षा वेगळे इंटरफेस आहेत ज्यामध्ये वेगळ्या प्रकारची वैशिष्ट्ये आहेत.
|
|
|
|
### URL वापरण्याची समस्या
|
|
|
|
स्क्रीन रीडर्स मजकूर वाचतात. जर मजकूरात URL दिसला, तर स्क्रीन रीडर URL वाचेल. सामान्यतः, URL अर्थपूर्ण माहिती देत नाही आणि त्रासदायक वाटू शकतो. तुम्ही कधी अनुभवले असेल की तुमच्या फोनने URL असलेला मजकूर संदेश मोठ्याने वाचला असेल.
|
|
|
|
### "click here" वापरण्याची समस्या
|
|
|
|
स्क्रीन रीडर्स पृष्ठावरील फक्त हायपरलिंक्स वाचण्याची क्षमता देखील असते, जसे की दृष्टिसंपन्न व्यक्ती दुवे शोधण्यासाठी पृष्ठ स्कॅन करेल. जर लिंक मजकूर नेहमी "click here" असेल, तर वापरकर्त्याला "click here, click here, click here, click here, click here, ..." असे ऐकू येईल. सर्व दुवे आता एकमेकांपासून वेगळे नाहीत.
|
|
|
|
### चांगला लिंक मजकूर
|
|
|
|
चांगला लिंक मजकूर दुव्याच्या दुसऱ्या बाजूला काय आहे याचे थोडक्यात वर्णन करतो. वरच्या उदाहरणात लहान पेंग्विनबद्दल बोलताना, दुवा प्रजातीबद्दल Wikipedia पृष्ठावर आहे. *लहान पेंग्विन* ही वाक्ये परिपूर्ण लिंक मजकूर बनवतील कारण ते स्पष्ट करते की कोणीतरी दुव्यावर क्लिक केल्यास त्यांना काय शिकायला मिळेल - लहान पेंग्विन.
|
|
|
|
> [लहान पेंग्विन](https://en.wikipedia.org/wiki/Little_penguin), ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे.
|
|
|
|
✅ काही मिनिटे वेबवर सर्फ करा आणि अस्पष्ट लिंकिंग रणनीती वापरणाऱ्या पृष्ठांचा शोध घ्या. त्यांची इतर, चांगल्या प्रकारे लिंक केलेल्या साइट्सशी तुलना करा. तुम्हाला काय शिकायला मिळते?
|
|
|
|
#### शोध इंजिन नोट्स
|
|
|
|
तुमची साइट सर्वांसाठी सुलभ असल्याची खात्री करण्यासाठी तुम्ही अतिरिक्त बोनस म्हणून शोध इंजिन्सला तुमची साइट नेव्हिगेट करण्यात मदत कराल. शोध इंजिन्स पृष्ठांच्या विषयांबद्दल शिकण्यासाठी लिंक मजकूर वापरतात. त्यामुळे चांगला लिंक मजकूर वापरणे सर्वांना मदत करते!
|
|
|
|
### ARIA
|
|
|
|
खालील पृष्ठाची कल्पना करा:
|
|
|
|
| उत्पादन | वर्णन | ऑर्डर |
|
|
| ------------ | ------------------ | ------------ |
|
|
| Widget | [वर्णन](../../../../1-getting-started-lessons/3-accessibility/') | [ऑर्डर](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
| Super widget | [वर्णन](../../../../1-getting-started-lessons/3-accessibility/') | [ऑर्डर](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
|
|
या उदाहरणात, वर्णन आणि ऑर्डर मजकूर पुनरावृत्ती करणे ब्राउझर वापरणाऱ्या व्यक्तीसाठी अर्थपूर्ण आहे. तथापि, स्क्रीन रीडर वापरणाऱ्या व्यक्तीला *वर्णन* आणि *ऑर्डर* शब्द केवळ संदर्भाशिवाय ऐकू येतील.
|
|
|
|
या प्रकारच्या परिस्थितींचा समर्थन करण्यासाठी, HTML मध्ये [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नावाच्या गुणधर्मांचा संच आहे. हे गुणधर्म स्क्रीन रीडर्सना अतिरिक्त माहिती प्रदान करण्यास अनुमती देतात.
|
|
|
|
> **NOTE**: HTML च्या अनेक पैलूंप्रमाणे, ब्राउझर आणि स्क्रीन रीडर समर्थन वेगवेगळे असू शकते. तथापि, बहुतेक मुख्य प्रवाहातील क्लायंट ARIA गुणधर्मांना समर्थन देतात.
|
|
|
|
तुम्ही `aria-label` वापरून दुव्याचे वर्णन करू शकता जेव्हा पृष्ठाचे स्वरूप तुम्हाला ते करण्याची परवानगी देत नाही. Widget साठी वर्णन सेट केले जाऊ शकते
|
|
|
|
``` html
|
|
<a href="#" aria-label="Widget description">description</a>
|
|
```
|
|
|
|
✅ सामान्यतः, वर वर्णन केल्याप्रमाणे सेमॅंटिक मार्कअपचा वापर ARIA च्या वापरावर प्राधान्य देतो, परंतु कधीकधी विविध HTML विजेट्ससाठी सेमॅंटिक समकक्ष नसतो. चांगले उदाहरण म्हणजे Tree. Tree साठी HTML समकक्ष नाही, त्यामुळे तुम्ही या घटकासाठी सामान्य `<div>` योग्य भूमिका आणि ARIA मूल्यांसह ओळखता. [MDN च्या ARIA दस्तऐवजीकरणात](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) अधिक उपयुक्त माहिती आहे.
|
|
|
|
```html
|
|
<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 मजकूर वापरतात. त्यामुळे पुन्हा एकदा, तुमचे पृष्ठ सुलभ असल्याची खात्री केल्याने अतिरिक्त बोनस मिळतो!
|
|
|
|
## कीबोर्ड
|
|
|
|
काही वापरकर्ते माऊस किंवा ट्रॅकपॅड वापरण्यास असमर्थ असतात, त्याऐवजी कीबोर्ड संवादांवर अवलंबून असतात जे एका घटकावरून दुसऱ्या घटकावर टॅब करतात. तुमच्या वेबसाइटने तुमची सामग्री तार्किक क्रमाने सादर करणे महत्त्वाचे आहे जेणेकरून कीबोर्ड वापरकर्ता प्रत्येक परस्पर घटकावर प्रवेश करू शकेल. जर तुम्ही तुमची वेब पृष्ठे सेमॅंटिक मार्कअपसह तयार केली आणि त्यांच्या दृश्य लेआउटला शैली देण्यासाठी CSS वापरला,
|
|
अनेक सरकारांकडे प्रवेशयोग्यता आवश्यकता संबंधित कायदे आहेत. आपल्या देशातील प्रवेशयोग्यता कायद्यांबद्दल माहिती मिळवा. काय समाविष्ट आहे आणि काय नाही? उदाहरण म्हणून [हा सरकारी वेब साइट](https://accessibility.blog.gov.uk/) पाहा.
|
|
|
|
## असाइनमेंट
|
|
|
|
[एक गैर-प्रवेशयोग्य वेब साइटचे विश्लेषण करा](assignment.md)
|
|
|
|
क्रेडिट्स: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) Instrument द्वारे
|
|
|
|
**अस्वीकरण**:
|
|
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |