मुफ़्त एक्सेसिबिलिटी टूल

वेबसाइट एक्सेसिबिलिटी चेकर

अपना पता डालें और हम उस पेज के साथ अधिकतम चार मुख्य पेज एक असली ब्राउज़र में WCAG 2.2 लेवल A और AA के नियमों पर टेस्ट करते हैं। हर बाधा के साथ उसका एलिमेंट, पेज, एक स्क्रीनशॉट और यह जानकारी मिलती है कि उसका असर किन लोगों पर पड़ता है।

मुफ़्त। लगभग एक मिनट में अधिकतम पांच मुख्य पेज टेस्ट करता है।

यह टूल क्या जांचता है

  • आपकी साइट को दर्शाने वाले पाँच पेज

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

  • रेंडर हुए पेज पर WCAG नियम

    हर पेज Chromium में 1366 × 900 पर लोड होता है, और पेज की स्क्रिप्ट चलने के बाद axe-core, यानी Deque का ओपन-सोर्स रूल इंजन, अपने WCAG 2.0, 2.1 और 2.2 लेवल A और AA नियम चलाता है। इससे वे समस्याएँ भी पकड़ में आती हैं जो कोई थीम या ऐप तभी पैदा करता है जब पेज ब्राउज़र में बन चुका होता है।

  • असर और सफलता मानदंड

    फ़ेल होने वाला हर नियम अपना असर दिखाता है: अत्यंत गंभीर (critical), गंभीर (serious), मध्यम (moderate) या मामूली (minor)। साथ में वे WCAG सफलता मानदंड भी दिखते हैं जिनसे वह नियम जुड़ा है, और यह भी कि वह कितने एलिमेंट और पेजों को प्रभावित करता है।

  • फ़ेल होने वाला एलिमेंट, घेरकर दिखाया गया

    एक उदाहरण एलिमेंट का HTML और पेज का एक स्क्रीनशॉट, जिसमें वह एलिमेंट घेरकर दिखाया गया है, ताकि आप या आपका डेवलपर बिना अंदाज़ा लगाए उसे टेम्पलेट में ढूँढ सकें।

  • जिन बातों का फ़ैसला किसी व्यक्ति को करना है

    जब axe-core को कुछ ऐसा मिलता है जिसका वह फ़ैसला नहीं कर पाता, जैसे बैकग्राउंड इमेज के ऊपर लिखा टेक्स्ट जिसका कंट्रास्ट वह माप नहीं सकता, तो उस आइटम को समीक्षा ज़रूरी (needs review) के रूप में दिखाया जाता है। उसे कभी फ़ेल्योर नहीं गिना जाता।

  • कीबोर्ड जाँच

    पहले पेज पर हम 40 बार Tab दबाते हैं और रिकॉर्ड करते हैं कि फ़ोकस कहाँ जाता है: क्या वह आगे बढ़ता भी है, क्या वह किसी लूप में फँस जाता है (अक्सर कुकी बैनर के अंदर), क्या पहला पड़ाव स्किप लिंक है, और फ़ोकस होने पर किन एलिमेंट पर कोई दिखने वाला फ़ोकस इंडिकेटर नहीं होता। यह आख़िरी जाँच एक अनुमान पर आधारित (heuristic) है, इसलिए इसे समीक्षा ज़रूरी (needs review) के रूप में दिखाया जाता है।

यह क्या नहीं जांच सकता

  • स्क्रीन रीडर क्या बोलता है, यह नहीं सुन सकता। सॉफ़्टवेयर यह पुष्टि कर सकता है कि बटन का कोई नाम है, यह नहीं कि ज़ोर से पढ़े जाने पर वह नाम समझ में आता है।
  • वीडियो और ऑडियो के कैप्शन, ट्रांसक्रिप्ट या ऑडियो डिस्क्रिप्शन का आकलन नहीं कर सकता।
  • संज्ञानात्मक (cognitive) और कंटेंट से जुड़े मानदंडों का आकलन नहीं कर सकता, जैसे कि निर्देश साफ़ हैं या नहीं, या एरर मैसेज लोगों को गलती सुधारने में मदद करते हैं या नहीं।
  • लॉगिन, पासवर्ड या बॉट प्रोटेक्शन के पीछे के पेज टेस्ट नहीं कर सकता, न ही चेकआउट की प्रक्रिया पूरी कर सकता है।
  • यह नहीं बता सकता कि आपकी साइट WCAG के अनुरूप है या किसी क़ानून का पालन करती है। ऑटोमेटेड नियम समस्याओं का केवल एक हिस्सा ढूँढते हैं; बाकी के लिए लोगों की ज़रूरत होती है।

यह क्यों ज़रूरी है

एक्सेसिबिलिटी की बाधाएँ अक्सर टेम्पलेट की छोटी गलतियाँ होती हैं, जिनका असर बड़ा होता है। बिना एक्सेसिबल नाम वाला, सिर्फ़ आइकन से बना कार्ट बटन स्क्रीन रीडर पर केवल “button” बोला जाता है, इसलिए स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति नहीं जान पाता कि वह क्या करता है। सफ़ेद बैकग्राउंड पर ग्रे टेक्स्ट, जो 4.5:1 का कंट्रास्ट अनुपात पूरा नहीं करता, कम दृष्टि वाले बहुत से लोगों के लिए पढ़ना मुश्किल होता है, और तेज़ धूप में फ़ोन इस्तेमाल करने वाले किसी भी व्यक्ति के लिए भी।

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

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

नतीजों को कैसे समझें

अत्यंत गंभीर
यह बाधा कुछ लोगों को उस एलिमेंट का इस्तेमाल करने से पूरी तरह रोक सकती है, जैसे बिना लेबल वाला फ़ॉर्म फ़ील्ड या बिना नाम वाला बटन। इन्हें सबसे पहले ठीक करें।
गंभीर
यह बाधा कुछ लोगों के लिए किसी काम को काफ़ी मुश्किल बना देती है, जैसे बॉडी टेक्स्ट जो कंट्रास्ट अनुपात पूरा नहीं करता।
मध्यम
यह बाधा मुश्किल या उलझन पैदा करती है, लेकिन लोग आमतौर पर कोई दूसरा रास्ता निकाल लेते हैं।
मामूली
एक छोटी समस्या या परेशानी। फिर भी अगली बार जब आप वह टेम्पलेट एडिट करें, तो इसे ठीक कर देना फ़ायदेमंद है।
WCAG सफलता मानदंड
किसी नियम के आगे लिखे नंबर, जैसे 1.1.1 या 1.4.3, वे मानदंड हैं जिन्हें वह नियम टेस्ट करता है। जिस नियम के साथ कोई मानदंड नहीं लिखा है, वह WCAG की अनिवार्य शर्त नहीं, बल्कि एक बेस्ट प्रैक्टिस है।
एलिमेंट और पेज
कितने एलिमेंट उस नियम में फ़ेल हुए, और टेस्ट किए गए कितने पेजों पर। जो नियम हर पेज पर फ़ेल होता है, वह आमतौर पर हेडर, मेन्यू या फ़ुटर जैसे किसी साझा हिस्से में होता है।
समीक्षा ज़रूरी
axe-core को कुछ ऐसा मिला जिसका वह फ़ैसला नहीं कर सका। एलिमेंट को ख़ुद देखें: वह पास भी हो सकता है और फ़ेल भी। इन आइटम को फ़ेल्योर नहीं गिना जाता।
फ़ोकस का फँस जाना
Tab दबाने पर फ़ोकस बार-बार उन्हीं कुछ एलिमेंट के बीच घूमता रहा। अगर वे किसी कुकी बैनर के हैं, तो कीबोर्ड इस्तेमाल करने वाले लोग शायद पेज के बाकी हिस्से तक न पहुँच पाएँ।
फ़ोकस आगे नहीं बढ़ता (Focus doesn’t move)
Tab दबाने पर कभी कुछ भी फ़ोकस नहीं हुआ। हो सकता है लिंक और बटन div या span एलिमेंट से बनाए गए हों, या कोई स्क्रिप्ट उस की-प्रेस को रोक रही हो।
स्किप लिंक
क्या पहला Tab पड़ाव “सीधे कंटेंट पर जाएँ” (Skip to content) जैसा लिंक है। इसके बिना कीबोर्ड इस्तेमाल करने वालों को हर पेज पर पूरे हेडर से होकर Tab करना पड़ता है। लैंडमार्क और हेडिंग से भी WCAG 2.4.1 Bypass Blocks पूरा हो सकता है।
फ़ोकस इंडिकेटर नहीं दिखता
फ़ोकस किए गए वे एलिमेंट जिन पर हमें कोई आउटलाइन, बॉक्स शैडो या अंडरलाइन नहीं दिखी। कोई दूसरी स्टाइल, जैसे रंग बदलना, फिर भी दिख सकती है, इसलिए पुष्टि के लिए इन एलिमेंट पर ख़ुद Tab करके देखें।

सबसे आम समस्याओं को कैसे ठीक करें

  • कंट्रास्ट अनुपात पूरा न करने वाला टेक्स्ट

    सामान्य टेक्स्ट के लिए उसके बैकग्राउंड के मुकाबले कम से कम 4.5:1 चाहिए, और बड़े टेक्स्ट (लगभग 24 px, या बोल्ड में लगभग 18.7 px) के लिए 3:1। रंग को एक-एक एलिमेंट पर बदलने के बजाय अपनी थीम सेटिंग्स या डिज़ाइन टोकन में बदलें, फिर प्लेसहोल्डर टेक्स्ट, hover स्टेट और इमेज के ऊपर लिखे टेक्स्ट को दोबारा जाँचें।

  • बिना alt टेक्स्ट वाली इमेज

    हर अर्थपूर्ण इमेज को एक alt एट्रिब्यूट दें जो बताए कि वह क्या दिखाती है या क्या करती है, जैसे प्रोडक्ट का नाम और रंग। सजावटी इमेज को खाली alt (alt="") दें, ताकि स्क्रीन रीडर उन्हें छोड़ दें। Shopify में आप प्रोडक्ट के Media सेक्शन में इमेज पर जाकर alt टेक्स्ट जोड़ते हैं; WordPress में Media Library के Alternative Text फ़ील्ड में।

  • बिना लेबल वाले फ़ॉर्म फ़ील्ड

    हर इनपुट से एक लेबल जोड़ें, ऐसे <label for> के ज़रिए जो फ़ील्ड की id से मेल खाए, या जहाँ कोई दिखने वाला टेक्स्ट न हो वहाँ aria-label इस्तेमाल करें। प्लेसहोल्डर टेक्स्ट को इकलौता लेबल न बनाएँ: जैसे ही कोई टाइप करना शुरू करता है, वह ग़ायब हो जाता है। न्यूज़लेटर साइन-अप और हेडर के सर्च बॉक्स आमतौर पर इसकी वजह होते हैं।

  • बिना एक्सेसिबल नाम वाले बटन और लिंक

    कार्ट, सर्च, मेन्यू या सोशल प्रोफ़ाइल के आइकन कंट्रोल में अक्सर केवल एक SVG होता है। दिखने वाला टेक्स्ट या एक aria-label जोड़ें जो बताए कि कंट्रोल क्या करता है (“कार्ट खोलें”, न कि “आइकन”), और ख़ुद SVG पर aria-hidden="true" जोड़ें।

  • फ़ोकस को फँसाने वाला कुकी बैनर

    पक्का करें कि बैनर के हर बटन तक Tab से पहुँचा जा सके और Enter या Space से उसे इस्तेमाल किया जा सके, कि बैनर बंद करने पर फ़ोकस पेज पर लौट आए, और कि जो बैनर पेज को ब्लॉक नहीं करता वह फ़ोकस को बिल्कुल न पकड़े। अपने कंसेंट टूल की सेटिंग्स जाँचें और अगर उसकी स्क्रिप्ट पुरानी है तो उसे अपडेट करें।

  • CSS में हटाई गई फ़ोकस आउटलाइन

    अपनी स्टाइलशीट में लिंक, बटन और :focus पर outline: none या outline: 0 खोजें। उसकी जगह कोई दिखने वाली स्टाइल लगाएँ, जैसे :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }।

इस टूल के बारे में सवाल

क्या यह एक्सेसिबिलिटी चेकर मुफ़्त है?

हाँ। कोई साइन-अप नहीं है; आपको केवल यह पुष्टि करनी होती है कि साइट आपकी है या आप उसे मैनेज करते हैं। पेड एक्सेसिबिलिटी सुधार रिपोर्ट इसमें आपके साइटमैप से अधिकतम 20 और पेज, सिर्फ़ कीबोर्ड से पूरी की गई एक यूज़र जर्नी, 320 px रीफ़्लो जाँच, आपके फ़ेल हो रहे मार्कअप से बनाया गया पहले और बाद का कोड, AI प्रॉम्प्ट, एक PDF और 5 री-टेस्ट जोड़ती है।

ऑटोमेटेड चेकर WCAG का कितना हिस्सा टेस्ट कर सकता है?

केवल एक हिस्सा। एक नियम यह जाँच सकता है कि इमेज में alt टेक्स्ट है, यह नहीं कि वह टेक्स्ट इमेज का सही वर्णन करता है; और यह कि फ़ील्ड का लेबल है, यह नहीं कि लेबल साफ़ समझ आता है। नतीजों को पक्की समस्याओं की सूची मानें, फिर बाकी चीज़ें कीबोर्ड और स्क्रीन रीडर से टेस्ट करें।

अगर स्कैन में कुछ नहीं मिलता, तो क्या मेरी साइट ADA या WCAG के अनुरूप है?

नहीं। कोई भी ऑटोमेटेड टेस्ट यह साबित नहीं कर सकता कि कोई साइट WCAG के अनुरूप है, या ADA, European Accessibility Act या किसी अन्य क़ानून का पालन करती है। साफ़ नतीजे का मतलब बस इतना है कि टेस्ट किए गए पेजों पर ऑटोमेटेड नियमों को कोई फ़ेल्योर नहीं मिला।

क्या स्टेजिंग साइट या लॉगिन के पीछे के पेज चेक किए जा सकते हैं?

लॉगिन, पासवर्ड या बॉट प्रोटेक्शन के पीछे के पेज टेस्ट नहीं किए जा सकते। अगर आपका बॉट प्रोटेक्शन स्कैन को ब्लॉक करता है, तो FixReportsScanner यूज़र एजेंट को अनुमति दें या किसी सार्वजनिक स्टेजिंग कॉपी को टेस्ट करें।

मैंने एक समस्या ठीक कर दी। नतीजा अब भी वैसा ही क्यों दिखता है?

एक ही पते के लिए पिछले एक घंटे में हुए स्कैन के नतीजे दोबारा इस्तेमाल किए जा सकते हैं। दोबारा टेस्ट करने से पहले वह एक घंटा पूरा होने दें, और कोई भी पेज कैश या CDN कैश साफ़ कर दें।

स्रोत

संबंधित टूल

एक्सेसिबिलिटी सुधार रिपोर्ट ($174, एक बार का भुगतान) पूरे मुफ़्त स्कैन से शुरू होती है और उसमें और पेज, हर नतीजे के लिए करने वाला बदलाव, एक PDF और आपके सुधारों की पुष्टि के लिए री-टेस्ट जोड़ती है।

एक्सेसिबिलिटी सुधार रिपोर्ट के बारे में