इस मॉड्यूल में, सुलभता जांच के लिए सहायक टेक्नोलॉजी (एटी) का इस्तेमाल करने पर फ़ोकस किया गया है. दिव्यांग व्यक्ति, किसी टास्क को करने की क्षमताओं को बढ़ाने, बनाए रखने या बेहतर बनाने के लिए, एटी का इस्तेमाल कर सकता है.
डिजिटल स्पेस में, एटी ये हो सकते हैं:
- कोई या कम टेक्नोलॉजी: हेड और माउथ स्टिक, हाथ से इस्तेमाल होने वाले ज़ूम करने वाले उपकरण, बड़े बटन वाले डिवाइस
- हाई-टेक: वॉइस-ऐक्टिवेटेड डिवाइस, आंखों को ट्रैक करने वाले डिवाइस, अडैप्टिव कीबोर्ड और माउस
- हार्डवेयर: स्विच बटन, काम के हिसाब से बने कीबोर्ड, अपने-आप रीफ़्रेश होने वाला ब्रेल डिवाइस
- सॉफ़्टवेयर: लिखाई को बोली में बदलने वाले प्रोग्राम, लाइव कैप्शन, स्क्रीन रीडर
हमारा सुझाव है कि आप टेस्टिंग के पूरे वर्कफ़्लो में, कई तरह के एटी का इस्तेमाल करें.
स्क्रीन रीडर की जांच से जुड़ी बुनियादी बातें
इस मॉड्यूल में, हम सबसे लोकप्रिय डिजिटल एटी, स्क्रीन रीडर पर फ़ोकस करते हैं. स्क्रीन रीडर एक ऐसा सॉफ़्टवेयर है जो किसी वेबसाइट या ऐप्लिकेशन के कोड को पढ़ता है. इसके बाद, वह उपयोगकर्ता के लिए उस जानकारी को बोली या ब्रेल में बदल देता है.
स्क्रीन रीडर उन लोगों के लिए बेहद ज़रूरी हैं जो दृष्टिहीन और सुन नहीं सकते. हालांकि, इनसे कम दृष्टि, पढ़ने या सीखने-बात करने से जुड़ी समस्याओं वाले लोगों को भी फ़ायदा मिल सकता है.
ब्राउज़र के साथ काम करना
स्क्रीन रीडर के कई विकल्प उपलब्ध हैं. डेस्कटॉप कंप्यूटर के लिए JAWS, NVDA, और VoiceOver, और मोबाइल डिवाइसों के लिए VoiceOver और Talkback, सबसे ज़्यादा इस्तेमाल किए जाने वाले स्क्रीन रीडर हैं.
आपके ऑपरेटिंग सिस्टम (ओएस), पसंदीदा ब्राउज़र, और इस्तेमाल किए जा रहे डिवाइस के आधार पर, कोई एक स्क्रीन रीडर सबसे अच्छा विकल्प हो सकता है. ज़्यादातर स्क्रीन रीडर, खास हार्डवेयर और वेब ब्राउज़र के हिसाब से बनाए जाते हैं. जब किसी ऐसे ब्राउज़र के साथ स्क्रीन रीडर का इस्तेमाल किया जाता है जिसके लिए उसे कैलिब्रेट नहीं किया गया था, तो आपको ज़्यादा "गड़बड़ियों" या अनचाहे व्यवहार का सामना करना पड़ सकता है. स्क्रीन रीडर, यहां दिए गए कॉम्बिनेशन में इस्तेमाल करने पर सबसे बेहतर तरीके से काम करते हैं.
| स्क्रीन रीडर | ओएस | ब्राउज़र के साथ काम करना |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome और Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome और Firefox |
| VoiceOver (मोबाइल के लिए) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
स्क्रीन रीडर के निर्देश
अपने डेस्कटॉप या मोबाइल डिवाइस के लिए स्क्रीन रीडर सॉफ़्टवेयर का सही सेट अप करने के बाद, पिछली टेबल में दिए गए स्क्रीन रीडर दस्तावेज़ देखें और टेक्नोलॉजी के बारे में जानने के लिए स्क्रीन रीडर से जुड़े कुछ ज़रूरी निर्देशों का पालन करें. अगर आपने पहले कभी स्क्रीन रीडर का इस्तेमाल किया है, तो कोई नया स्क्रीन रीडर आज़माएं!
सुलभता की जांच के लिए स्क्रीन रीडर का इस्तेमाल करते समय, आपका मकसद अपने कोड में ऐसी समस्याओं का पता लगाना होता है जो आपकी वेबसाइट या ऐप्लिकेशन के इस्तेमाल में रुकावट डालती हैं. स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति के अनुभव को एमुलेट करना आपका मकसद नहीं होता. इसलिए, कुछ बुनियादी जानकारी, स्क्रीन रीडर के कुछ निर्देशों, और थोड़ी (या ज़्यादा) प्रैक्टिस की मदद से, बहुत कुछ किया जा सकता है.
अगर आपको स्क्रीन रीडर और अन्य एटी का इस्तेमाल करने वाले लोगों के उपयोगकर्ता अनुभव को बेहतर तरीके से समझना है, तो इस अहम जानकारी को पाने के लिए कई संगठनों और लोगों से जुड़ें. ध्यान रखें कि नियमों के एक सेट के हिसाब से कोड की जांच करने के लिए एटी का इस्तेमाल करने और उपयोगकर्ताओं से उनके अनुभव के बारे में पूछने पर, अक्सर अलग-अलग नतीजे मिलते हैं. सभी के लिए प्रॉडक्ट बनाने के लिए, ये दोनों चीज़ें ज़रूरी हैं.
डेस्कटॉप स्क्रीन रीडर के लिए मुख्य निर्देश
| एलिमेंट | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| सामान्य आदेश कुंजियां | शामिल करें | Control+Option |
| ऑडियो रोकें | कंट्रोल | कंट्रोल |
| अगला/पिछला लेख पढ़ें | ↓ या ↑ | Control+Option+→ या ← |
| पढ़ना शुरू करना | शामिल करें↓ | Control+Option+A |
| एलिमेंट सूची/रोटर | NVDA + F7 | कंट्रोल+Option+यू |
| लैंडमार्क | D | Control+Option+U |
| शीर्षक | घं | Control+Option+Command+H |
| लिंक | K | Control+Option+Command+L |
| फ़ॉर्म कंट्रोल | Control+Option+Command+J | |
| टेबल | T | Control+OptionCommand+T |
| टेबल में | InsertAlt + ↓ ↑ ← → | कंट्रोल+Option+↓ ↑ ← → |
मोबाइल स्क्रीन रीडर के लिए मुख्य निर्देश
| एलिमेंट | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| एक्सप्लोर करें | स्क्रीन पर एक उंगली को खींचें और छोड़ें | स्क्रीन पर एक उंगली को खींचें और छोड़ें |
| चुनना या चालू करना | दो बार टैप करें | दो बार टैप करें |
| ऊपर या नीचे ले जाएं | दो उंगलियों से, ऊपर या नीचे की ओर स्वाइप करें | तीन उंगलियों से ऊपर या नीचे की ओर स्वाइप करें |
| पेज बदलना | दो उंगलियों से बाईं या दाईं ओर स्वाइप करना | तीन उंगलियों से बाईं या दाईं ओर स्वाइप करें |
| अगला/पिछला | एक उंगली से बाईं या दाईं ओर स्वाइप करना | एक उंगली से बाईं या दाईं ओर स्वाइप करना |
स्क्रीन रीडर की जांच का डेमो
अपने डेमो की जांच करने के लिए, हमने macOS पर चलने वाले लैपटॉप पर Safari का इस्तेमाल किया और आवाज़ रिकॉर्ड की. किसी भी स्क्रीन रीडर का इस्तेमाल करके, इन चरणों को पूरा किया जा सकता है. हालांकि, हो सकता है कि आपको कुछ गड़बड़ियां इस मॉड्यूल में बताए गए तरीके से अलग तरीके से दिखें.
चरण 1
अपडेट किए गए CodePen पर जाएं. इसमें, सुलभता से जुड़े सभी अपडेट अपने-आप और मैन्युअल तरीके से लागू किए गए हैं.
अगले टेस्ट करने के लिए, इसे डीबग मोड में देखें. यह ज़रूरी है, क्योंकि इससे डेमो वेब पेज के चारों ओर मौजूद <iframe> हट जाता है. इसकी वजह से, टेस्टिंग टूल में रुकावट आ सकती है. CodePen के डीबग मोड के बारे में ज़्यादा जानें.
दूसरा चरण
अपनी पसंद का स्क्रीन रीडर चालू करें और डेमो पेज पर जाएं. किसी खास समस्या पर ध्यान देने से पहले, पूरे पेज को सबसे ऊपर से सबसे नीचे तक देखें.
हमने हर समस्या के लिए, स्क्रीन रीडर की रिकॉर्डिंग की है. यह रिकॉर्डिंग, डेमो में सुधार लागू करने से पहले और बाद की है. हमारी सलाह है कि आप अपने स्क्रीन रीडर के साथ डेमो देखें.
पहली समस्या: कॉन्टेंट का स्ट्रक्चर
हेडर और लैंडमार्क, स्क्रीन रीडर का इस्तेमाल करके नेविगेट करने के मुख्य तरीकों में से एक हैं. अगर ये एट्रिब्यूट मौजूद नहीं हैं, तो स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति को कॉन्टेक्स्ट समझने के लिए, पूरा पेज पढ़ना पड़ता है. इससे बहुत समय लग सकता है और आपको निराशा होगी.
अगर डेमो में किसी भी एलिमेंट पर नेविगेट करने की कोशिश की जाती है, तो आपको तुरंत पता चल जाएगा कि वे मौजूद नहीं हैं.
- लैंडमार्क का उदाहरण:
<div class="main">...</div> - टाइटल का उदाहरण:
<p class="h1">Join the Club</p>
अगर आपने सब कुछ सही तरीके से अपडेट किया है, तो विज़ुअल में कोई बदलाव नहीं होगा. हालांकि, स्क्रीन रीडर का अनुभव काफ़ी बेहतर हो जाएगा.
आइए, इसे ठीक करते हैं.
साइट को सिर्फ़ देखकर, ऐक्सेस न किए जा सकने वाले कुछ एलिमेंट का पता नहीं लगाया जा सकता. आपको कॉन्टेंट स्ट्रक्चर मॉड्यूल से हेडिंग लेवल और सिमैंटिक एचटीएमएल की अहमियत याद हो सकती है. कॉन्टेंट का कोई हिस्सा, हेडिंग की तरह दिख सकता है. हालांकि, असल में वह कॉन्टेंट, स्टाइल वाले <div> में रैप किया गया होता है.
हेडिंग और लैंडमार्क से जुड़ी समस्या को ठीक करने के लिए, आपको पहले हर उस एलिमेंट की पहचान करनी होगी जिसे इस तरह मार्क किया जाना चाहिए. साथ ही, उससे जुड़े एचटीएमएल को अपडेट करना होगा. साथ ही, संबंधित सीएसएस को अपडेट करना न भूलें.
- लैंडमार्क का उदाहरण:
<main>...</main> - हेडलाइन का उदाहरण:
<h1>Join the Club</h1>
अगर आपने सब कुछ सही तरीके से अपडेट कर लिया है, तो विज़ुअल में कोई बदलाव नहीं होना चाहिए लेकिन आपका स्क्रीन रीडर अनुभव काफ़ी बेहतर होगा.
दूसरी समस्या: लिंक का कॉन्टेक्स्ट
स्क्रीन रीडर इस्तेमाल करने वालों को लिंक के मकसद के बारे में कॉन्टेंट देना ज़रूरी है. साथ ही, यह भी ज़रूरी है कि लिंक उन्हें वेबसाइट या ऐप्लिकेशन के बाहर किसी नई जगह पर रीडायरेक्ट कर रहा हो.
अपने डेमो में, हमने ऐक्टिव इमेज के वैकल्पिक टेक्स्ट को अपडेट करते समय, ज़्यादातर लिंक ठीक कर दिए थे. हालांकि, कुछ ऐसी बीमारियों के बारे में कुछ और लिंक भी हैं जिन्हें ज़्यादा जानकारी उपलब्ध कराने से फ़ायदा हो सकता है. खास तौर पर, जब वे किसी नई जगह पर रीडायरेक्ट होते हैं.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
स्क्रीन रीडर इस्तेमाल करने वालों के लिए इस समस्या को ठीक करने के लिए, हम कोड को अपडेट करते हैं, ताकि ज़्यादा जानकारी जोड़ी जा सके. इससे विज़ुअल एलिमेंट पर कोई असर नहीं पड़ता. इसके अलावा, ज़्यादा से ज़्यादा लोगों जैसे कि पढ़ने और सीखने-बात में परेशानी से जूझ रहे लोगों की मदद करने के लिए, हम अतिरिक्त विज़ुअल टेक्स्ट जोड़ सकते हैं.
लिंक की ज़्यादा जानकारी जोड़ने के लिए, हम कई अलग-अलग पैटर्न का इस्तेमाल कर सकते हैं. हमारे एनवायरमेंट में सिर्फ़ एक भाषा काम करती है. इसलिए, इस स्थिति में ARIA लेबल का इस्तेमाल करना आसान है. आपको यह दिख सकता है कि ARIA लेबल, ओरिजनल लिंक टेक्स्ट को बदल देता है. इसलिए, अपने अपडेट में यह जानकारी ज़रूर शामिल करें.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
तीसरी समस्या: सजावटी इमेज
हमारे ऑटोमेटेड टेस्टिंग मॉड्यूल में, Lighthouse उस इनलाइन SVG को नहीं ढूंढ पाया जो हमारे डेमो पेज पर मुख्य स्प्लैश इमेज के तौर पर काम करता है. हालांकि, स्क्रीन रीडर इसे ढूंढ लेता है और अतिरिक्त जानकारी के बिना, इसे "इमेज" के तौर पर पढ़कर सुनाता है.
ऐसा तब भी होता है, जब एसवीजी में साफ़ तौर पर role="img" एट्रिब्यूट न जोड़ा गया हो.
<div class="section-right">
<svg>...</svg>
</div>
इस समस्या को ठीक करने के लिए, हमें यह तय करना होगा कि इमेज जानकारी देने वाली है या सजावट के मकसद से इस्तेमाल की गई. इस फ़ैसले के आधार पर, हमें इमेज के लिए सही वैकल्पिक टेक्स्ट (जानकारी देने वाली इमेज) जोड़ना होगा या स्क्रीन रीडर का इस्तेमाल करने वाले लोगों से इमेज छिपानी होगी (सजावटी इमेज).
हमने इमेज को कैटगरी में बांटने के सबसे सही तरीके के फ़ायदों और नुकसानों को तौला और यह फ़ैसला लिया कि यह सजावटी है. इसका मतलब है कि हम इमेज को छिपाने के लिए कोड जोड़ना या उसमें बदलाव करना चाहते हैं. role="presentation" को सीधे SVG इमेज में जोड़ने का तरीका सबसे आसान है. इससे स्क्रीन रीडर को यह सिग्नल मिलता है कि इस इमेज को स्किप करें और उसे इमेज ग्रुप में शामिल न करें.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
चौथी समस्या: बुलेट पॉइंट की सजावट
आपने देखा होगा कि स्क्रीन रीडर, दुर्लभ बीमारियों वाले सेक्शन में मौजूद सीएसएस बुलेट इमेज को पढ़ता है. यह इमेज मॉड्यूल में बताई गई इमेज की सामान्य कैटगरी में नहीं आती. हालांकि, इस इमेज में बदलाव करना ज़रूरी है, क्योंकि इससे कॉन्टेंट के फ़्लो में रुकावट आती है. साथ ही, स्क्रीन रीडर का इस्तेमाल करने वाले व्यक्ति का ध्यान भटका सकता है या उसे भ्रम हो सकता है.
<p class="bullet">...</p>
ऊपर बताए गए सजावटी इमेज के उदाहरण की तरह ही, स्क्रीन रीडर से छिपाने के लिए बुलेट क्लास वाले एचटीएमएल में role="presentation" जोड़ा जा सकता है. इसी तरह, role="none" भी काम करेगा. सिर्फ़ aria-hidden: true का इस्तेमाल न करें, वरना स्क्रीन रीडर का इस्तेमाल करने वाले लोगों से पैराग्राफ़ की सारी जानकारी छिप जाएगी.
<p class="bullet" role="none">...</p>
समस्या 5: फ़ॉर्म फ़ील्ड
फ़ॉर्म मॉड्यूल में, हमें पता चला है कि सभी फ़ॉर्म फ़ील्ड में विज़ुअल और प्रोग्राम के हिसाब से लेबल भी होना चाहिए. यह लेबल हर समय दिखना चाहिए.
हमारे डेमो में, न्यूज़लेटर साइन-अप ईमेल फ़ील्ड पर विज़ुअल और प्रोग्रामैटिक, दोनों लेबल मौजूद नहीं हैं. टेक्स्ट प्लेसहोल्डर एलिमेंट मौजूद है, लेकिन यह लेबल की जगह नहीं लेता, क्योंकि यह विज़ुअल तौर पर लगातार नहीं दिखता और सभी स्क्रीन रीडर के साथ पूरी तरह काम नहीं करता.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
इस समस्या को ठीक करने के लिए, टेक्स्ट प्लेसहोल्डर को मिलते-जुलते लेबल एलिमेंट से बदलें. वह लेबल एलिमेंट, फ़ॉर्म फ़ील्ड से प्रोग्राम के हिसाब से कनेक्ट किया गया है. साथ ही, उसमें JavaScript के साथ मूवमेंट जोड़ा गया. इससे फ़ील्ड में कॉन्टेंट जोड़े जाने पर भी लेबल दिखता रहेगा.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
आखिर में खास जानकारी
बधाई हो! आपने इस डेमो के लिए सभी टेस्ट पूरे कर लिए हों. इस डेमो के लिए अपडेट किए गए Codepen में, इन सभी बदलावों को देखा जा सकता है.
अब, अपनी वेबसाइटों और ऐप्लिकेशन के लिए सुलभता की समीक्षा करने के लिए, यहां बताई गई बातों का इस्तेमाल किया जा सकता है.
सुलभता की इस टेस्टिंग का मकसद, उपयोगकर्ता को आने वाली जितनी भी समस्याएं हो सकती हैं उन सभी को हल करना है. हालांकि, इसका मतलब यह नहीं है कि प्रोसेस पूरी होने के बाद, आपकी वेबसाइट या ऐप्लिकेशन को आसानी से ऐक्सेस किया जा सकता है. अपनी वेबसाइट या ऐप्लिकेशन को डिज़ाइन करते समय, पूरी प्रोसेस में सुलभता को ध्यान में रखें. साथ ही, इन टेस्ट को लॉन्च से पहले की जाने वाली अन्य जांच के साथ शामिल करें. इससे आपको ज़्यादा सफलता मिलेगी.
देखें कि आपको कितना समझ आया है
अपने-आप चलने वाली सुलभता जांच के बारे में अपनी जानकारी की जांच करना
सुलभता की जांच करने के लिए, सबसे अच्छा स्क्रीन रीडर कौनसा है?
सहायक टेक्नोलॉजी से टेस्ट करने का क्या मकसद है?