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

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

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

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

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

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

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

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

चलिए, तुलना करते हैं कि फ़िलहाल, कौनसे सुलभता एलिमेंट और जानकारी का पता लगाया जा सकता है जिनसे पता चलता है.

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

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

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

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

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

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

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

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

विज़ुअल की जांच

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

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

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

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

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

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

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

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

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

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

चरण 1

हमारे अपडेट किए गए CodePen डेमो में ये सभी सुविधाएं दी गई हैं अपने-आप होने वाले सुलभता अपडेट लागू कर दिए हैं.

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

दूसरा चरण

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

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

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

  :focus {
    outline: none;
  }

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

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

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

समस्या 2: फ़ोकस ऑर्डर

फ़ोकस इंंडिकेटर में बदलाव करने के बाद, उसके दिखने पर से अपडेट होता है. ऐसा करने पर, आपको ध्यान देना चाहिए कि फ़ॉर्म की इनपुट फ़ील्ड का इस्तेमाल न्यूज़लेटर की सदस्यता लेने के लिए किया जाता है. इस पर फ़ोकस नहीं मिलता. इसे हटा दिया गया है को नेगेटिव 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>

तीसरा चरण

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

समस्या 3: लिंक के कलर कंट्रास्ट

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

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

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

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

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

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

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

समस्या 4: आइकॉन का कलर कंट्रास्ट

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

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

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

समस्या 5: कॉन्टेंट लेआउट

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

p.bullet {
   text-align: justify;
}

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

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

p.bullet {
   text-align: left;
}

चौथा चरण

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

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

अगला चरण

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

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

देखें कि आपको कितना समझ आया है

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