HTML Academy · पाठ

स्क्रीन रीडर से परीक्षण

ARIA कार्यान्वयन की जाँच के लिए VoiceOver और NVDA का उपयोग करें

पाठ 4, कुल 4 में से13 चरण

स्क्रीन रीडर से परीक्षण, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्क्रीन रीडर से परीक्षण क्यों करें

स्वचालित उपकरण accessibility समस्याओं में से केवल 30-40% पकड़ पाते हैं। वास्तविक स्क्रीन रीडर परीक्षण उन समस्याओं को उजागर करता है जिन्हें स्वचालित जाँच नहीं पकड़ पाती:

भ्रमित करने वाला पढ़ने का क्रम
अनुपयोगी ARIA घोषणाएँ
गायब focus प्रबंधन
भ्रमित करने वाले इंटरैक्टिव पैटर्न

Mac पर VoiceOver

VoiceOver macOS में पहले से शामिल है — इसे इंस्टॉल करने की आवश्यकता नहीं है:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

iOS पर VoiceOver

iPhone/iPad पर VoiceOver के साथ मोबाइल स्क्रीन रीडर अनुभव का परीक्षण करें:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

Windows पर NVDA

NVDA Windows के लिए एक निःशुल्क, मुक्त-स्रोत स्क्रीन रीडर है:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

स्क्रीन रीडर परीक्षण सूची

स्क्रीन रीडर से इन बातों की जाँच करें:

लोड होने पर पेज शीर्षक की घोषणा की जाती है
शीर्षक तार्किक नेविगेशन संरचना बनाते हैं
सभी images में अर्थपूर्ण या खाली alt text होता है
सभी फ़ॉर्म फ़ील्ड में labels होते हैं
बटनों और links के नाम स्पष्ट होते हैं
Modal focus trap सही ढंग से काम करता है
गतिशील सामग्री के अपडेट की घोषणा की जाती है

स्क्रीन रीडर की सामान्य bugs

वे समस्याएँ जिन्हें स्वचालित परीक्षण नहीं पकड़ते:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

कीबोर्ड-प्रथम परीक्षण

स्क्रीन रीडर का उपयोग करने से पहले केवल कीबोर्ड से परीक्षण करें:

माउस या ट्रैकपैड को डिस्कनेक्ट करें
केवल Tab से पूरे पेज पर नेविगेट करें
जाँचें कि हर इंटरैक्टिव तत्व तक पहुँचा जा सकता है
जाँचें कि सभी क्रियाएँ कीबोर्ड से की जा सकती हैं

स्वचालित accessibility परीक्षण उपकरण

मैन्युअल परीक्षण के साथ स्वचालित उपकरणों का भी उपयोग करें:

axe DevTools — Chrome extension; सबसे सटीक स्वचालित जाँचकर्ता
WAVE — wavebooth.com; पेज पर दृश्य overlay
Lighthouse — Chrome DevTools; Performance + Accessibility audit
pa11y — CLI tool; CI/CD pipelines के लिए बहुत उपयोगी

ARIA पैटर्न संदर्भ

W3C का ARIA Authoring Practices Guide (APG) संदर्भ कार्यान्वयन प्रदान करता है:

Accordion, Alert, Alert Dialog
Breadcrumb, Button, Carousel
Checkbox, Combobox, Dialog
Disclosure, Feed, Grid
Listbox, Menu, Menubar
Tab, Tooltip, Treeview

URL: w3.org/WAI/ARIA/apg/

निरंतर accessibility एकीकरण

अपने workflow में accessibility परीक्षण शामिल करें:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

परीक्षण सारांश

एक पूर्ण accessibility परीक्षण रणनीति:

डिज़ाइन — रंग कंट्रास्ट और स्पर्श लक्ष्य के आकार की जाँच करें
विकास — कीबोर्ड परीक्षण और स्वचालित axe स्कैन करें
समीक्षा — स्क्रीन रीडर परीक्षण (VoiceOver + NVDA)
CI/CD — स्वचालित pipeline में pa11y या axe
Production — Lighthouse और मैन्युअल नमूना जाँच

त्वरित जाँच

स्वचालित उपकरण accessibility समस्याओं में से कितने प्रतिशत को विश्वसनीय रूप से पकड़ सकते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति: स्क्रीन रीडर परीक्षण

परीक्षण की आवश्यक बातें:

VoiceOver (Mac/iOS) और NVDA (Windows) निःशुल्क और आवश्यक हैं
पहले केवल कीबोर्ड से परीक्षण करें; फिर स्क्रीन रीडर जोड़ें
स्वचालित उपकरण: axe, WAVE, Lighthouse, pa11y
स्वचालित परीक्षण केवल लगभग 30-40% समस्याएँ पकड़ते हैं
सही ARIA कार्यान्वयन के लिए APG पैटर्न देखें

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्क्रीन रीडर से परीक्षण” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्क्रीन रीडर से परीक्षण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्क्रीन रीडर से परीक्षण” में मैं क्या सीखूँगा?

ARIA कार्यान्वयन की जाँच के लिए VoiceOver और NVDA का उपयोग करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“स्क्रीन रीडर से परीक्षण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

टॉगल के लिए aria-expanded और aria-controls
aria-selected और टैब पैटर्न
लाइव क्षेत्र: aria-live aria-atomic aria-relevant
स्क्रीन रीडर से परीक्षण

← HTML Academy पर वापस जाएँ