यह मॉड्यूल, सुलभता टेस्टिंग के लिए सहायक टेक्नोलॉजी (AT) के इस्तेमाल पर फ़ोकस करता है. दिव्यांग व्यक्ति AT का इस्तेमाल किसी काम को करने की क्षमताओं को बढ़ाने, बनाए रखने या बेहतर बनाने में कर सकता है.
डिजिटल स्पेस में ATs:
- नहीं/हल्की टेक्नोलॉजी: सिर/मुंह में चिपकाने वाली छड़ियां, हाथ पर मैग्निफ़ायर, बड़े बटन वाले डिवाइस
- हाई-टेक: आवाज़ से चलने वाले डिवाइस, आंखों को ट्रैक करने वाले डिवाइस, अडैप्टिव कीबोर्ड/माइस
- हार्डवेयर: स्विच बटन, एर्गोनॉमिक कीबोर्ड, ऑटो-रीफ़्रेशिंग ब्रेल डिवाइस
- सॉफ़्टवेयर: लिखाई को बोली में बदलने वाले प्रोग्राम, लाइव कैप्शन, स्क्रीन रीडर
हमारा सुझाव है कि आप अपने पूरे टेस्टिंग वर्कफ़्लो में कई तरह के AT इस्तेमाल करें.
स्क्रीन रीडर टेस्टिंग की बुनियादी बातें
इस मॉड्यूल में, हमने सबसे लोकप्रिय डिजिटल AT यानी स्क्रीन रीडर में से एक पर फ़ोकस किया है. स्क्रीन रीडर, सॉफ़्टवेयर का एक हिस्सा होता है. यह किसी वेबसाइट या ऐप्लिकेशन के कोड को पढ़ता है. इसके बाद, यह उस जानकारी को स्पीच या ब्रेल आउटपुट में बदल देता है.
स्क्रीन रीडर उन लोगों के लिए बेहद ज़रूरी हैं जो दृष्टिहीन और सुन नहीं सकते. हालांकि, इनसे उन लोगों को भी फ़ायदा हो सकता है जिन्हें कम दिखता है, जिन्हें पढ़ने या सीखने में परेशानी होती है.
ब्राउज़र के साथ काम करना
स्क्रीन रीडर के एक से ज़्यादा विकल्प उपलब्ध हैं. फ़िलहाल, सबसे लोकप्रिय स्क्रीन रीडर में डेस्कटॉप कंप्यूटर के लिए JAWS, NVDA, और VoiceOver के साथ ही मोबाइल डिवाइसों के लिए VoiceOver और Talkback सबसे लोकप्रिय हैं.
आपके ऑपरेटिंग सिस्टम (ओएस), पसंदीदा ब्राउज़र, और इस्तेमाल किए जा रहे डिवाइस के आधार पर, एक स्क्रीन रीडर सबसे अच्छे विकल्प के तौर पर दिख सकता है. ज़्यादातर स्क्रीन रीडर, खास हार्डवेयर और वेब ब्राउज़र को ध्यान में रखकर बनाए जाते हैं. जब किसी ऐसे ब्राउज़र के साथ स्क्रीन रीडर का इस्तेमाल किया जाता है जिसके लिए उसे कैलिब्रेट नहीं किया गया था, तो आपको ज़्यादा "गड़बड़ी" दिख सकती हैं अचानक व्यवहार हो सकता है. स्क्रीन रीडर इन कॉम्बिनेशन में इस्तेमाल किए जाने पर सबसे सही तरीके से काम करते हैं.
स्क्रीन रीडर के लिए निर्देश
अपने डेस्कटॉप या मोबाइल डिवाइस के स्क्रीन रीडर सॉफ़्टवेयर का सही सेट अप करने के बाद, ऊपर दी गई टेबल में दिए गए स्क्रीन रीडर दस्तावेज़ देखें. इसके बाद, टेक्नोलॉजी के बारे में जानने के लिए स्क्रीन रीडर से जुड़े कुछ ज़रूरी निर्देशों का पालन करें. अगर आपने पहले किसी स्क्रीन रीडर का इस्तेमाल किया है, तो नया स्क्रीन रीडर इस्तेमाल करें!
सुलभता की जांच के लिए स्क्रीन रीडर का इस्तेमाल करते समय, आपका लक्ष्य अपने कोड में ऐसी समस्याओं का पता लगाना है जो आपकी वेबसाइट या ऐप्लिकेशन के इस्तेमाल में रुकावट डालती हैं. हालांकि, स्क्रीन रीडर इस्तेमाल करने वाले लोगों के अनुभव को एम्युलेट न करें. इसलिए, बुनियादी जानकारी, स्क्रीन रीडर के निर्देशों, और बहुत सी चीज़ों की मदद से बहुत कुछ किया जा सकता है.
अगर आपको स्क्रीन रीडर और अन्य AT इस्तेमाल करने वाले लोगों के उपयोगकर्ता अनुभव को और बेहतर तरीके से समझना है, तो इस अहम जानकारी को पाने के लिए, कई संगठनों और लोगों के साथ जुड़ सकते हैं. याद रखें कि नियमों के एक सेट के हिसाब से कोड की जांच करने के लिए AT का इस्तेमाल करने और उपयोगकर्ताओं से उनके अनुभव के बारे में पूछने से अक्सर अलग-अलग नतीजे मिलते हैं. बिना किसी भेदभाव के सभी को ध्यान में रखकर प्रॉडक्ट बनाने के लिए, ये दोनों ज़रूरी पहलू हैं.
डेस्कटॉप स्क्रीन रीडर के लिए मुख्य निर्देश
मोबाइल स्क्रीन रीडर के लिए मुख्य निर्देश
स्क्रीन रीडर की जांच का डेमो
डेमो को टेस्ट करने के लिए, हमने 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>
समस्या 3: सजावटी इमेज
हमारे अपने-आप होने वाले टेस्टिंग मॉड्यूल में, लाइटहाउस उस इनलाइन SVG को नहीं चुन सका जो हमारे डेमो पेज पर मुख्य स्प्लैश इमेज के तौर पर काम करता है—लेकिन स्क्रीन रीडर उसे ढूंढ लेता है और उसे "इमेज" के तौर पर बताता है पर क्लिक करें. SVG में role="img" एट्रिब्यूट को साफ़ तौर पर जोड़े बिना भी, ऐसा ही होता है.
<div class="section-right">
<svg>...</svg>
</div>
इस समस्या को ठीक करने के लिए, हमें सबसे पहले यह तय करना होगा कि इमेज जानकारी देने वाली है या डिज़ाइनर है. इस फ़ैसले के आधार पर, हमें इमेज के लिए सही वैकल्पिक टेक्स्ट (जानकारी देने वाली इमेज) जोड़ना होगा या स्क्रीन रीडर का इस्तेमाल करने वाले लोगों से इमेज को छिपाना होगा (जुड़ने वाला).
हमने इमेज की कैटगरी तय करने के सबसे अच्छे फ़ायदों का आकलन किया और यह तय किया कि यह इमेज सजावटी थी. इसका मतलब है कि हम इमेज को छिपाने के लिए उसमें कोड जोड़ना या उसमें बदलाव करना चाहते हैं. सीधे SVG इमेज में role="presentation" जोड़ना, फटाफट इसका तरीका है. ऐसा करने से, स्क्रीन रीडर को सिग्नल भेजा जाता है, ताकि वह इस इमेज को स्किप कर सके और इमेज ग्रुप में शामिल न हो.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
समस्या 4: बुलेट डेकोरेशन
आपने देखा होगा कि स्क्रीन रीडर बीमारी के अलग-अलग सेक्शन की जानकारी देता है. हालांकि, हम परंपरागत इमेज का इस्तेमाल नहीं करते इमेज मॉड्यूल में बताए गए हैं, इसलिए इमेज में अब भी बदलाव किया जाना चाहिए, क्योंकि इससे इमेज खराब हो जाती है की वजह से कॉन्टेंट में बदलाव हो सकता है.
<p class="bullet">...</p>
ऊपर बताए गए सजावटी इमेज के उदाहरण की तरह ही, बुलेट क्लास वाले एचटीएमएल में role="presentation" जोड़कर उसे स्क्रीन रीडर से छिपाया जा सकता है. इसी तरह, role="none" काम करेगा. बस यह पक्का कर लें कि aria-hidden: true का इस्तेमाल न किया जाए. ऐसा न करने पर, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों से पैराग्राफ़ की पूरी जानकारी छिपा दी जाएगी.
<p class="bullet" role="none">...</p>
समस्या 5: फ़ॉर्म फ़ील्ड
Forms मॉड्यूल में हमने सीखा कि सभी फ़ॉर्म फ़ील्ड में विज़ुअल और प्रोग्रामैटिक लेबल भी होना चाहिए. यह लेबल ऐसा ही रहना चाहिए हर समय दिखेगा.
हमारे डेमो में, हमारे न्यूज़लेटर के साइन-अप ईमेल फ़ील्ड में विज़ुअल और प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस, दोनों लेबल मौजूद नहीं हैं. इसमें एक टेक्स्ट प्लेसहोल्डर एलिमेंट मौजूद है. हालांकि, इससे लेबल को नहीं बदला जा सकता, क्योंकि यह लगातार नहीं दिखता और सभी स्क्रीन रीडर के साथ पूरी तरह से काम नहीं करता.
<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>
आखिर में खास जानकारी
बधाई हो! आपने इस डेमो की सभी टेस्टिंग पूरी कर ली हैं. आप इस डेमो के लिए अपडेट किए गए कोडपेन में इन सभी बदलावों को देख सकते हैं.
अब आपने जो कुछ भी सीखा है उसका इस्तेमाल करके, वेबसाइट और ऐप्लिकेशन.
इस सुलभता टेस्टिंग का मकसद, ज़्यादा से ज़्यादा समस्याओं को हल करना है जो उपयोगकर्ता को आ सकती हैं. हालांकि, इसका यह मतलब नहीं है कि आपकी वेबसाइट या ऐप्लिकेशन आपका काम पूरा हो जाने पर उस तक आसानी से पहुंचा जा सकेगा. आपको सबसे ज़्यादा सफलता मिलेगी, इसके लिए पूरी प्रक्रिया के दौरान सुलभता के साथ अपनी वेबसाइट या ऐप्लिकेशन को डिज़ाइन करना, और इन टेस्ट को आपके अन्य प्री-लॉन्च टेस्टिंग के साथ शामिल करने में मदद मिलती है.
देखें कि आपको कितना समझ आया है
ऑटोमेटेड सुलभता टेस्टिंग के बारे में अपनी जानकारी को परखें
सुलभता की जांच करने के लिए, सबसे अच्छा स्क्रीन रीडर कौनसा है?
सहायक टेक्नोलॉजी से टेस्ट करने का क्या मकसद है?