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.
238 lines
35 KiB
238 lines
35 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
|
|
"translation_date": "2025-08-25T22:59:41+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
"language_code": "ne"
|
|
}
|
|
-->
|
|
# पहुँचयोग्य वेबपेजहरू बनाउने
|
|
|
|
|
|
> स्केच नोट [टोमोमी इमुरा](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 + प्लस साइन (+)` वा स्क्रिन रिजोल्युसन घटाएर नियन्त्रण गरिन्छ। यस प्रकारको जुमले सम्पूर्ण पृष्ठलाई पुनःआकार दिन्छ, त्यसैले [उत्तरदायी डिजाइन](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) प्रयोग गरेर रङ प्रयोगको लागि परीक्षण गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
|
|
|
|
### लाइटहाउस
|
|
|
|
तपाईंको ब्राउजरको डेभलपर टुल क्षेत्रमा, तपाईंले लाइटहाउस उपकरण फेला पार्नुहुनेछ। यो उपकरण वेबसाइटको पहुँचयोग्यता (र अन्य विश्लेषण) को पहिलो झलक पाउन महत्त्वपूर्ण छ। यद्यपि लाइटहाउसमा मात्र भर पर्नु हुँदैन, १००% स्कोर आधारभूत रूपमा धेरै उपयोगी हुन्छ।
|
|
|
|
✅ तपाईंको ब्राउजरको डेभलपर टुल प्यानलमा लाइटहाउस फेला पार्नुहोस् र कुनै पनि साइटमा विश्लेषण चलाउनुहोस्। तपाईंले के पत्ता लगाउनुहुन्छ?
|
|
|
|
## पहुँचयोग्यताका लागि डिजाइन गर्ने
|
|
|
|
पहुँचयोग्यता एकदम ठूलो विषय हो। तपाईंलाई सहयोग गर्नका लागि, धेरै स्रोतहरू उपलब्ध छन्।
|
|
|
|
- [Accessible U - मिनेसोटा विश्वविद्यालय](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 ले पृष्ठमा कुनै पनि तत्वको रूपमाथि पूर्ण नियन्त्रण प्रदान गर्दछ। तपाईंले आउटलाइन बिना पाठ बक्सहरू वा अन्डरलाइन बिना हाइपरलिङ्कहरू सिर्जना गर्न सक्नुहुन्छ। दुर्भाग्यवश, ती संकेतहरू हटाउँदा तिनीहरूमा निर्भर गर्ने व्यक्तिहरूका लागि नियन्त्रणको प्रकार पहिचान गर्न गाह्रो हुन सक्छ।
|
|
|
|
## लिङ्क पाठको महत्त्व
|
|
|
|
हाइपरलिङ्कहरू वेब नेभिगेसनको मुख्य हिस्सा हुन्। त्यसैले, स्क्रिन रिडरले लिङ्कहरू सही रूपमा पढ्न सक्ने सुनिश्चित गर्नु सबै प्रयोगकर्ताहरूलाई तपाईंको साइट नेभिगेट गर्न सक्षम बनाउँछ।
|
|
|
|
### स्क्रिन रिडर र लिङ्कहरू
|
|
|
|
जसरी तपाईंले अपेक्षा गर्नुहुन्छ, स्क्रिन रिडरले पृष्ठमा अन्य पाठ जस्तै लिङ्क पाठ पनि पढ्छ। यसलाई ध्यानमा राख्दै, तल देखाइएको पाठ स्वीकार्य लाग्न सक्छ।
|
|
|
|
> सानो पेंगुइन, कहिलेकाहीँ परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो। [यहाँ क्लिक गर्नुहोस्](https://en.wikipedia.org/wiki/Little_penguin) थप जानकारीको लागि।
|
|
|
|
> सानो पेंगुइन, कहिलेकाहीँ परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो। थप जानकारीको लागि https://en.wikipedia.org/wiki/Little_penguin भ्रमण गर्नुहोस्।
|
|
|
|
> **NOTE** तपाईंले पढ्न लाग्नुभएको छ, तपाईंले **कहिल्यै पनि** माथिको जस्तो लिङ्कहरू सिर्जना गर्नु हुँदैन।
|
|
|
|
### URL प्रयोग गर्दा समस्या
|
|
|
|
स्क्रिन रिडरले पाठ पढ्छ। यदि पाठमा URL छ भने, स्क्रिन रिडरले URL पढ्नेछ। सामान्यतया, URL ले अर्थपूर्ण जानकारी प्रदान गर्दैन, र यो झर्कोलाग्दो सुनिन सक्छ।
|
|
|
|
### "यहाँ क्लिक गर्नुहोस्" प्रयोग गर्दा समस्या
|
|
|
|
स्क्रिन रिडरले पृष्ठका केवल हाइपरलिङ्कहरू मात्र पढ्ने क्षमता पनि राख्छ, जसरी दृष्टिवान व्यक्तिले पृष्ठमा लिङ्कहरू स्क्यान गर्नेछन्। यदि लिङ्क पाठ सधैं "यहाँ क्लिक गर्नुहोस्" छ भने, प्रयोगकर्ताले "यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्..." मात्र सुन्नेछन्। सबै लिङ्कहरू एकअर्कासँग भिन्न नहुनेछन्।
|
|
|
|
### राम्रो लिङ्क पाठ
|
|
|
|
राम्रो लिङ्क पाठले लिङ्कको अर्को छेउमा के छ भनेर संक्षेपमा वर्णन गर्दछ। माथिको सानो पेंगुइनको उदाहरणमा, लिङ्क प्रजातिको विकिपीडिया पृष्ठमा छ। *सानो पेंगुइन* वाक्यांशले लिङ्क पाठको रूपमा उत्तम काम गर्नेछ किनभने यसले कसैले लिङ्क क्लिक गर्दा के सिक्नेछ भन्ने स्पष्ट बनाउँछ - सानो पेंगुइन।
|
|
|
|
> [सानो पेंगुइन](https://en.wikipedia.org/wiki/Little_penguin), कहिलेकाहीँ परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो।
|
|
|
|
✅ केही मिनेट वेब ब्राउज गर्नुहोस् र अस्पष्ट लिङ्किङ रणनीतिहरू प्रयोग गर्ने पृष्ठहरू फेला पार्नुहोस्। तिनीहरूलाई राम्रोसँग लिङ्क गरिएका साइटहरूसँग तुलना गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
|
|
|
|
#### सर्च इन्जिन नोटहरू
|
|
|
|
तपाईंको साइट सबैका लागि पहुँचयोग्य बनाउन सुनिश्चित गर्दा, तपाईंले सर्च इन्जिनहरूलाई पनि तपाईंको साइट नेभिगेट गर्न मद्दत गर्नुहुनेछ। सर्च इन्जिनहरूले पृष्ठहरूको विषयवस्तु बुझ्न लिङ्क पाठ प्रयोग गर्छन्। त्यसैले राम्रो लिङ्क पाठ प्रयोग गर्दा सबैलाई फाइदा पुग्छ!
|
|
|
|
### ARIA
|
|
|
|
तलको पृष्ठलाई कल्पना गर्नुहोस्:
|
|
|
|
| उत्पादन | विवरण | अर्डर |
|
|
| ------------ | ------------------ | ------------ |
|
|
| विजेट | [विवरण](../../../../1-getting-started-lessons/3-accessibility/') | [अर्डर](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
| सुपर विजेट | [विवरण](../../../../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` प्रयोग गरेर लिङ्कलाई वर्णन गर्न सक्नुहुन्छ जब पृष्ठको ढाँचाले तपाईंलाई अनुमति दिदैन। विजेटको विवरणलाई यसरी सेट गर्न सकिन्छ:
|
|
|
|
``` html
|
|
<a href="#" aria-label="Widget description">description</a>
|
|
```
|
|
|
|
✅ सामान्यतया, माथि वर्णन गरिएको सेम्यान्टिक मार्कअपको प्रयोगले ARIA को प्रयोगलाई प्रतिस्थापन गर्छ, तर कहिलेकाहीँ विभिन्न HTML विजेटहरूको लागि कुनै सेम्यान्टिक समकक्ष हुँदैन। राम्रो उदाहरण हो ट्री। ट्रीको लागि कुनै 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://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
|
|
धेरै सरकारहरूले पहुँचयोग्यता आवश्यकतासम्बन्धी कानुनहरू बनाएका छन्। आफ्नो देशको पहुँचयोग्यता कानुनहरूको बारेमा अध्ययन गर्नुहोस्। के समेटिएको छ, र के समेटिएको छैन? एउटा उदाहरण [यो सरकारी वेब साइट](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) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। |