इस मॉड्यूल में, सुलभता जांच के लिए सहायक टेक्नोलॉजी (एटी) का इस्तेमाल करने पर फ़ोकस किया गया है. दिव्यांग व्यक्ति, किसी टास्क को करने की क्षमताओं को बढ़ाने, बनाए रखने या बेहतर बनाने के लिए, एटी का इस्तेमाल कर सकता है.
डिजिटल स्पेस में, एटी ये हो सकते हैं:
- कोई या कम टेक्नोलॉजी: सिर और मुंह के लिए स्टिक, हाथ से इस्तेमाल होने वाली मैग्नीफ़ायर, बड़े बटन वाले डिवाइस
- हाई-टेक: वॉइस-ऐक्टिवेटेड डिवाइस, आंखों को ट्रैक करने वाले डिवाइस, अडैप्टिव कीबोर्ड और माउस
- हार्डवेयर: स्विच बटन, काम के हिसाब से बने कीबोर्ड, अपने-आप रीफ़्रेश होने वाला ब्रेल डिवाइस
- सॉफ़्टवेयर: लिखाई को बोली में बदलने वाले प्रोग्राम, लाइव कैप्शन, स्क्रीन रीडर
हमारा सुझाव है कि आप टेस्टिंग के पूरे वर्कफ़्लो में, कई तरह के एटी का इस्तेमाल करें.
स्क्रीन रीडर की जांच से जुड़ी बुनियादी बातें
इस मॉड्यूल में, हम सबसे लोकप्रिय डिजिटल एटी में से एक, स्क्रीन रीडर पर फ़ोकस करते हैं. स्क्रीन रीडर एक ऐसा सॉफ़्टवेयर है जो किसी वेबसाइट या ऐप्लिकेशन के कोड को पढ़ता है. इसके बाद, वह उपयोगकर्ता के लिए उस जानकारी को बोली या ब्रेल में बदल देता है.
स्क्रीन रीडर, दृष्टिहीन और लोगों के लिए ज़रूरी हैं. हालांकि, इनसे कम दृष्टि, पढ़ने में होने वाली समस्याओं, और संज्ञानात्मक विकारों वाले लोगों को भी फ़ायदा मिल सकता है.
ब्राउज़र के साथ काम करना
स्क्रीन रीडर के कई विकल्प उपलब्ध हैं. डेस्कटॉप कंप्यूटर के लिए, 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 | Control+Option+U |
| लैंडमार्क | D | Control+Option+U |
| शीर्षक | H | Control+Option+Command+H |
| लिंक | K | Control+Option+Command+L |
| फ़ॉर्म कंट्रोल | Control+Option+Command+J | |
| तालिकाएं | T | Control+OptionCommand+T |
| टेबल में | Insert Alt + ↓ ↑ ← → | Control+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>
इस समस्या को ठीक करने के लिए, हमें यह तय करना होगा कि इमेज जानकारी देने वाली है या सजावट के मकसद से इस्तेमाल की गई. इस फ़ैसले के आधार पर, हमें इमेज के लिए सही वैकल्पिक टेक्स्ट (जानकारी देने वाली इमेज) जोड़ना होगा या स्क्रीन रीडर का इस्तेमाल करने वाले लोगों से इमेज छिपानी होगी (सजावटी इमेज).
हमने इमेज को कैटगरी में बांटने के सबसे सही तरीके के फ़ायदों और नुकसानों को तौला और यह फ़ैसला लिया कि यह सजावटी है. इसका मतलब है कि हम इमेज को छिपाने के लिए कोड जोड़ना या उसमें बदलाव करना चाहते हैं. सीधे SVG इमेज में role="presentation" जोड़ने का तरीका सबसे आसान है. इससे स्क्रीन रीडर को यह सिग्नल मिलता है कि इस इमेज को स्किप करें और उसे इमेज ग्रुप में शामिल न करें.
<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 में, इन सभी बदलावों को देखा जा सकता है.
अब, अपनी वेबसाइटों और ऐप्लिकेशन के लिए सुलभता की समीक्षा करने के लिए, यहां बताई गई बातों का इस्तेमाल किया जा सकता है.
सुलभता की इस टेस्टिंग का मकसद, उपयोगकर्ता को आने वाली जितनी भी समस्याएं हो सकती हैं उन सभी को हल करना है. हालांकि, इसका मतलब यह नहीं है कि प्रोसेस पूरी होने के बाद, आपकी वेबसाइट या ऐप्लिकेशन को आसानी से ऐक्सेस किया जा सकता है. अपनी वेबसाइट या ऐप्लिकेशन को डिज़ाइन करते समय, पूरी प्रोसेस में सुलभता को ध्यान में रखें. साथ ही, इन टेस्ट को लॉन्च से पहले की जाने वाली अन्य जांच के साथ शामिल करें. इससे आपको ज़्यादा सफलता मिलेगी.
देखें कि आपको क्या समझ आया
सुलभता की जांच करने की ऑटोमेटेड सुविधा के बारे में अपनी जानकारी की जांच करें.
सुलभता की जांच करने के लिए, सबसे अच्छा स्क्रीन रीडर कौनसा है?
सहायक टेक्नोलॉजी की मदद से टेस्ट करने का मकसद क्या है?