मैन्युअल तौर पर टेस्ट करने से जुड़ी बुनियादी बातें
मैन्युअल सुलभता टेस्टिंग में कीबोर्ड, विज़ुअल, और सीखने-बात करने से जुड़े टेस्ट, टूल, और तकनीकों का इस्तेमाल करके ऐसी समस्याओं का पता लगाया जाता है जो अपने-आप काम करने वाले टूलिंग नहीं कर पातीं. ऑटोमेटेड टूलिंग, डब्ल्यूसीएजी में सफल होने के लिए सभी ज़रूरी शर्तों को शामिल नहीं करती है. इसलिए, यह ज़रूरी है कि आप ऑटोमेटेड सुलभता टेस्ट न करें और फिर टेस्टिंग बंद कर दें!
जैसे-जैसे टेक्नोलॉजी बेहतर हो रही है, सिर्फ़ ऑटोमेटेड टूल की मदद से ज़्यादा टेस्ट कवर किए जा सकते हैं. हालांकि, मौजूदा समय में अपने टेस्टिंग प्रोटोकॉल में मैन्युअल और सहायक, दोनों तरह की टेक्नोलॉजी की जांच को जोड़ा जाना ज़रूरी है. इससे, डब्ल्यूसीएजी के लिए लागू सभी चेकपॉइंट को कवर किया जा सकेगा.
मैन्युअल तरीके से सुलभता टेस्ट करने के फ़ायदे:
- आसानी से इस्तेमाल की जा सकती है और तेज़ी से काम करता है
- सिर्फ़ ऑटोमेटेड टेस्ट की तुलना में, ज़्यादा समस्याओं का पता लगाएं
- कामयाबी के लिए छोटे-छोटे टूल और विशेषज्ञता की ज़रूरत होती है
मैन्युअल तरीके से उपलब्ध सुलभता जांचों के नुकसान:
- अपने-आप होने वाले टेस्ट की तुलना में, यह ज़्यादा मुश्किल और समय लेने वाला है
- बड़े पैमाने पर दोहराना मुश्किल हो सकता है
- टेस्ट करने और नतीजों को समझने के लिए, सुलभता सुविधाओं के बारे में ज़्यादा विशेषज्ञता की ज़रूरत होती है
आइए, इस बात की तुलना करें कि फ़िलहाल अपने-आप काम करने वाले किसी टूल की मदद से किन सुलभता एलिमेंट और जानकारी का पता लगाया जा सकता है और किनकी पहचान नहीं की जा सकती.
मैन्युअल टेस्ट के टाइप
ऐसे कई मैन्युअल टूल और तकनीकों का इस्तेमाल किया जा सकता है, जिन पर डिजिटल सुलभता के लिए, अपने वेब पेज या ऐप्लिकेशन को देखते समय ध्यान रखा जाना चाहिए. मैन्युअल टेस्टिंग में तीन सबसे अहम चीज़ें हैं, कीबोर्ड के काम करने के तरीके, विज़ुअल तौर पर की गई समीक्षाएं, और सामान्य कॉन्टेंट की जाँच.
इस मॉड्यूल में हम ऊपर बताए गए सभी विषयों के बारे में विस्तार से बताएंगे. हालांकि, नीचे दिए गए टेस्ट का मकसद उन सभी मैन्युअल टेस्ट की पूरी सूची नहीं है जिन्हें आप चला सकते हैं या कर सकते हैं. हमारा सुझाव है कि आप किसी जाने-माने सोर्स से मैन्युअल तरीके से सुलभता चेकलिस्ट से शुरुआत करें. साथ ही, अपने खास डिजिटल प्रॉडक्ट और टीम की ज़रूरतों के हिसाब से, मैन्युअल तौर पर टेस्ट करने के लिए अपनी चेकलिस्ट बनाएं.
कीबोर्ड की जांच
एक अनुमान के मुताबिक, सभी डिजिटल सुलभता समस्याओं में से करीब 25% समस्याएं, कीबोर्ड पर ठीक से काम न करने की वजह से होती हैं. जैसा कि हमने कीबोर्ड फ़ोकस मॉड्यूल में जाना है, इससे सभी तरह के उपयोगकर्ताओं पर असर पड़ता है. इनमें, सिर्फ़ देख सकने वाले कीबोर्ड इस्तेमाल करने वाले, कम दृष्टि वाले/अंधे स्क्रीन रीडर वाले उपयोगकर्ता, और आवाज़ पहचानने वाले ऐसे सॉफ़्टवेयर शामिल हैं जो कीबोर्ड से कॉन्टेंट ऐक्सेस करने की सुविधा का इस्तेमाल करते हैं.
कीबोर्ड टेस्ट से इस तरह के सवालों के जवाब मिलते हैं:
- क्या वेब पेज या सुविधा के काम करने के लिए माउस की ज़रूरत होती है?
- क्या टैब करने का क्रम तार्किक और आसान है?
- क्या कीबोर्ड फ़ोकस इंडिकेटर हमेशा दिखता है?
- क्या कोई ऐसी चीज़ है जिसमें फ़ोकस नहीं फंसना चाहिए?
- क्या आपको उस एलिमेंट के पीछे या उसके आस-पास नेविगेट करने की सुविधा है जिस पर फ़ोकस सही होना चाहिए?
- फ़ोकस पाने वाले एलिमेंट को बंद करने पर, क्या फ़ोकस इंडिकेटर वापस लॉजिकल जगह पर चला गया?
कीबोर्ड की सुविधाओं का बहुत बड़ा असर पड़ता है, लेकिन इसकी जांच करना काफ़ी आसान है. आपको सिर्फ़ अपने माउस को एक तरफ़ रखना है या छोटा JavaScript पैकेज इंस्टॉल करना है और सिर्फ़ अपने कीबोर्ड का इस्तेमाल करके अपनी वेबसाइट की जांच करनी है. कीबोर्ड की जांच करने के लिए, ये निर्देश देना ज़रूरी हैं.
विज़ुअल की जांच
विज़ुअल जांच में, पेज के विज़ुअल एलिमेंट पर फ़ोकस किया जाता है. साथ ही, सुलभता सुविधाओं के लिए वेबसाइट या ऐप्लिकेशन की समीक्षा करने के लिए, स्क्रीन को ज़ूम करने की सुविधा या ब्राउज़र ज़ूम जैसे टूल का इस्तेमाल किया जाता है.
विज़ुअल जांच से आपको यह पता चल सकता है:
- क्या रंग कंट्रास्ट की ऐसी समस्याएं हैं जिन्हें अपने-आप काम करने वाला कोई टूल नहीं चुन सकता, जैसे कि ग्रेडिएंट या इमेज के ऊपर टेक्स्ट?
- क्या कोई ऐसा एलिमेंट है जो हेडिंग, सूचियों, और दूसरे स्ट्रक्चरल एलिमेंट की तरह दिखता है, लेकिन उसे कोड नहीं किया गया है?
- क्या वेबसाइट या ऐप्लिकेशन पर नेविगेशन लिंक और फ़ॉर्म इनपुट एक जैसे हैं?
- क्या कोई ऐसा फ़्लैशिंग, स्ट्रोबिंग या ऐनिमेशन है जो सुझाए गए वीडियो से बेहतर है?
- क्या कॉन्टेंट में स्पेस दिए गए हैं? अक्षरों, शब्दों, लाइनों, और पैराग्राफ़ के लिए?
- क्या स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाने या ब्राउज़र ज़ूम करने की सुविधा का इस्तेमाल करके, सारा कॉन्टेंट देखा जा सकता है?
कॉन्टेंट की जांच
लेआउट, मूवमेंट, और रंगों पर फ़ोकस करने वाले विज़ुअल टेस्ट के उलट, कॉन्टेंट की जांच में पेज पर मौजूद शब्दों पर फ़ोकस किया जाता है. आपको न सिर्फ़ उसकी कॉपी को देखना चाहिए, बल्कि आपको संदर्भ की भी समीक्षा करनी चाहिए, ताकि यह पक्का किया जा सके कि वह दूसरों को समझ में आए.
कॉन्टेंट की जांच से इस तरह के सवालों के जवाब मिलते हैं:
- क्या पेज के टाइटल, हेडिंग, और फ़ॉर्म के लेबल साफ़ तौर पर और पूरी जानकारी देने वाले होते हैं?
- क्या इमेज के विकल्प छोटे, सटीक, और काम के हैं?
- क्या मतलब या जानकारी बताने के लिए, सिर्फ़ रंग का इस्तेमाल किया जाता है?
- क्या लिंक में जानकारी मौजूद होती है या आप सामान्य टेक्स्ट का इस्तेमाल करते हैं. जैसे, “ज़्यादा पढ़ें” या “यहां क्लिक करें?”
- क्या किसी पेज पर भाषा में कोई बदलाव किया गया है?
- क्या सरल भाषा का इस्तेमाल किया जा रहा है और क्या पहली बार रेफ़रंस करते समय, सभी छोटे नामों को लिखा गया है?
कुछ कॉन्टेंट की जांच अपने-आप हो सकती है. उदाहरण के लिए, ऐसा JavaScript लिंटर लिखा जा सकता है जो "यहां क्लिक करें" की जांच करता हो और बदलाव करने का सुझाव देता हो. हालांकि, इन पसंद के मुताबिक बनाए गए समाधानों में अक्सर किसी इंसान की ज़रूरत होती है, ताकि वह कॉपी को संदर्भ के हिसाब से बदल सके.
डेमो: मैन्युअल टेस्ट
अब तक, हमने अपने डेमो वेब पेज पर ऑटोमेटेड टेस्ट चलाया है और आठ अलग-अलग तरह की समस्याओं का पता लगाकर उन्हें ठीक किया है. अब हम मैन्युअल जांच करने के लिए तैयार हैं. इससे हमें यह पता चलेगा कि सुलभता से जुड़ी और ज़्यादा समस्याओं का पता लगाया जा सकता है या नहीं.
पहला चरण
हमारे अपडेट किए गए CodePen डेमो में, अपने-आप लागू होने वाले सभी अपडेट लागू किए गए हैं.
अगले टेस्ट पर जाने के लिए, इसे डीबग मोड में देखें. यह ज़रूरी है, क्योंकि यह डेमो वेब पेज के चारों तरफ़ मौजूद <iframe>
को हटा देता है. इससे कुछ टेस्टिंग टूल में रुकावट आ सकती है. CodePen के डीबग मोड
के बारे में ज़्यादा जानें.
दूसरा चरण
अपने माउस या ट्रैकपैड को एक तरफ़ सेट करके, मैन्युअल तरीके से टेस्ट करने की प्रक्रिया शुरू करें. साथ ही, सिर्फ़ अपने कीबोर्ड का इस्तेमाल करके, DOM में ऊपर और नीचे की ओर नेविगेट करें.
पहली समस्या: दिखने वाला फ़ोकस इंडिकेटर
आपको कीबोर्ड की पहली समस्या तुरंत दिखनी चाहिए या आपको यह साफ़ तौर पर नहीं दिखेगी—क्योंकि दिखने वाला फ़ोकस इंडिकेटर हटा दिया गया है. डेमो में मौजूद सीएसएस को स्कैन करने पर, आपको कोड बेस में खतरनाक “आउटलाइन: कोई नहीं” जुड़ा हुआ दिखेगा.
:focus {
outline: none;
}
जैसा कि आपने कीबोर्ड फ़ोकस मॉड्यूल में सीखा, आपको कोड की इस पंक्ति को निकालना होगा, ताकि वेब ब्राउज़र उपयोगकर्ताओं के लिए एक दृश्यमान फ़ोकस जोड़ सकें. आप एक कदम आगे बढ़ सकते हैं और अपने डिजिटल प्रॉडक्ट की खासियत के हिसाब से फ़ोकस इंडिकेटर बना सकते हैं.
:focus {
outline: 3px dotted #008576;
}
दूसरी समस्या: फ़ोकस ऑर्डर
फ़ोकस इंंडिकेटर में बदलाव करने और उसके दिखने के बाद, पेज पर टैब करना न भूलें. ऐसा करते समय, आपको ध्यान देना चाहिए कि न्यूज़लेटर की सदस्यता लेने के लिए इस्तेमाल किए जाने वाले फ़ॉर्म इनपुट फ़ील्ड पर फ़ोकस नहीं किया जाता है. नेगेटिव Tabindex ने इसे नैचुरल फ़ोकस ऑर्डर से हटा दिया है.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
हम चाहते हैं कि लोग इस फ़ील्ड का इस्तेमाल हमारे न्यूज़लेटर के लिए साइन-अप करने के लिए करें. इसलिए, हमें सिर्फ़ नेगेटिव टैबइंडेक्स हटाना होगा या इसे शून्य पर सेट करना होगा, ताकि इनपुट को फिर से कीबोर्ड पर फ़ोकस करने लायक बनाया जा सके.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
तीसरा चरण
कीबोर्ड फ़ोकस की जांच हो जाने के बाद, हम विज़ुअल और कॉन्टेंट की जांच शुरू करते हैं.
तीसरी समस्या: लिंक का कलर कंट्रास्ट
डेमो पेज पर टैब के ऊपर और नीचे टैब करके कीबोर्ड टेस्ट करने के दौरान, शायद आपको पता चले कि कीबोर्ड में, अलग-अलग बीमारियों की जानकारी देने वाले पैराग्राफ़ में छिपे हुए तीन लिंक पर फ़ोकस किया गया है.
हमारे पेज को ऐक्सेस किया जा सके, इसके लिए ज़रूरी है कि लिंक आस-पास के टेक्स्ट से अलग दिखें. साथ ही, माउस होवर और कीबोर्ड फ़ोकस पर, रंग में बदलाव न किया गया हो.
इसका तुरंत समाधान है. पैराग्राफ़ के अंदर मौजूद लिंक को अंडरलाइन करके उन्हें अलग से दिखाएं. इससे सुलभता की समस्या हल हो जाएगी, लेकिन हो सकता है कि यह डिज़ाइन के उन सुंदर डिज़ाइन के लिए सही न हो जिन्हें आप पाना चाहते हैं.
अगर आपने अंडरलाइन नहीं जोड़ा है, तो आपको कलर में इस तरह बदलाव करना होगा, ताकि बैकग्राउंड और कॉपी, दोनों की ज़रूरी शर्तें पूरी की जा सकें.
लिंक कंट्रास्ट चेकर टूल का इस्तेमाल करके डेमो देखते समय, आपको दिखेगा कि लिंक का रंग सामान्य साइज़ के टेक्स्ट और बैकग्राउंड के बीच 4.5:1 रंग कंट्रास्ट की ज़रूरत को पूरा करता है. हालांकि, अंडरलाइन न किए गए लिंक को आस-पास के टेक्स्ट के लिए 3:1 कलर कंट्रास्ट की ज़रूरी शर्त को भी पूरा करना चाहिए.
एक विकल्प यह है कि लिंक के रंग को बदला जा सकता है, ताकि वह पेज पर मौजूद अन्य एलिमेंट से मेल खाए. हालांकि, अगर लिंक का रंग बदलकर हरा किया जाता है, तो मुख्य हिस्से की कॉपी में भी बदलाव किया जाना चाहिए, ताकि इन तीनों एलिमेंट के बीच कलर कंट्रास्ट की ज़रूरी शर्तों को पूरा किया जा सके: लिंक, बैकग्राउंड, और आस-पास का टेक्स्ट.
![लिंक टेक्स्ट के लिए WebAIM का स्क्रीनशॉट दिखाता है कि मुख्य हिस्से का लिंक, WCAG A के लेवल पर काम नहीं कर रहा.](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-webaim-link-d6607ee51a7f9.png?authuser=6&hl=hi)
![WebAIM का स्क्रीनशॉट दिखाता है कि लिंक का रंग हरा होने पर सभी टेस्ट पास हो जाते हैं.](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-webaim-shows-a6f42f1c49134.png?authuser=6&hl=hi)
समस्या 4: आइकॉन का कलर कंट्रास्ट
कलर कंट्रास्ट की एक और समस्या है, जिसकी जानकारी सोशल मीडिया आइकॉन पर नहीं है. रंग और कंट्रास्ट मॉड्यूल में, आपको पता चला है कि ज़रूरी आइकॉन के लिए यह ज़रूरी है कि वे बैकग्राउंड के मुकाबले 3:1 के कलर कंट्रास्ट को पूरा करें. हालांकि, डेमो में, सोशल मीडिया आइकॉन का कंट्रास्ट अनुपात 1.3:1 है.
कलर कंट्रास्ट की 3:1 शर्तों को पूरा करने के लिए, सोशल मीडिया आइकॉन गहरे स्लेटी रंग में बदल जाते हैं.
![डेमो का एक स्क्रीनशॉट, जिसमें कलर ऐनालाइज़र के साथ ऐसा आइकॉन कलर कंट्रास्ट दिखाया गया है जो काम नहीं कर रहा.](https://web.dev/static/learn/accessibility/test-manual/image/a-screenshot-the-demo-t-ea0c1b4ef7bcb.png?authuser=6&hl=hi)
समस्या 5: कॉन्टेंट लेआउट
पैराग्राफ़ के कॉन्टेंट का लेआउट देखें, तो पता चलता है कि टेक्स्ट सही तरह से दिख रहा है. जैसा कि आपने टाइपोग्राफ़ी मॉड्यूल में सीखा, इससे "जगह की नदियां" बनती हैं, जिससे टेक्स्ट को पढ़ना कुछ लोगों के लिए मुश्किल हो सकता है.
p.bullet {
text-align: justify;
}
डेमो में टेक्स्ट अलाइनमेंट को रीसेट करने के लिए, कोड को text-align: left;
पर अपडेट किया जा सकता है या उस लाइन को सीएसएस से पूरी तरह हटाया जा सकता है. ऐसा इसलिए, क्योंकि ब्राउज़र के लिए बाईं ओर वाला अलाइनमेंट डिफ़ॉल्ट तौर पर सेट होता है. कोड की जांच ज़रूर करें, क्योंकि हो सकता है कि
अन्य इनहेरिट किए गए स्टाइल, डिफ़ॉल्ट टेक्स्ट अलाइनमेंट को हटा दें.
p.bullet {
text-align: left;
}
चौथा चरण
![मेडिकल मिस्ट्रीज़ क्लब डेमो साइट का स्क्रीनशॉट.](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-the-medical-m-6a48ef85663f8.png?authuser=6&hl=hi)
ऊपर बताए गए मैन्युअल तरीके से सुलभता से जुड़ी सभी समस्याओं की पहचान करने और उन्हें ठीक करने के बाद, आपका पेज हमारे स्क्रीनशॉट की तरह दिखना चाहिए.
यह मुमकिन है कि मैन्युअल जांच में आपको सुलभता से जुड़ी ज़्यादा समस्याएं दिखें. ये समस्याएं, इस मॉड्यूल में हमने जो बताई हैं उससे ज़्यादा हो सकती हैं. हम अगले मॉड्यूल में इनमें से कई समस्याओं की खोज करेंगे.
अगला कदम
बहुत बढ़िया! आपने ऑटोमेटेड और मैन्युअल टेस्टिंग मॉड्यूल पूरे कर लिए हैं. आप हमारा अपडेट किया गया CodePen देख सकते हैं, जिसमें अपने आप और मैन्युअल तरीके से किए गए सभी सुधार लागू हैं.
अब, सहायक टेक्नोलॉजी की जांच पर फ़ोकस करने वाले आखिरी टेस्टिंग मॉड्यूल पर जाएं.
आपने जो सीखा है उसकी जांच करें
मैन्युअल तरीके से सुलभता टेस्टिंग के बारे में अपनी जानकारी की जांच करें
डब्ल्यूसीएजी के कलर कंट्रास्ट से जुड़े मानकों को पूरा करने के लिए किन एलिमेंट को ज़रूरी है?