मैन्युअल तरीके से सुलभता टेस्ट करना

मैन्युअल टेस्टिंग की बुनियादी बातें

मैन्युअल तरीके से ऐक्सेस की जांच करने के लिए, कीबोर्ड, विज़ुअल, और संज्ञानात्मक टेस्ट, टूल, और तकनीकों का इस्तेमाल किया जाता है. इससे ऐसी समस्याओं का पता चलता है जो अपने-आप काम करने वाले टूल से नहीं मिलती हैं. अपने-आप काम करने वाले टूल, WCAG में बताई गई सभी शर्तों को पूरा नहीं करते. इसलिए, यह ज़रूरी है कि आप सुलभता की जांच करने वाले अपने-आप काम करने वाले टूल का इस्तेमाल करके जांच न करें और फिर जांच बंद न करें!

जैसे-जैसे टेक्नोलॉजी बेहतर होती जाएगी, ऑटोमेटेड टूल की मदद से ही ज़्यादा टेस्ट किए जा सकेंगे. हालांकि, मौजूदा समय में टेस्ट प्रोटोकॉल में मैन्युअल और सहायक टेक्नोलॉजी, दोनों तरह की जांच को शामिल करना ज़रूरी है, ताकि लागू होने वाले सभी डब्लूसीएजी चेकपॉइंट को कवर किया जा सके.

सुलभता की मैन्युअल जांच के फ़ायदे:

• चलाने में आसान और तेज़
• ऑटोमेटेड टेस्ट के मुकाबले, ज़्यादा समस्याओं का पता लगाना
• सफल होने के लिए, ज़्यादा टूल और विशेषज्ञता की ज़रूरत नहीं होती

सुलभता की मैन्युअल जांच के नुकसान:

• ऑटोमेटेड टेस्ट की तुलना में ज़्यादा जटिल और समय लेने वाले
• बड़े पैमाने पर दोहराना मुश्किल हो सकता है
• टेस्ट चलाने और नतीजों को समझने के लिए, सुलभता के बारे में ज़्यादा जानकारी की ज़रूरत होती है

आइए, तुलना करें कि कोई ऑटोमेटेड टूल, मौजूदा समय में किन सुलभता एलिमेंट और जानकारी का पता लगा सकता है और जिनका पता नहीं लगाया जा सकता.

मैन्युअल टेस्ट के टाइप

डिजिटल ऐक्सेस के लिए अपने वेब पेज या ऐप्लिकेशन को देखते समय, कई मैन्युअल टूल और तकनीकों का ध्यान रखना चाहिए. मैन्युअल टेस्टिंग में, कीबोर्ड की सुविधाओं, विज़ुअल पर फ़ोकस करने वाली समीक्षाओं, और कॉन्टेंट की सामान्य जांच पर सबसे ज़्यादा ध्यान दिया जाता है.

हम इस मॉड्यूल में इन सभी विषयों को बेहतर तरीके से कवर करेंगे. हालांकि, यहां दिए गए टेस्ट, उन सभी मैन्युअल टेस्ट की पूरी सूची नहीं हैं जिन्हें चलाया जा सकता है या चलाना चाहिए. हमारा सुझाव है कि आप किसी भरोसेमंद सोर्स से, सभी के लिए उपलब्धता की मैन्युअल चेकलिस्ट का इस्तेमाल करें. साथ ही, अपने डिजिटल प्रॉडक्ट और टीम की ज़रूरतों के हिसाब से, मैन्युअल टेस्टिंग की चेकलिस्ट बनाएं.

कीबोर्ड की जांच

एक अनुमान के हिसाब से सभी डिजिटल सुलभता समस्याओं में से 25% समस्याएं, कीबोर्ड सपोर्ट की कमी की वजह से हैं. कीबोर्ड फ़ोकस मॉड्यूल में हमने जाना कि इसकी वजह से सभी तरह के उपयोगकर्ताओं पर असर पड़ता है. इनमें, सिर्फ़ कीबोर्ड का इस्तेमाल करने वाले ऐसे लोग शामिल हैं जिनकी आंखें ठीक हैं, कम दृष्टि/अंधे स्क्रीन रीडर का इस्तेमाल करने वाले लोग, और वॉइस रिकॉग्निशन सॉफ़्टवेयर का इस्तेमाल करने वाले लोग शामिल हैं. यह सॉफ़्टवेयर, कीबोर्ड से ऐक्सेस किए जा सकने वाले कॉन्टेंट पर आधारित टेक्नोलॉजी का इस्तेमाल करता है.

कीबोर्ड की जांच से, इस तरह के सवालों के जवाब मिलते हैं:

• क्या वेब पेज या सुविधा के काम करने के लिए माउस की ज़रूरत है?
• क्या टैब करने का क्रम तार्किक और सहज है?
• क्या कीबोर्ड फ़ोकस इंडिकेटर हमेशा दिखता है?
• क्या आपके पास ऐसे एलिमेंट पर फ़ोकस करने का विकल्प है जिस पर फ़ोकस नहीं होना चाहिए?
• क्या आप उस एलिमेंट के पीछे या उसके आस-पास नेविगेट कर सकते हैं जो फ़ोकस को अंदर खींच सकता है?
• फ़ोकस पाने वाले एलिमेंट को बंद करने पर, क्या फ़ोकस इंडिकेटर किसी लॉजिकल जगह पर वापस चला गया?

कीबोर्ड की सुविधाओं का असर काफ़ी ज़्यादा होता है. हालांकि, इसकी जांच करने का तरीका काफ़ी आसान है. इसके लिए, आपको बस अपना माउस सेट आसाइड करना होगा या छोटा JavaScript पैकेज इंस्टॉल करना होगा. इसके बाद, सिर्फ़ कीबोर्ड का इस्तेमाल करके अपनी वेबसाइट की जांच करें. कीबोर्ड की जांच के लिए, ये निर्देश ज़रूरी हैं.

विज़ुअल तरीके से जांच करना

विज़ुअल जांच, पेज के विज़ुअल एलिमेंट पर फ़ोकस करती है. साथ ही, वेबसाइट या ऐप्लिकेशन को ऐक्सेस करने के लिए, स्क्रीन को बड़ा करने या ब्राउज़र को ज़ूम करने जैसे टूल का इस्तेमाल करती है.

विज़ुअल की जांच से आपको यह जानकारी मिल सकती है:

• क्या रंग के कंट्रास्ट से जुड़ी ऐसी समस्याएं हैं जिन्हें ऑटोमेटेड टूल नहीं ढूंढ सका, जैसे कि ग्रेडिएंट या इमेज के ऊपर टेक्स्ट?
• क्या यहां कोई ऐसा एलिमेंट है जो हेडिंग, लिस्ट, और अन्य स्ट्रक्चरल एलिमेंट की तरह दिखता है, लेकिन उसे कोड नहीं किया गया है?
• क्या पूरी वेबसाइट या ऐप्लिकेशन पर नेविगेशन लिंक और फ़ॉर्म के इनपुट एक जैसे हैं?
• क्या वीडियो में सुझावों के मुताबिक फ़्लैश करने, स्ट्रोब करने या ऐनिमेशन करने की सुविधा है?
• क्या कॉन्टेंट में शब्दों के बीच सही स्पेस है? अक्षरों, शब्दों, लाइनों, और पैराग्राफ़ के लिए?
• क्या स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाने की सुविधा या ब्राउज़र के ज़ूम का इस्तेमाल करके, पूरा कॉन्टेंट देखा जा सकता है?

कॉन्टेंट की जांच

विज़ुअल टेस्ट में लेआउट, मूवमेंट, और रंगों पर फ़ोकस किया जाता है. वहीं, कॉन्टेंट की जांच में पेज पर मौजूद शब्दों पर फ़ोकस किया जाता है. आपको कॉपी को ही नहीं, बल्कि उसके संदर्भ को भी देखना चाहिए. इससे यह पक्का किया जा सकता है कि कॉपी दूसरों के लिए सही है या नहीं.

कॉन्टेंट की जांच से, इन सवालों के जवाब मिलते हैं:

• क्या पेज के टाइटल, हेडिंग, और फ़ॉर्म के लेबल साफ़ और पूरी जानकारी देते हैं?
• क्या इमेज के विकल्प कम शब्दों में, सटीक, और काम के हैं?
• क्या जानकारी या मतलब बताने के लिए, सिर्फ़ रंग का इस्तेमाल किया गया है?
• क्या लिंक में जानकारी दी गई है या आपने “ज़्यादा पढ़ें” या “यहां क्लिक करें” जैसे सामान्य टेक्स्ट का इस्तेमाल किया है?
• क्या पेज में भाषा में कोई बदलाव हुआ है?
• क्या सामान्य भाषा का इस्तेमाल किया जा रहा है और पहली बार रेफ़रंस देते समय, सभी संक्षिप्त शब्दों को पूरा लिखा गया है?

कुछ कॉन्टेंट की जांच अपने-आप हो सकती है. उदाहरण के लिए, आपके पास JavaScript का ऐसा लिंटर लिखने का विकल्प है जो "यहां क्लिक करें" की जांच करता है और आपको बदलाव करने का सुझाव देता है. हालांकि, इन कस्टम समाधानों के लिए, कॉपी को संदर्भ के हिसाब से बदलने के लिए अक्सर किसी व्यक्ति की ज़रूरत होती है.

डेमो: मैन्युअल तरीके से जांच करें

अब तक, हमने अपने डेमो वेब पेज पर ऑटोमेटेड टेस्ट चलाए हैं. इसमें हमें आठ अलग-अलग तरह की समस्याएं मिलीं और हमने उन्हें ठीक कर दिया है. अब हम मैन्युअल तरीके से जांच करने के लिए तैयार हैं, ताकि यह पता लगाया जा सके कि क्या हमें सुलभता से जुड़ी और भी समस्याएं मिल सकती हैं.

चरण 1

हमारे अपडेट किए गए CodePen डेमो में, सुलभता से जुड़े सभी अपडेट अपने-आप लागू हो गए हैं.

अगले टेस्ट करने के लिए, इसे डीबग मोड में देखें. यह अहम है, क्योंकि यह डेमो वेब पेज के आस-पास मौजूद <iframe> को हटा देता है, जिससे कुछ टेस्टिंग टूल में रुकावट आ सकती है. CodePen के डीबग मोड के बारे में ज़्यादा जानें.

दूसरा चरण

अपने माउस या ट्रैकपैड को एक तरफ़ सेट करके मैन्युअल तरीके से जांच करें. साथ ही, सिर्फ़ अपने कीबोर्ड का इस्तेमाल करके DOM पर ऊपर और नीचे नेविगेट करें.

पहली समस्या: फ़ोकस इंडिकेटर दिखना

आपको कीबोर्ड में पहली समस्या तुरंत दिखेगी—या फिर आपको यह नहीं दिखेगी—क्योंकि साफ़ तौर पर दिखने वाला फ़ोकस इंडिकेटर हटा दिया गया है. डेमो में सीएसएस को स्कैन करने पर, आपको कोडबेस में “outline: none” दिखेगा.

  :focus {
    outline: none;
  }

आइए, इसे ठीक करते हैं.

जैसा कि आपने कीबोर्ड फ़ोकस मॉड्यूल में सीखा है, आपको इस कोड की लाइन को हटाना होगा, ताकि वेब ब्राउज़र उपयोगकर्ताओं के लिए फ़ोकस जोड़ सकें. एक कदम आगे बढ़कर, अपने डिजिटल प्रॉडक्ट की खूबसूरती को ध्यान में रखते हुए फ़ोकस इंडिकेटर बनाया जा सकता है.

:focus {
  outline: 3px dotted #008576;
}

दूसरी समस्या: फ़ोकस का क्रम

फ़ोकस इंडिकेटर में बदलाव करने के बाद, जब वह दिखने लगे, तो पेज पर टैब करके ज़रूर जाएं. ऐसा करने पर, आपको पता चलेगा कि न्यूज़लेटर की सदस्यता लेने के लिए इस्तेमाल किए गए फ़ॉर्म इनपुट फ़ील्ड पर फ़ोकस नहीं होता. नेगेटिव टैब इंडेक्स की मदद से, इसे फ़ोकस के सामान्य क्रम से हटा दिया गया है.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

आइए, इसे ठीक करते हैं.

हम चाहते हैं कि लोग हमारे न्यूज़लेटर के लिए साइन-अप करने के लिए, इस फ़ील्ड का इस्तेमाल करें. इसलिए, हमें नेगेटिव tabindex को हटाना होगा या उसे शून्य पर सेट करना होगा, ताकि इनपुट पर कीबोर्ड फ़ोकस फिर से किया जा सके.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

तीसरा चरण

कीबोर्ड फ़ोकस की जांच करने के बाद, हम विज़ुअल और कॉन्टेंट की जांच करते हैं.

तीसरी समस्या: लिंक का कलर कंट्रास्ट

जब आपने डेमो पेज पर ऊपर और नीचे टैब करके कीबोर्ड की जांच की, तो आपको शायद पता चला हो कि कीबोर्ड, अलग-अलग स्वास्थ्य स्थितियों के पैराग्राफ़ में, दिखने वाले तीन लिंक पर फ़ोकस कर रहा था.

हमारे पेज को ऐक्सेस किया जा सके, इसके लिए ज़रूरी है कि लिंक, आस-पास मौजूद टेक्स्ट से अलग दिखें. साथ ही, माउस घुमाने और कीबोर्ड फ़ोकस करने पर, लिंक का रंग न बदले.

आइए, इसे ठीक करते हैं.

पैराग्राफ़ में मौजूद लिंक को हाइलाइट करने के लिए, उन पर अंडरलाइन जोड़ें. इससे सुलभता से जुड़ी समस्या हल हो जाएगी, लेकिन हो सकता है कि यह आपके डिज़ाइन के हिसाब से न हो.

अगर आपको अंडरलाइन नहीं जोड़नी है, तो आपको रंगों में इस तरह बदलाव करना होगा कि वे बैकग्राउंड और कॉपी, दोनों की ज़रूरी शर्तों को पूरा करते हों.

लिंक के कंट्रास्ट की जांच करने वाले टूल का इस्तेमाल करके डेमो को देखते समय, आपको पता चलेगा कि लिंक का रंग, सामान्य साइज़ के टेक्स्ट और बैकग्राउंड के बीच 4.5:1 के कंट्रास्ट की ज़रूरी शर्तों को पूरा करता है. हालांकि, अंडरलाइन नहीं किए गए लिंक के लिए भी यह ज़रूरी है कि वे आस-पास के टेक्स्ट के मुकाबले 3:1 के रंग कंट्रास्ट की ज़रूरी शर्तें पूरी करते हों.

पेज पर मौजूद अन्य एलिमेंट से मैच करने के लिए, लिंक का रंग बदला जा सकता है. हालांकि, अगर लिंक का रंग बदलकर हरा किया जाता है, तो मुख्य हिस्से में भी बदलाव करना ज़रूरी है, ताकि वह इन तीनों एलिमेंट के लिए, कलर कंट्रास्ट की ज़रूरी शर्तों को पूरा कर सके: लिंक, बैकग्राउंड, और आस-पास का टेक्स्ट.

चौथी समस्या: आइकॉन के रंग का कंट्रास्ट

सोशल मीडिया के आइकॉन भी कलर कंट्रास्ट की समस्या से जुड़े हैं. रंग और कंट्रास्ट मॉड्यूल में, आपको पता चला था कि ज़रूरी आइकॉन का रंग, बैकग्राउंड से 3:1 के अनुपात में कंट्रास्ट होना चाहिए. हालांकि, डेमो में सोशल मीडिया आइकॉन का कंट्रास्ट रेशियो 1.3:1 है.

चलिए, इसे ठीक करते हैं.

कलर कंट्रास्ट की 3:1 की ज़रूरी शर्तों को पूरा करने के लिए, सोशल मीडिया आइकॉन को गहरे स्लेटी रंग में बदल दिया गया है.

पांचवीं समस्या: कॉन्टेंट का लेआउट

पैराग्राफ़ के कॉन्टेंट के लेआउट को देखने पर, टेक्स्ट पूरी तरह से अलाइन किया गया है. जैसा कि आपने टाइपोग्राफ़ी मॉड्यूल में पढ़ा है, इससे "स्पेस की नदियां" बनती हैं. इनकी वजह से, कुछ लोगों को टेक्स्ट पढ़ने में मुश्किल हो सकती है.

p.bullet {
   text-align: justify;
}

आइए, इसे ठीक करते हैं.

डेमो में टेक्स्ट अलाइनमेंट को रीसेट करने के लिए, कोड को text-align: left; पर अपडेट किया जा सकता है या सीएसएस से उस लाइन को पूरी तरह हटाया जा सकता है. ऐसा इसलिए, क्योंकि ब्राउज़र के लिए बाईं ओर अलाइनमेंट डिफ़ॉल्ट होता है. कोड की जांच करना न भूलें, ताकि इनहेरिट की गई अन्य स्टाइल, डिफ़ॉल्ट टेक्स्ट अलाइनमेंट को हटा न दें.

p.bullet {
   text-align: left;
}

चौथा चरण

पिछले चरणों में बताई गई, मैन्युअल तौर पर इस्तेमाल की जा सकने वाली सभी समस्याओं को पहचानने और उन्हें ठीक करने के बाद, आपका पेज हमारे स्क्रीनशॉट की तरह दिखना चाहिए.

ऐसा हो सकता है कि मैन्युअल जांच में आपको सुलभता से जुड़ी ज़्यादा समस्याएं मिलें, जिनके बारे में हमने इस मॉड्यूल में नहीं बताया है. हम अगले मॉड्यूल में इनमें से कई समस्याओं का पता लगाएंगे.

अगला चरण

बहुत खूब! आपने ऑटोमेटेड और मैन्युअल टेस्टिंग मॉड्यूल पूरे कर लिए हैं. अपडेट किया गया CodePen देखें. इसमें, ऐक्सेस करने से जुड़ी सभी समस्याओं को अपने-आप ठीक करने की सुविधा और मैन्युअल तरीके से ठीक करने की सुविधा लागू की गई है.

अब, सहायता वाली टेक्नोलॉजी की जांच पर फ़ोकस करने वाले आखिरी टेस्टिंग मॉड्यूल पर जाएं.

देखें कि आपको क्या समझ आया

मैन्युअल तौर पर सुलभता की जांच करने के बारे में अपनी जानकारी को परखें