ऑटोमेटेड सुलभता टेस्टिंग

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

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

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

हमारी जांच में वेब कॉन्टेंट ऐक्सेसिबिलिटी के दिशा-निर्देश (डब्ल्यूसीएजी) 2.1 का इस्तेमाल किया गया है कंफ़ॉर्मैंस लेवल A और AA को मानकों के बारे में बताया गया है. याद रखें कि आपका उद्योग, प्रॉडक्ट टाइप, स्थानीय/देश के कानून और नीतियों या सभी सुलभता लक्ष्यों से यह तय होगा कि किस दिशा-निर्देश में कई ज़रूरी चरण पूरे करने होते हैं. अगर आपको अपने प्रोजेक्ट के लिए, डब्ल्यूसीएजी के सबसे नए वर्शन का पालन करने का सुझाव दिया जाता है. "डिजिटल सुलभता को कैसे मापा जाता है?" पर वापस जाएं लेख में, सुलभता ऑडिट, शर्तों के पालन के टाइप/लेवल से जुड़ी सामान्य जानकारी पाने के लिए, डब्लूसीएजी, और पोर्ट.

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

ऑटोमेटेड टेस्टिंग की बुनियादी बातें

अपने-आप सुलभता जांच करने की सुविधा, आपके डिजिटल प्रॉडक्ट को स्कैन करने के लिए सॉफ़्टवेयर का इस्तेमाल करती है में.

ऑटोमेटेड सुलभता जांच के फ़ायदे:

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

अपने-आप काम करने वाले सुलभता टेस्ट से जुड़ी नुकसान:

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

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

ऑटोमेटेड टूल के टाइप

इंटरनेट पर अपने-आप सुलभता की जांच करने वाले सबसे पहले टूल में से एक, सेंटर फ़ॉर अप्लाइड स्पेशल टेक्नोलॉजी (सीएएसटी) की ओर से 1996 "The Boby Report." आज, दुनिया में 100 से ज़्यादा ऑटोमेटेड टेस्टिंग टूल इन्होंने भेजा!

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

आपको कौनसा ऑटोमेटेड टूल इस्तेमाल करना है, यह कई बातों पर निर्भर करता है. जैसे:

• आपको नियमों के पालन से जुड़े किन मानकों और लेवल को टेस्ट करना है? यह हो सकता है डब्लूसीएजी 2.1, डब्लूसीएजी 2.0, अमेरिका सेक्शन 508 या सुलभता नियमों की बदली गई सूची.
• आपको किस तरह के डिजिटल प्रॉडक्ट को टेस्ट करना है? यह कोई वेबसाइट या वेब हो सकता है ऐप्लिकेशन, खास मोबाइल ऐप्लिकेशन, PDF, कीऑस्क या अन्य प्रॉडक्ट.
• सॉफ़्टवेयर डेवलपमेंट की लाइफ़ साइकल के किस चरण में प्रॉडक्ट की टेस्टिंग की जा रही है?
• इस टूल को सेट अप करने और इस्तेमाल करने में कितना समय लगता है? किसी व्यक्ति के लिए, टीम, या कंपनी?
• टेस्ट कौन कर रहा है: डिज़ाइनर, डेवलपर, QA वगैरह?
• आपको कितनी बार सुलभता की जांच करानी है? कौनसी जानकारी दी जानी चाहिए शामिल हैं? समस्याएं सीधे तौर पर टिकट बेचने से जुड़ी होनी चाहिए सिस्टम?
• आपके आस-पास कौनसे टूल सबसे सही काम करते हैं? अपनी टीम के लिए?

हमें कई और बातों का भी ध्यान रखना चाहिए. WAI का लेख पढ़ें "वेब सुलभता इवैलुएशन टूल चुनना" अपने और अपनी टीम के लिए सबसे बेहतर टूल चुनने के बारे में ज़्यादा जानें.

डेमो: अपने-आप होने वाली जांच

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

हमारा डेमो, एक संगठन के लिए बनाई गई एक वेबसाइट है, जिसका नाम है The Medical Mysteries क्लब. इस साइट को डेमो के लिए जान-बूझकर ऐक्सेस करने लायक नहीं बनाया गया है. इनमें से कुछ हो सकता है कि आपको सुलभता सुविधाएं न दिखें और कुछ (सभी नहीं) हमारा ऑटोमेटेड टेस्ट हो जाता है.

चरण 1

अपने Chrome ब्राउज़र का इस्तेमाल करके, Lighthouse एक्सटेंशन.

Lighthouse को इंटिग्रेट करने के कई तरीके हैं को टेस्ट करना शुरू करें. इस डेमो के लिए हम Chrome एक्सटेंशन का इस्तेमाल करेंगे.

दूसरा चरण

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

तीसरा चरण

Chrome DevTools खोलें और लाइटहाउस टैब पर जाएं. इसे छोड़कर सभी श्रेणी विकल्पों से सही का निशान हटाएं "सुलभता." मोड को डिफ़ॉल्ट मोड के तौर पर सेट करें और अपनी पसंद का डिवाइस चुनें पर टेस्ट करा रहा है.

चौथा चरण

"पेज लोड का विश्लेषण करें" पर क्लिक करें बटन पर क्लिक करके, लाइटहाउस को अपनी जांच करने के लिए समय दे सकते हैं.

जांच पूरी होने के बाद, लाइटहाउस एक स्कोर दिखाता है. यह स्कोर बताता है कि ऐक्सेस योग्य है, जिसका आप परीक्षण कर रहे हैं. कॉन्टेंट बनाने लाइटहाउस स्कोर इसका हिसाब समस्याओं की संख्या, अलग-अलग तरह की समस्याओं, और समस्याओं का पता चला है.

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

पांचवां चरण

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

समस्या 1: ARIA रोल

पहली समस्या में बताया गया है: "ARIA [role] वाले एलिमेंट जिनके लिए बच्चों को ज़रूरी शर्तें पूरी करनी होती हैं किसी खास [role] में शामिल नहीं हैं. इसमें कुछ या सभी ज़रूरी बच्चे नहीं हैं. कुछ ARIA पैरंट रोल में, चाइल्ड रोल की खास जानकारी होनी चाहिए, ताकि वे ये काम कर सकें सुलभता फ़ंक्शन बना रहे हों." ARIA रोल के नियमों के बारे में ज़्यादा जानें.

हमारे डेमो में, न्यूज़लेटर की सदस्यता लेने का बटन काम नहीं करता है:

<button role="list" type="submit" tabindex="1">Subscribe</button>

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

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

<button type="submit" tabindex="1">Subscribe</button>

दूसरी समस्या: ARIA छिपा हुआ है

"[aria-hidden="true"] एलिमेंट में फ़ोकस करने लायक डिसेंडेंट हैं. फ़ोकस करने लायक [aria-hidden="true"] एलिमेंट में मौजूद डिसेंडेंट, उन इंटरैक्टिव एलिमेंट को रोकता है स्क्रीन जैसी सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए उपलब्ध एलिमेंट पाठक. aria-hidden नियमों के बारे में ज़्यादा जानें.

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

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

इनपुट फ़ील्ड पर aria-hidden="true" एट्रिब्यूट लागू किया गया है. जोड़ा जा रहा है यह एट्रिब्यूट, एलिमेंट (और इसमें नेस्ट की गई सभी चीज़ें) को छिपा देता है सहायक तकनीक.

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

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

समस्या 3: बटन का नाम

बटन का कोई ऐक्सेस किया जा सकने वाला नाम नहीं है. जब बटन में ऐक्सेस किया जा सकने वाला नाम, स्क्रीन रीडर उसे "बटन" के तौर पर बताते हैं, इसके लिए, उसे किसी काम का नहीं जो स्क्रीन रीडर का इस्तेमाल करते हैं. बटन के नाम के नियमों के बारे में ज़्यादा जानें.

<button role="list" type="submit" tabindex="1">Subscribe</button>

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

जब बटन एलिमेंट से गलत ARIA रोल को हटाया जाता है समस्या 1, शब्द "सदस्यता लें" सुलभता बटन बन जाता है नाम. यह सुविधा सिमैंटिक एचटीएमएल बटन एलिमेंट में बनाई गई है. यह लीजिए के अतिरिक्त पैटर्न के विकल्पों का इस्तेमाल किया जा सकता है.

<button type="submit" tabindex="1">Subscribe</button>

समस्या 4: इमेज के ऑल्ट एट्रिब्यूट

इमेज एलिमेंट में [alt] एट्रिब्यूट मौजूद नहीं हैं. जानकारी देने वाले एलिमेंट का मकसद छोटे और पूरी जानकारी देने वाले वैकल्पिक टेक्स्ट के लिए. सजावटी तत्वों को इनके साथ अनदेखा किया जा सकता है एक खाली alt एट्रिब्यूट है. इमेज के वैकल्पिक टेक्स्ट के बारे में ज़्यादा जानें नियम.

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png">
</a>

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

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

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png"
    alt="Go to the home page.">
</a>

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

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

<a href="#!"><svg><path>...</path></svg></a>

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

पेज पर मौजूद सभी कार्रवाई करने लायक इमेज में यह जानकारी होनी चाहिए कि तो उपयोगकर्ताओं को लिंक भेजा जाएगा. इस समस्या को हल करने का एक तरीका यह है कि लेख में खोज के मकसद के बारे में बताएं, जैसा कि आपने लोगो की इमेज में ऊपर उदाहरण देखें. यह <img> टैग का इस्तेमाल करने वाली इमेज के लिए सही है. हालांकि, यह <svg> टैग इस तरीके का इस्तेमाल नहीं कर सकते.

सोशल मीडिया आइकॉन के लिए, जो <svg> टैग का इस्तेमाल करते हैं, उनके लिए आप अलग-अलग वैकल्पिक विवरण पैटर्न SVG को टारगेट करते समय, <a> और <svg> टैग के बीच जानकारी जोड़ें. इसके बाद, इसे उपयोगकर्ताओं से विज़ुअल तौर पर छिपाएं, काम करने वाला ARIA या अन्य विकल्प जोड़ें. निर्भर करता है कुछ अलग हो सकते हैं, तो एक तरीका कोई दूसरा. चलिए, सबसे सहायक पैटर्न के साथ सबसे आसान पैटर्न का इस्तेमाल करते हैं टेक्नोलॉजी कवरेज, जो <svg> टैग में role="img" जोड़ रहा है और <title> एलिमेंट शामिल है.

<a href="#!">
  <svg role="img">
    <title>Connect on our Twitter page.</title>
    <path>...</path>
  </svg>
</a>

समस्या 6: कलर कंट्रास्ट

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

दो उदाहरण रिपोर्ट किए गए.

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

वेब पेज पर कलर कंट्रास्ट से जुड़ी कई समस्याएं मिली हैं. जैसा कि आपने 2024 में सीखा रंग और कंट्रास्ट मॉड्यूल, रेगुलर-साइज़ टेक्स्ट (18pt / 24px से कम) के लिए कलर कंट्रास्ट की आवश्यकता होती है 4.5:1, जबकि बड़े साइज़ का टेक्स्ट (कम से कम 18pt / 24px या 14pt / 18.5px बोल्ड) और ज़रूरी आइकॉन, 3:1 की शर्तों को पूरा करते हों.

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

इस मामले में, हमें टील कलर का ऐसा कलर मिल सकता है जो 4.5:1 के साइज़ को पूरा करने के लिए काफ़ी गहरा हो या हम बटन के टेक्स्ट का साइज़ बढ़ाकर 18.5 पिक्सल बोल्ड कर सकते हैं. साथ ही, हरे-नीले रंग का मान थोड़ा सा है. दोनों में से कोई भी तरीका डिज़ाइन के मुताबिक सुंदरता.

सफ़ेद बैकग्राउंड पर मौजूद सभी स्लेटी रंग का टेक्स्ट, कलर कंट्रास्ट की वजह से नहीं दिखता. हालांकि, इसे छोड़कर दो सबसे बड़े टाइटल के लिए. मिलने के लिए इस टेक्स्ट का रंग गहरा होना चाहिए 4.5:1 कलर कंट्रास्ट की ज़रूरी शर्तें.

समस्या #7 - सूची का स्ट्रक्चर

सूची आइटम (<li>), <ul> या <ol> पैरंट एलिमेंट में शामिल नहीं हैं. स्क्रीन रीडर के लिए, पैरंट में सूची आइटम (<li>) शामिल होने चाहिए <ul> या <ol> को सही तरीके से एलान करना होगा.

सूची के नियमों के बारे में ज़्यादा जानें.

<div class="ul">
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</div>

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

हमने इस डेमो में बिना क्रम वाली सूची को सिम्युलेट करने के लिए, सीएसएस क्लास का इस्तेमाल किया है, <ul> टैग का इस्तेमाल करके. जब हमने इस कोड को गलत तरीके से लिखा था, तो हमने इस टैग में मौजूद सिमैंटिक एचटीएमएल सुविधाएं. वर्ग को वास्तविक <ul> टैग को टैग करने और उससे जुड़े सीएसएस में बदलाव करने के बाद, हम सुलभता से जुड़ी इस समस्या को ठीक करते हैं.

<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</ul>

समस्या #8 - Tabindex

कुछ एलिमेंट की [tabindex] वैल्यू 0 से ज़्यादा होती है. वैल्यू 0 से ज़्यादा होनी चाहिए साफ़ तौर पर नेविगेशन का क्रम तय करता है. हालांकि तकनीकी रूप से मान्य है, लेकिन यह अक्सर मान्य होता है सहायक टेक्नोलॉजी पर भरोसा करने वाले उपयोगकर्ताओं को परेशानी होती है. Tabindex के नियमों के बारे में ज़्यादा जानें.

<button type="submit" tabindex="1">Subscribe</button>

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

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

<button type="submit">Subscribe</button>

छठा चरण

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

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

अगला चरण

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

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

ऑटोमेटेड सुलभता टेस्टिंग के बारे में अपनी जानकारी को परखें