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.
228 lines
34 KiB
228 lines
34 KiB
4 years ago
|
# सुलभ वेबपृष्ठ बनाना
|
||
|
|
|
||
|
|
|
||
|
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||
|
|
|
||
|
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||
|
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=hi)
|
||
|
|
|
||
|
|
> वेब की शक्ति अपनी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी तक पहुंच एक आवश्यक पहलू है।
|
||
|
|
>
|
||
|
|
> \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक
|
||
|
|
|
||
|
|
यह उद्धरण सुलभ वेबसाइट बनाने के महत्व पर पूरी तरह से प्रकाश डालता है। एक एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है वह परिभाषा बहिष्करण द्वारा है। वेब डेवलपर्स के रूप में हमें हमेशा ध्यान में रखना चाहिए। शुरू से इस पर ध्यान केंद्रित करने से आप अपने तरीके से अच्छी तरह से सुनिश्चित कर पाएंगे कि हर कोई आपके द्वारा बनाए गए पृष्ठों तक पहुंच बना सके। इस पाठ में, आप उन टूल्स के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपकी वेब एसेट्स सुलभ हैं और एक्सेसिबिलिटी को ध्यान में रखते हुए कैसे बनाया जाए।
|
||
|
|
|
||
|
|
## उपयोग करने के उपकरण
|
||
|
|
|
||
|
|
### स्क्रीन रीडर
|
||
|
|
|
||
|
|
सबसे प्रसिद्ध पहुँच उपकरणों में से एक स्क्रीन रीडर हैं।
|
||
|
|
|
||
|
|
[स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि हानि वाले लोगों के लिए उपयोग किए जाते हैं। जैसा कि हम एक ब्राउज़र सुनिश्चित करने में समय बिताते हैं, हम जो जानकारी साझा करना चाहते हैं, उसे ठीक से बता देते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे।
|
||
|
|
|
||
|
|
इसके सबसे मूल में, एक स्क्रीन रीडर ऊपर से नीचे तक एक पृष्ठ को श्रव्य रूप से पढ़ेगा। यदि आपका पृष्ठ सभी पाठ है, तो पाठक एक ब्राउज़र में इसी तरह से जानकारी को बताएगा। बेशक, वेब पेज शायद ही कभी विशुद्ध रूप से टेक्स्ट होते हैं; वे लिंक, ग्राफिक्स, रंग, और अन्य दृश्य घटक शामिल होंगे। यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि यह जानकारी स्क्रीन रीडर द्वारा सही ढंग से पढ़ी जाए।
|
||
|
|
|
||
|
|
प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं।
|
||
|
|
|
||
|
|
कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए।
|
||
|
|
|
||
|
|
✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है।
|
||
|
|
|
||
|
|
### ज़ूम
|
||
|
|
|
||
|
|
आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर।
|
||
|
|
|
||
|
|
एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है।
|
||
|
|
### कंट्रास्ट चेकर्स
|
||
|
|
|
||
|
|
कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए।
|
||
|
|
|
||
|
|
✅ ब्राउज़र एक्सटेंशन के साथ रंग उपयोग के लिए उपयोग की जाने वाली वेब साइट का परीक्षण करें, जैसे कि [WCAG का कलर चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)। आप क्या सीखते हैं?
|
||
|
|
|
||
|
|
### लाइटहाउस
|
||
|
|
|
||
|
|
अपने ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। वेब साइट की पहुंच (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए यह उपकरण महत्वपूर्ण है। हालांकि यह विशेष रूप से लाइटहाउस पर भरोसा नहीं करना महत्वपूर्ण है, एक आधार रेखा के रूप में 100% स्कोर बहुत मददगार है।
|
||
|
|
|
||
|
|
✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस ढूंढें और किसी भी साइट पर विश्लेषण चलाएं। आपको क्या मिला ?
|
||
|
|
|
||
|
|
## पहुंच के लिए डिजाइनिंग
|
||
|
|
|
||
|
|
पहुँच एक अपेक्षाकृत बड़ा विषय है। आपकी सहायता करने के लिए, कई संसाधन उपलब्ध हैं।
|
||
|
|
|
||
|
|
- [सुलभ यू - मिनेसोटा विश्वविद्यालय](https://accessibility.umn.edu/your-role/web-wevelopmentation)
|
||
|
|
|
||
|
|
हालांकि हम सुलभ साइटों को बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत हैं जिन्हें आप लागू करना चाहते हैं। प्रारंभ से एक सुलभ पृष्ठ डिजाइन करना **हमेशा** सुलभ है और इसे सुलभ बनाने के लिए मौजूदा पृष्ठ पर वापस जाना आसान है।
|
||
|
|
|
||
|
|
## अच्छे प्रदर्शन के सिद्धांत
|
||
|
|
|
||
|
|
### रंग सुरक्षित पट्टियाँ
|
||
|
|
|
||
|
|
लोग दुनिया को विभिन्न तरीकों से देखते हैं, और इसमें रंग शामिल हैं। अपनी साइट के लिए एक रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। रंग पट्टियाँ बनाने के लिए एक महान [टूल कलर सेफ है](http://colorsafe.co/)।
|
||
|
|
|
||
|
|
✅ एक वेब साइट की पहचान करें जो रंग के उपयोग में बहुत समस्याग्रस्त है। क्यों?
|
||
|
|
|
||
|
|
### सही HTML का उपयोग करें
|
||
|
|
|
||
|
|
सीएसएस और जावास्क्रिप्ट के साथ किसी भी तत्व को किसी भी प्रकार के नियंत्रण की तरह बनाना संभव है। `<span>` का उपयोग एक `<button>` बनाने के लिए किया जा सकता है, और `<b>` हाइपरलिंक बन सकता है। हालांकि यह शैली के लिए आसान माना जा सकता है, यह एक स्क्रीन रीडर के लिए कुछ भी नहीं बताता है। पृष्ठ पर नियंत्रण बनाते समय उपयुक्त HTML का उपयोग करें। यदि आप हाइपरलिंक चाहते हैं, तो `<a>` का उपयोग करें। सही नियंत्रण के लिए सही HTML का उपयोग करना शब्दार्थ HTML का उपयोग करना कहलाता है।
|
||
|
|
|
||
|
|
✅ किसी भी वेब साइट पर जाएं और देखें कि डिजाइनर और डेवलपर HTML का सही उपयोग कर रहे हैं या नहीं। क्या आपको एक बटन मिल सकता है जो एक लिंक होना चाहिए? संकेत: अंतर्निहित कोड देखने के लिए अपने ब्राउज़र में राइट क्लिक करें और 'व्यू पेज सोर्स' चुनें।
|
||
|
|
|
||
|
|
### एक वर्णनात्मक शीर्षक पदानुक्रम बनाएँ
|
||
|
|
|
||
|
|
स्क्रीन रीडर उपयोगकर्ता [शीर्षकों पर बहुत भरोसा करते हैं](https://webaim.org/projects/screenreadersurvey8/#finding) जानकारी खोजने और एक पृष्ठ के माध्यम से नेविगेट करने के लिए। वर्णनात्मक शीर्षक सामग्री लिखना और अर्थ हेडिंग टैग का उपयोग करना स्क्रीन रीडर उपयोगकर्ताओं के लिए आसानी से नेविगेट करने योग्य साइट बनाने के लिए महत्वपूर्ण है।
|
||
|
|
|
||
|
|
### अच्छे दृश्य सुराग का उपयोग करें
|
||
|
|
|
||
|
|
सीएसएस एक पृष्ठ पर किसी भी तत्व के देखो पर पूर्ण नियंत्रण प्रदान करता है। आप बिना किसी आउटलाइन या बिना हाइपरलिंक के टेक्स्ट बॉक्स बना सकते हैं। दुर्भाग्यवश उन सुरागों को हटाना किसी ऐसे व्यक्ति के लिए अधिक चुनौतीपूर्ण हो सकता है जो उन पर निर्भर करता है जो नियंत्रण के प्रकार को पहचानने में सक्षम हो।
|
||
|
|
|
||
|
|
## लिंक टेक्स्ट का महत्व
|
||
|
|
|
||
|
|
हाइपरलिंक्स वेब नेविगेट करने के लिए मुख्य हैं। नतीजतन, स्क्रीन रीडर सुनिश्चित करना लिंक को ठीक से पढ़ सकता है, जिससे सभी उपयोगकर्ता आपकी साइट को नेविगेट कर सकते हैं।
|
||
|
|
|
||
|
|
### स्क्रीन रीडर और लिंक
|
||
|
|
|
||
|
|
जैसा कि आप उम्मीद करेंगे, स्क्रीन रीडर्स लिंक टेक्स्ट को उसी तरह से पढ़ेंगे जैसे वे पृष्ठ पर किसी अन्य टेक्स्ट को पढ़ते हैं। इसे ध्यान में रखते हुए, नीचे प्रदर्शित टेक्स्ट पूरी तरह स्वीकार्य लग सकता है।
|
||
|
|
|
||
|
|
> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए [यहां क्लिक करें](https://en.wikipedia.org/wiki/Little_penguin)।
|
||
|
|
|
||
|
|
> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए https://en.wikipedia.org/wiki/Little_penguin पर जाएं।
|
||
|
|
> ** नोट ** जैसा कि आप पढ़ने वाले हैं, आपको ** कभी भी ** लिंक नहीं बनाना चाहिए जो ऊपर की तरह दिखते हों।
|
||
|
|
|
||
|
|
याद रखें, स्क्रीन रीडर एक अलग सेट के साथ ब्राउज़रों से अलग इंटरफ़ेस हैं।
|
||
|
|
|
||
|
|
### URL का उपयोग करने में समस्या
|
||
|
|
|
||
|
|
स्क्रीन रीडर पाठ पढ़ते हैं। यदि टेक्स्ट में URL दिखाई देता है, तो स्क्रीन रीडर URL को पढ़ेगा। सामान्यतया, URL सार्थक जानकारी नहीं देता है, और कष्टप्रद ध्वनि कर सकता है। यदि आपका फ़ोन कभी श्रव्य रूप से URL के साथ टेक्स्ट संदेश पढ़ता है, तो आपको इसका अनुभव हो सकता है।
|
||
|
|
|
||
|
|
### "यहाँ क्लिक करें" के साथ समस्या
|
||
|
|
|
||
|
|
स्क्रीन पाठकों के पास एक पृष्ठ पर केवल हाइपरलिंक पढ़ने की क्षमता होती है, उसी तरह एक दृष्टिहीन व्यक्ति लिंक के लिए एक पेज स्कैन करेगा। यदि लिंक टेक्स्ट हमेशा "यहां क्लिक करें" है, तो सभी उपयोगकर्ता सुनेंगे "यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें ..." सभी लिंक अब एक दूसरे से अप्रभेद्य हैं।
|
||
|
|
|
||
|
|
### अच्छा लिंक टेक्स्ट
|
||
|
|
|
||
|
|
अच्छा लिंक टेक्स्ट संक्षेप में बताता है कि लिंक के दूसरी तरफ क्या है। उपरोक्त उदाहरणों में छोटे पेंगुइन के बारे में बात करते हुए, लिंक प्रजाति के बारे में विकिपीडिया पृष्ठ पर है। वाक्यांश *थोड़ा पेंगुइन* सही लिंक टेक्स्ट के लिए बना देगा क्योंकि यह स्पष्ट करता है कि कोई व्यक्ति इस बारे में सीखेगा कि क्या वे लिंक पर क्लिक करते हैं - छोटे पेंगुइन।
|
||
|
|
|
||
|
|
> [छोटा पेंगुइन](https://en.wikipedia.org/wiki/Little_penguin), जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है।
|
||
|
|
|
||
|
|
✅ उन पृष्ठों को खोजने के लिए कुछ मिनटों के लिए वेब सर्फ करें जो अस्पष्ट लिंकिंग रणनीतियों का उपयोग करते हैं। अन्य, बेहतर-लिंक्ड साइटों के साथ उनकी तुलना करें। आप क्या सीखते हैं?
|
||
|
|
|
||
|
|
#### खोज इंजन नोट्स
|
||
|
|
|
||
|
|
अपनी साइट को सुनिश्चित करने के लिए एक अतिरिक्त बोनस के रूप में सभी के लिए सुलभ है, आप खोज इंजन को आपकी साइट पर भी नेविगेट करने में मदद करेंगे। खोज इंजन पृष्ठों के विषयों को जानने के लिए लिंक पाठ का उपयोग करते हैं। इसलिए अच्छे लिंक टेक्स्ट का उपयोग करना सभी की मदद करता है!
|
||
|
|
|
||
|
|
### ARIA
|
||
|
|
|
||
|
|
निम्नलिखित पृष्ठ की कल्पना करें:
|
||
|
|
|
||
|
|
| Product | Description | Order |
|
||
|
|
| ------------ | ------------------ | ------------ |
|
||
|
|
| Widget | [Description]('#') | [Order]('#') |
|
||
|
|
| Super widget | [Description]('#') | [Order]('#') |
|
||
|
|
|
||
|
|
इस उदाहरण में, वर्णन और आदेश के पाठ की नकल करना किसी ब्राउज़र का उपयोग करने वाले व्यक्ति के लिए समझ में आता है। हालाँकि, स्क्रीन रीडर का उपयोग करने वाला कोई व्यक्ति केवल संदर्भ के बिना *विवरण* और *आदेश* दोहराता है।
|
||
|
|
|
||
|
|
इस प्रकार के परिदृश्यों का समर्थन करने के लिए, HTML [एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषताओं का एक सेट का समर्थन करता है। ये विशेषताएँ आपको स्क्रीन पाठकों को अतिरिक्त जानकारी प्रदान करने की अनुमति देती हैं।
|
||
|
|
|
||
|
|
> ** नोट **: HTML के कई पहलुओं की तरह, ब्राउज़र और स्क्रीन रीडर समर्थन भिन्न हो सकते हैं। हालांकि, अधिकांश मेनलाइन क्लाइंट ARIA विशेषताओं का समर्थन करते हैं।
|
||
|
|
|
||
|
|
जब पृष्ठ का प्रारूप आपको अनुमति नहीं देता है, तो लिंक का वर्णन करने के लिए आप `aria-label` का उपयोग कर सकते हैं। विजेट के लिए विवरण के रूप में सेट किया जा सकता है
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<a href="#" aria-label="Widget description">description</a>
|
||
|
|
```
|
||
|
|
|
||
|
|
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/en-US/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=""`। यह स्क्रीन पाठकों को अनावश्यक रूप से सजावटी छवि की घोषणा करने से रोकता है।
|
||
|
|
|
||
|
|
✅ जैसा कि आप उम्मीद कर सकते हैं, खोज इंजन भी यह समझने में असमर्थ हैं कि एक छवि में क्या है। वे ऑल्ट टेक्स्ट का भी इस्तेमाल करते हैं। तो एक बार फिर, सुनिश्चित करना कि आपका पृष्ठ सुलभ है, अतिरिक्त बोनस प्रदान करता है!
|
||
|
|
|
||
|
|
## थे कीबोर्ड
|
||
|
|
|
||
|
|
कुछ उपयोगकर्ता माउस या ट्रैकपैड का उपयोग करने में असमर्थ हैं, इसके बजाय एक तत्व से दूसरे तक टैब के लिए कीबोर्ड इंटरैक्शन पर निर्भर हैं। आपकी वेब साइट के लिए यह महत्वपूर्ण है कि आप अपनी सामग्री को तार्किक क्रम में प्रस्तुत करें ताकि एक कीबोर्ड उपयोगकर्ता प्रत्येक इंटरैक्टिव तत्व तक पहुँच सके क्योंकि वे एक दस्तावेज़ को स्थानांतरित करते हैं।यदि आप अपने वेब पेजों को सिमेंटिक मार्कअप के साथ बनाते हैं और उनके विज़ुअल लेआउट को स्टाइल करने के लिए CSS का उपयोग करते हैं, तो आपकी साइट कीबोर्ड-नेवीगेबल होनी चाहिए, लेकिन इस पहलू को मैन्युअल रूप से जांचना महत्वपूर्ण है। [कीबोर्ड नेविगेशन रणनीतियों](https://webaim.org/techniques/keyboard/) के बारे में अधिक जानें।
|
||
|
|
|
||
|
|
✅ किसी भी वेब साइट पर जाएं और केवल अपने कीबोर्ड का उपयोग करके इसके माध्यम से नेविगेट करने का प्रयास करें। क्या काम करता है, क्या काम नहीं करता है? क्यों?
|
||
|
|
|
||
|
|
## सारांश
|
||
|
|
|
||
|
|
कुछ के लिए सुलभ वेब वास्तव में 'विश्वव्यापी वेब' नहीं है। आपके द्वारा बनाई जा सकने वाली साइटों को सुनिश्चित करने का सबसे अच्छा तरीका शुरू से ही सुलभता सर्वोत्तम प्रथाओं को शामिल करना है। जबकि अतिरिक्त चरण शामिल हैं, इन कौशल को अपने वर्कफ़्लो में शामिल करने का मतलब होगा कि आपके द्वारा बनाए गए सभी पृष्ठ सुलभ होंगे।
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚀 चुनौती
|
||
|
|
|
||
|
|
इस HTML को ले लो और इसे फिर से संभव के रूप में सुलभ होने के लिए फिर से लिखना, आपके द्वारा सीखी गई रणनीतियों को देखते हुए।
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>
|
||
|
|
Example
|
||
|
|
</title>
|
||
|
|
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="site-header">
|
||
|
|
<p class="site-title">Turtle Ipsum</p>
|
||
|
|
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||
|
|
</div>
|
||
|
|
<div class="main-nav">
|
||
|
|
<p class="nav-header">Resources</p>
|
||
|
|
<div class="nav-list">
|
||
|
|
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||
|
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||
|
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="main-content">
|
||
|
|
<div>
|
||
|
|
<p class="page-title">Welcome to Turtle Ipsum.
|
||
|
|
<a href="">Click here</a> to learn more.
|
||
|
|
</p>
|
||
|
|
<p class="article-text">
|
||
|
|
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div class="footer-section">
|
||
|
|
<span class="button">Sign up for turtle news</span>
|
||
|
|
</div><div class="footer-section">
|
||
|
|
<p class="nav-header footer-title">
|
||
|
|
Internal Pages
|
||
|
|
</p>
|
||
|
|
<div class="nav-list">
|
||
|
|
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||
|
|
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="footer-copyright">© 2016 Instrument</span>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||
|
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=hi)
|
||
|
|
|
||
|
|
## समीक्षा और स्व अध्ययन
|
||
|
|
|
||
|
|
कई सरकारों के पास सुलभता आवश्यकताओं के संबंध में कानून हैं। अपने देश की पहुंच कानूनों पर पढ़ें। क्या शामिल है, और क्या नहीं है? एक उदाहरण है [यह सरकारी वेब साइट](https://accessibility.blog.gov.uk/).
|
||
|
|
|
||
|
|
## असाइनमेंट
|
||
|
|
|
||
|
|
[एक गैर-सुलभ वेब साइट का विश्लेषण करें](assignment.hi.md)
|
||
|
|
|
||
|
|
क्रेडिट: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) साधन द्वारा
|