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.
177 lines
30 KiB
177 lines
30 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
|
|
"translation_date": "2025-08-28T22:34:30+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/)
|
|
|
|
> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असो वा नसो, प्रत्येकासाठी प्रवेश हा एक महत्त्वाचा पैलू आहे.
|
|
>
|
|
> \- सर टिमोथी बर्नर्स-ली, 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 पृष्ठावरील कोणत्याही घटकाच्या स्वरूपावर पूर्ण नियंत्रण देते. तुम्ही आउटलाइनशिवाय मजकूर बॉक्स किंवा अंडरलाइनशिवाय हायपरलिंक तयार करू शकता. दुर्दैवाने, हे संकेत काढून टाकल्याने त्यावर अवलंबून असलेल्या व्यक्तीला नियंत्रणाचा प्रकार ओळखणे अधिक आव्हानात्मक होऊ शकते.
|
|
|
|
## लिंक मजकूराचे महत्त्व
|
|
|
|
हायपरलिंक्स वेबवर नेव्हिगेट करण्यासाठी मुख्य आहेत. परिणामी, स्क्रीन रीडरने दुवे योग्य प्रकारे वाचू शकणे सुनिश्चित करणे सर्व वापरकर्त्यांना आपल्या साइटवर नेव्हिगेट करण्यास अनुमती देते.
|
|
|
|
### स्क्रीन रीडर्स आणि दुवे
|
|
|
|
आपल्याला अपेक्षित असल्याप्रमाणे, स्क्रीन रीडर्स पृष्ठावरील इतर मजकुराप्रमाणेच लिंक मजकूर वाचतात. हे लक्षात घेऊन, खाली दर्शविलेला मजकूर पूर्णपणे स्वीकारार्ह वाटू शकतो.
|
|
|
|
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे. [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 | [Description](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
| Super widget | [Description](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |