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

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

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

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

मैन्युअल तरीके से ऐक्सेसिबिलिटी की जांच करने के फ़ायदे:

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

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

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

तुलना करें कि अपने-आप काम करने वाले टूल से, ऐक्सेसिबिलिटी के किन एलिमेंट और जानकारी का पता लगाया जा सकता है और किनका नहीं.

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


मैन्युअल तरीके से जांच करने की सुविधा के टाइप

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

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

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

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

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

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

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

कुंजी नतीजा
टैब यह फ़ंक्शन, एक चालू एलिमेंट से दूसरे चालू एलिमेंट पर जाता है
Shift + Tab एक चालू एलिमेंट से दूसरे चालू एलिमेंट पर पीछे की ओर जाता है
ऐरो मिलते-जुलते कंट्रोल के बीच स्विच करना
Spacebar स्टेटस टॉगल करता है और पेज पर नीचे की ओर जाता है
Shift + Spacebar इस बटन से पेज ऊपर की ओर जाता है
Enter इससे कुछ कंट्रोल ट्रिगर होते हैं
Escape डाइनैमिक तौर पर दिखाए गए ऑब्जेक्ट को खारिज करता है

विज़ुअल जांच

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

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

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

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

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

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

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

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

डेमो: मैन्युअल टेस्ट

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

चरण 1

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

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

दूसरा चरण

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

समस्या 1: फ़ोकस इंडिकेटर दिख रहा है

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

  :focus {
    outline: none;
  }
आइए, इसे ठीक करते हैं.

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

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

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

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

<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 के कलर कंट्रास्ट की ज़रूरी शर्त पूरी करना ज़रूरी है.

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

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

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

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

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

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

इस स्क्रीनशॉट में, डेमो दिखाया गया है. इसमें कलर ऐनलाइज़र, आइकॉन के रंग के कंट्रास्ट के फ़ेल होने की जानकारी दिखा रहा है.

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

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

p.bullet {
   text-align: justify;
}
आइए, इसे ठीक करते हैं.

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

p.bullet {
   text-align: left;
}

चौथा चरण

Medical Mysteries Club की डेमो साइट का स्क्रीनशॉट.
इस इमेज में दिखाया गया है कि डेमो में, मैन्युअल तरीके से की गई सभी समस्याओं को ठीक कर दिया गया है.

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

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

अगला चरण

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

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

पीछे जाएं
ऑटोमेटेड सुलभता टेस्टिंग
आगे बढ़ें
सहायक टेक्नोलॉजी की जांच