# पहुँचयोग्य वेबपृष्ठहरू बनाउने
> स्केच नोट [टोमोमी इमुरा](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) अद्भुत सहायक प्रविधिहरू हुन् जसले डिजिटल पाठलाई भाषण वा ब्रेल आउटपुटमा रूपान्तरण गर्छ। यी मुख्य रूपमा दृष्टि कमजोर व्यक्तिहरूले प्रयोग गर्छन्, तर यसले डिस्लेक्सिया जस्ता सिकाइ अपाङ्गता भएका प्रयोगकर्ताहरूलाई पनि मद्दत गर्छ।
स्क्रिन रिडरलाई वेबको लागि आवाज कथाकारको रूपमा सोच्नुहोस्। यसले सामग्रीलाई तार्किक क्रममा पढ्छ, बटन र लिंक जस्ता अन्तरक्रियात्मक तत्वहरूको घोषणा गर्छ, र कुशल नेभिगेसनको लागि किबोर्ड सर्टकटहरू प्रदान गर्छ। तर, स्क्रिन रिडरहरूले मात्र प्रभावकारी रूपमा काम गर्न सक्छन् यदि वेबसाइटहरू उचित संरचना र अर्थपूर्ण सामग्रीको साथ निर्माण गरिएका छन् भने।
**प्लेटफर्महरूमा लोकप्रिय स्क्रिन रिडरहरू:**
- **विन्डोज**: [NVDA](https://www.nvaccess.org/about-nvda/) (निःशुल्क र सबैभन्दा लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (बिल्ट-इन)
- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (बिल्ट-इन र धेरै सक्षम)
- **एन्ड्रोइड**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (बिल्ट-इन)
- **लिनक्स**: [Orca](https://wiki.gnome.org/Projects/Orca) (निःशुल्क र ओपन-सोर्स)
**स्क्रिन रिडरहरूले वेब सामग्री कसरी नेभिगेट गर्छन्:**
स्क्रिन रिडरहरूले अनुभवी प्रयोगकर्ताहरूका लागि ब्राउजिङलाई कुशल बनाउने धेरै नेभिगेसन विधिहरू प्रदान गर्छन्:
- **क्रमिक पढाइ**: सामग्रीलाई माथिबाट तलसम्म पढ्छ, किताबको जस्तै
- **ल्यान्डमार्क नेभिगेसन**: पृष्ठ खण्डहरू (हेडर, नेभ, मेन, फुटर) बीचमा जम्प गर्नुहोस्
- **हेडिङ नेभिगेसन**: पृष्ठ संरचना बुझ्न हेडिङहरू बीचमा स्किप गर्नुहोस्
- **लिंक सूचीहरू**: छिटो पहुँचको लागि सबै लिंकहरूको सूची उत्पन्न गर्नुहोस्
- **फारम नियन्त्रणहरू**: इनपुट फिल्डहरू र बटनहरू बीचमा सिधै नेभिगेट गर्नुहोस्
> 💡 **डेभलपर इनसाइट**: 68% स्क्रिन रिडर प्रयोगकर्ताहरू मुख्य रूपमा हेडिङहरूद्वारा नेभिगेट गर्छन् ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))। यही कारणले गर्दा उचित हेडिङ संरचना अत्यन्त महत्त्वपूर्ण छ!
### परीक्षण कार्यप्रवाह निर्माण गर्दै
प्रभावकारी पहुँचयोग्यता परीक्षणले स्वचालित उपकरणहरू र म्यानुअल सत्यापन दुवै आवश्यक छ। यहाँ एक व्यवस्थित दृष्टिकोण छ जसले धेरै समस्याहरू समेट्छ:
**आवश्यक म्यानुअल परीक्षण कार्यप्रवाह:**
```mermaid
graph TD
A[Start Testing] --> B{Keyboard Navigation}
B --> C[Tab through all interactive elements]
C --> D{Screen Reader Testing}
D --> E[Test with NVDA/VoiceOver]
E --> F{Zoom Testing}
F --> G[Zoom to 200% and test functionality]
G --> H{Color/Contrast Check}
H --> I[Verify all text meets contrast ratios]
I --> J{Focus Management}
J --> K[Ensure focus indicators are visible]
K --> L[Testing Complete]
```
**चरण-दर-चरण परीक्षण चेकलिस्ट:**
1. **किबोर्ड नेभिगेसन**: केवल Tab, Shift+Tab, Enter, Space, र Arrow कुञ्जीहरू प्रयोग गर्नुहोस्
2. **स्क्रिन रिडर परीक्षण**: NVDA, VoiceOver, वा Narrator सक्षम गर्नुहोस् र आँखा बन्द गरेर नेभिगेट गर्नुहोस्
3. **जूम परीक्षण**: 200% र 400% जूम स्तरहरूमा परीक्षण गर्नुहोस्
4. **रङ कन्ट्रास्ट सत्यापन**: सबै पाठ र UI घटकहरू जाँच गर्नुहोस्
5. **फोकस संकेतक परीक्षण**: सुनिश्चित गर्नुहोस् कि सबै अन्तरक्रियात्मक तत्वहरूमा देखिने फोकस अवस्था छ
✅ **लाइटहाउसबाट सुरु गर्नुहोस्**: तपाईंको ब्राउजरको DevTools खोल्नुहोस्, लाइटहाउस पहुँचयोग्यता अडिट चलाउनुहोस्, त्यसपछि तपाईंको म्यानुअल परीक्षण फोकस क्षेत्रहरूलाई मार्गदर्शन गर्न परिणामहरू प्रयोग गर्नुहोस्।
### जूम र म्याग्निफिकेसन उपकरणहरू
धेरै प्रयोगकर्ताहरूले सामग्रीलाई पढ्न योग्य बनाउन म्याग्निफिकेसनमा निर्भर गर्छन्। यसमा दृष्टि कमजोर व्यक्तिहरू, वृद्ध व्यक्तिहरू, र उज्यालो घाममा वा अस्थायी दृष्टि समस्याहरू भएका प्रयोगकर्ताहरू समावेश छन्। आधुनिक जूम प्रविधिहरू साधारण छवि स्केलिङभन्दा धेरै परिपक्व भएका छन्।
जूम कसरी काम गर्छ भन्ने कुरा बुझ्दा तपाईंले उत्तरदायी डिजाइनहरू सिर्जना गर्न सक्नुहुन्छ जसले कुनै पनि म्याग्निफिकेसन स्तरमा कार्यात्मक र सुन्दर रहन्छ।
**आधुनिक ब्राउजर जूम क्षमताहरू:**
- **पृष्ठ जूम**: सबै सामग्रीलाई समानुपातिक रूपमा स्केल गर्छ (पाठ, छविहरू, लेआउट) - यो प्राथमिक विधि हो
- **केवल पाठ जूम**: मूल लेआउट कायम राख्दै फन्ट आकार बढाउँछ
- **पिन्च-टु-जूम**: अस्थायी म्याग्निफिकेसनको लागि मोबाइल इशारा समर्थन
- **ब्राउजर समर्थन**: सबै आधुनिक ब्राउजरहरूले कार्यक्षमता बिग्रन बिना 500% सम्म जूम समर्थन गर्छन्
**विशेष म्याग्निफिकेसन सफ्टवेयर:**
- **विन्डोज**: [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 ले सामग्रीलाई 200% जूम गर्दा कार्यात्मक रहन आवश्यक छ। यस स्तरमा, तेर्सो स्क्रोलिङ न्यूनतम हुनुपर्छ, र सबै अन्तरक्रियात्मक तत्वहरू पहुँचयोग्य रहनुपर्छ।
✅ **तपाईंको उत्तरदायी डिजाइन परीक्षण गर्नुहोस्**: तपाईंको ब्राउजरलाई 200% र 400% जूम गर्नुहोस्। के तपाईंको लेआउट सुन्दर रूपमा अनुकूलित हुन्छ? के तपाईं अझै पनि अत्यधिक स्क्रोलिङ बिना सबै कार्यक्षमतामा पहुँच गर्न सक्नुहुन्छ?
## आधुनिक पहुँचयोग्यता परीक्षण उपकरणहरू
अब तपाईंले सहायक प्रविधिहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो, आउनुहोस् ती उपकरणहरूको अन्वेषण गरौं जसले तपाईंलाई पहुँचयोग्य वेबसाइटहरू निर्माण गर्न र परीक्षण गर्न मद्दत गर्छ। स्वचालित परीक्षणलाई म्यानुअल सत्यापनसँग संयोजन गर्दा तपाईंलाई तपाईंको साइटहरू सबैका लागि काम गर्छन् भन्ने विश्वास दिलाउँछ।
आधुनिक पहुँचयोग्यता परीक्षणले व्यापक दृष्टिकोण अनुसरण गर्छ: स्वचालित उपकरणहरूले स्पष्ट समस्याहरू समात्छन्, जबकि म्यानुअल परीक्षणले वास्तविक-विश्व उपयोगिता सुनिश्चित गर्छ।
### रङ कन्ट्रास्ट परीक्षण
रङ कन्ट्रास्ट पहुँचयोग्यताको सबैभन्दा सामान्य समस्या हो, तर यो समाधान गर्न सबैभन्दा सजिलो पनि हो। राम्रो कन्ट्रास्टले सबैलाई फाइदा पुर्याउँछ—दृष्टि कमजोर भएका प्रयोगकर्ताहरूदेखि उज्यालो घाममा स्क्रिन हेर्ने व्यक्तिहरूसम्म।
**WCAG कन्ट्रास्ट आवश्यकताहरू:**
| पाठ प्रकार | WCAG AA (न्यूनतम) | WCAG AAA (उन्नत) |
|------------|--------------------|------------------|
| **सामान्य पाठ** (18pt भन्दा कम) | 4.5:1 कन्ट्रास्ट अनुपात | 7:1 कन्ट्रास्ट अनुपात |
| **ठूलो पाठ** (18pt+ वा 14pt+ बोल्ड) | 3:1 कन्ट्रास्ट अनुपात | 4.5:1 कन्ट्रास्ट अनुपात |
| **UI घटकहरू** (बटनहरू, फारम सीमा) | 3:1 कन्ट्रास्ट अनुपात | 3:1 कन्ट्रास्ट अनुपात |
**आवश्यक परीक्षण उपकरणहरू:**
- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - कलर पिकर सहित डेस्कटप एप
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - वेब-आधारित तत्काल प्रतिक्रिया सहित
- [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD का लागि डिजाइन टूल प्लगइन
- [Accessible Colors](https://accessible-colors.com/) - पहुँचयोग्य रङ प्यालेटहरू फेला पार्नुहोस्
✅ **रङ प्यालेटहरू राम्रो बनाउनुहोस्**: तपाईंको ब्रान्ड रङहरूबाट सुरु गर्नुहोस् र पहुँचयोग्य भेरिएसनहरू सिर्जना गर्न कन्ट्रास्ट चेकरहरू प्रयोग गर्नुहोस्। यीलाई तपाईंको डिजाइन प्रणालीको पहुँचयोग्य रङ टोकनको रूपमा दस्तावेज गर्नुहोस्।
### व्यापक पहुँचयोग्यता अडिटिङ
सबैभन्दा प्रभावकारी पहुँचयोग्यता परीक्षणले धेरै दृष्टिकोणहरूलाई संयोजन गर्छ। कुनै एकल उपकरणले सबै कुरा समात्दैन, त्यसैले विभिन्न विधिहरूको साथ परीक्षण दिनचर्या निर्माण गर्दा व्यापक कभरेज सुनिश्चित हुन्छ।
**ब्राउजर-आधारित परीक्षण (DevTools मा निर्मित):**
- **क्रोम/एज**: लाइटहाउस पहुँचयोग्यता अडिट + पहुँचयोग्यता प्यानल
- **फायरफक्स**: पहुँचयोग्यता निरीक्षक विस्तृत ट्री दृश्य सहित
- **सफारी**: वेब निरीक्षकमा अडिट ट्याब VoiceOver सिमुलेशन सहित
**व्यावसायिक परीक्षण एक्सटेन्सनहरू:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक स्वचालित परीक्षण
- [WAVE](https://wave.webaim.org/extension/) - त्रुटि हाइलाइटिङ सहित दृश्य प्रतिक्रिया
- [Accessibility Insights](https://accessibilityinsights.io/) - माइक्रोसफ्टको व्यापक परीक्षण सूट
**कमाण्ड-लाइन र CI/CD एकीकरण:**
- [axe-core](https://github.com/dequelabs/axe-core) - स्वचालित परीक्षणका लागि जाभास्क्रिप्ट लाइब्रेरी
- [Pa11y](https://pa11y.org/) - कमाण्ड-लाइन पहुँचयोग्यता परीक्षण उपकरण
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वचालित पहुँचयोग्यता स्कोरिङ
> 🎯 **परीक्षण लक्ष्य**: लाइटहाउस पहुँचयोग्यता स्कोर 95+ लाई तपाईंको आधार रेखा बनाउनुहोस्। सम्झनुहोस्, स्वचालित उपकरणहरूले केवल 30-40% पहुँचयोग्यता समस्याहरू समात्छन्—म्यानुअल परीक्षण अझै आवश्यक छ!
## पहुँचयोग्यता सुरुबाट निर्माण गर्दै
वेब पहुँचयोग्यताको सबैभन्दा प्रभावकारी दृष्टिकोण भनेको पहिलो दिनदेखि नै यसलाई तपाईंको आधारमा निर्माण गर्नु हो। पछि पहुँचयोग्यता समायोजन गर्नु केवल महँगो र समय-लाग्ने मात्र होइन—यसले अक्सर खराब प्रयोगकर्ता अनुभवहरू निम्त्याउँछ।
पहुंचयोग्यतालाई घर निर्माण जस्तै सोच्नुहोस्: व्हीलचेयर पहुँचयोग्यता समावेश गर्न प्रारम्भिक वास्तुकला योजनाहरूमा समावेश गर्नु धेरै सजिलो छ, निर्माण पूरा भएपछि र्याम्पहरू र चौडा ढोकाहरू थप्नुभन्दा।
### POUR सिद्धान्तहरू: तपाईंको पहुँचयोग्यता आधार
वेब सामग्री पहुँचयोग्यता दिशानिर्देशहरू (WCAG) चार आधारभूत सिद्धान्तहरूमा आधारित छन् जसलाई POUR भनिन्छ। यी सिद्धान्तहरूले विविध क्षमताहरू र प्रविधिहरू भएका प्रयोगकर्ताहरूका लागि सामग्री पहुँचयोग्य बनाउने फ्रेमवर्क प्रदान गर्छन्।
POUR बुझ्दा तपाईंले पहुँचयोग्यता निर्णयहरू लिन मद्दत गर्छ जसले सबैका लागि समावेशी अनुभवहरू सिर्जना गर्छ।
**🔍 बुझ्न सकिने**: जानकारी प्रयोगकर्ताहरूले आफ्नो उपलब्ध इन्द्रियहरू मार्फत बुझ्न सक्ने तरिकामा प्रस्तुत गर्नुपर्छ
- गैर-पाठ सामग्रीका लागि पाठ विकल्पहरू प्रदान गर्नुहोस् (छविहरू, भिडियोहरू, अडियो)
- सबै पाठ र UI घटकहरूको लागि पर्याप्त रङ कन्ट्रास्ट सुनिश्चित गर्नुहोस्
- मल्टिमिडिया सामग्रीका लागि क्याप्सन र ट्रान्सक्रिप्टहरू प्रस्ताव गर्नुहोस्
- सामग्रीलाई 200% सम्म पुन: आकार दिँदा कार्यात्मक रहन डिजाइन गर्नुहोस्
- जानकारी व्यक्त गर्न (केवल रङ मात्र होइन) बहु-संवेदी विशेषताहरू प्रयोग गर्नुहोस्
**🎮 सञ्चालन योग्य**: सबै इन्टरफेस घटकहरू उपलब्ध इनपुट विधिहरू मार्फत सञ्चालन योग्य हुनुपर्छ
- सबै कार्यक्षमता किबोर्ड नेभिगेसन मार्फत पहुँचयोग्य बनाउनुहोस्
- प्रयोगकर्ताहरूलाई सामग्री पढ्न र अन्तरक्रिया गर्न पर्याप्त समय प्रदान गर्नुहोस्
- ज्वरो वा भर्टिगो विकारहरू निम्त्याउने सामग्रीबाट बच्नुहोस्
- स्पष्ट संरचना र ल्यान्डमार्कहरू सहित प्रयोगकर्ताहरूलाई कुशलतापूर्वक नेभिगेट गर्न मद्दत गर्नुहोस्
- अन्तरक्रियात्मक तत्वहरूमा पर्याप्त लक्ष्य आकारहरू (न्यूनतम 44px) सुनिश्चित गर्नुहोस्
**📖 बुझ्न सकिने**: जानकारी र UI सञ्चालन स्पष्ट र बुझ्न योग्य हुनुपर्छ
- तपाईंको दर्शकहरूको लागि उपयुक्त स्पष्ट, सरल भाषा प्रयोग गर्नुहोस्
- सामग्रीले पूर्वानुमान योग्य, सुसंगत तरिकामा देखा पर्नु र सञ्चालन गर्नु पर्छ
- प्रयोगकर्ता इनपुटका लागि स्पष्ट निर्देशनहरू र त्रुटि सन्देशहरू प्रदान गर्नुहोस्
- फारमहरूमा प्रयोगकर्ताहरूलाई गल्तीहरू बुझ्न र सुधार गर्न मद्दत गर्नुहोस्
- तार्किक पढ्ने क्रम र जानकारीको पदानुक्रमको साथ सामग्री व्यवस्थित गर्नुहोस्
**💪 मजबुत**: सामग्रीले विभिन्न प्रविधिहरू र सहायक उपकरणहरूमा विश्वसनीय रूपमा काम गर्नुपर्छ
- तपाईंको आधारको रूपमा मान्य, सेम्यान्टिक HTML प्रयोग गर्नुहोस्
- वर्तमान र भविष्यका सहायक प्रविधिहरूसँग अनुकूलता सुनिश्चित गर्नुहोस्
- मार्कअपका लागि वेब मापदण्डहरू र उत्कृष्ट अभ्यासहरू अनुसरण गर्नुहोस्
- विभिन्न ब्राउजरहरू, उपकरणहरू, र सहायक उपकरणहरूमा परीक्षण गर्नुहोस्
- सामग्रीलाई संरचना गर्नुहोस् ताकि उन्नत सुविधाहरू समर्थित नभएको अवस्थामा पनि यो सुन्दर रूपमा काम गरोस्
## पहुँचयोग्य दृश्य डिजाइन सिर्जना गर्दै
राम्रो दृश्य डिजाइन र पहुँचयोग्यता हातमा हात मिलाएर जान्छ। जब तपाईं पहुँचयोग्यताको साथ डिजाइन गर्नुहुन्छ, तपाईंले अक्सर पत्ता लगाउनुहुन्छ
### फोकस संकेतकहरू र अन्तरक्रिया डिजाइन
फोकस संकेतकहरू कर्सरको डिजिटल संस्करण हुन्—यीले किबोर्ड प्रयोगकर्ताहरूलाई पृष्ठमा कहाँ छन् भनेर देखाउँछन्। राम्रोसँग डिजाइन गरिएका फोकस संकेतकहरूले सबैका लागि अनुभवलाई स्पष्ट र अनुमानयोग्य बनाउँछन्।
**आधुनिक फोकस संकेतकका उत्कृष्ट अभ्यासहरू:**
```css
/* Enhanced focus styles that work across browsers */
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}
/* Remove focus outline for mouse users, preserve for keyboard users */
button:focus:not(:focus-visible) {
outline: none;
}
/* Focus-within for complex components */
.card:focus-within {
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
border-color: #4A90A4;
}
/* Ensure focus indicators meet contrast requirements */
.custom-focus:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #000000;
}
```
**फोकस संकेतक आवश्यकताहरू:**
- **दृश्यता**: वरपरका तत्वहरूसँग कम्तीमा 3:1 को कन्ट्रास्ट अनुपात हुनुपर्छ
- **चौडाइ**: सम्पूर्ण तत्वको वरिपरि न्यूनतम 2px मोटाई हुनुपर्छ
- **अविरलता**: फोकस अन्यत्र सर्ने सम्म दृश्यमान रहनुपर्छ
- **भिन्नता**: अन्य UI अवस्थाहरूबाट दृश्य रूपमा फरक हुनुपर्छ
> 💡 **डिजाइन सुझाव**: उत्कृष्ट फोकस संकेतकहरूले प्रायः दृश्यता सुनिश्चित गर्न outline, box-shadow, र रंग परिवर्तनको संयोजन प्रयोग गर्छन्।
✅ **फोकस संकेतकहरूको अडिट गर्नुहोस्**: आफ्नो वेबसाइटमा ट्याब मार्फत जाँच गर्नुहोस् र कुन तत्वहरूमा स्पष्ट फोकस संकेतक छन् भनेर नोट गर्नुहोस्। के कुनै देख्न गाह्रो छ वा पूर्ण रूपमा हराएको छ?
### सेम्यान्टिक HTML: पहुँचयोग्यताको आधार
सेम्यान्टिक HTML सहायक प्रविधिहरूको लागि स्पष्ट रोडम्याप प्रदान गर्ने जस्तै हो। जब तपाईं HTML तत्वहरूलाई तिनीहरूको उद्देश्य अनुसार प्रयोग गर्नुहुन्छ, तपाईं स्क्रिन रिडरहरू, किबोर्डहरू, र अन्य उपकरणहरूलाई प्रयोगकर्ताहरूलाई प्रभावकारी रूपमा नेभिगेट गर्न मद्दत गर्न आवश्यक जानकारी प्रदान गर्दै हुनुहुन्छ।
सेम्यान्टिक HTMLलाई राम्रोसँग व्यवस्थित पुस्तकालय र स्पष्ट श्रेणीहरू र संकेतहरू भएको पुस्तकालयको बीचको भिन्नता जस्तै सोच्नुहोस्। दुवैमा समान जानकारी हुन्छ, तर केवल एक मात्र वास्तवमा प्रयोगयोग्य हुन्छ।
**पृष्ठ संरचनाको पहुँचयोग्य निर्माण ब्लकहरू:**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**किन सेम्यान्टिक HTMLले पहुँचयोग्यता परिवर्तन गर्छ:**
| सेम्यान्टिक तत्व | उद्देश्य | स्क्रिन रिडर लाभ |
|------------------|---------|----------------------|
| `` | पृष्ठ वा खण्डको शीर्षक | "ब्यानर ल्यान्डमार्क" - शीर्षमा छिटो नेभिगेसन |
| `