WCAG 2.2 AA चेकलिस्ट: ऑनलाइन स्टोर के लिए वेब एक्सेसिबिलिटी

किसी ऑनलाइन स्टोर के लिए WCAG 2.2 AA चेकलिस्ट उन कमियों से शुरू होती है जो ज़्यादातर स्टोर टेम्पलेट्स में मिलती हैं: गायब alt टेक्स्ट, कम कंट्रास्ट वाला टेक्स्ट, बिना accessible name वाले लिंक और बटन, बिना लेबल के फ़ॉर्म फ़ील्ड, कीबोर्ड ट्रैप और न दिखने वाला फ़ोकस। इसके बाद WCAG 2.2 कुछ AA जाँचें जोड़ता है जो स्टोर्स पर ख़ास तौर पर असर डालती हैं: स्टिकी बार के नीचे छिप जाने वाले फ़ोकस किए गए एलिमेंट (2.4.11), 24 × 24 CSS पिक्सेल से छोटे टैप टारगेट (2.5.8) और ऐसे लॉगिन जिनमें लोगों को कुछ याद रखना या दोबारा टाइप करना पड़ता है (3.3.8)। हर पेज टाइप (होम, कलेक्शन, प्रोडक्ट, कार्ट) को कीबोर्ड और किसी ऑटोमेटेड चेकर से टेस्ट करें, फिर थीम टेम्पलेट्स ठीक करें, ताकि हर पेज को वह सुधार अपने आप मिल जाए।

मुख्य बातें

• 5 अक्टूबर 2023 को WCAG 2.2 एक W3C Recommendation बना। मौजूदा संस्करण 12 दिसंबर 2024 का है, और इसे ISO/IEC 40500:2025 (नए टैब में खुलता है) के रूप में मंज़ूरी मिल चुकी है।
• WebAIM Million 2026 (नए टैब में खुलता है) (फ़रवरी 2026 का डेटा) में टॉप 10 लाख होम पेजों में से 95.9% में ऐसी WCAG 2 कमियाँ थीं जिन्हें टूल पकड़ सकते हैं।
• छह सबसे आम कमियाँ थीं: कम कंट्रास्ट वाला टेक्स्ट (83.9% पेज), गायब alt टेक्स्ट (53.1%), गायब फ़ॉर्म लेबल (51%), खाली लिंक (46.3%), खाली बटन (30.6%) और पेज की भाषा का न बताया जाना (13.5%)।
• उस सैंपल के 42,516 Shopify होम पेजों पर औसतन 75.1 एरर पकड़े गए, जबकि सभी पेजों का औसत 56.1 था।
• WCAG 2.2 चार AA मानदंड (2.4.11, 2.5.7, 2.5.8, 3.3.8) और दो Level A मानदंड (3.2.6, 3.3.7) जोड़ता है, और 4.1.1 Parsing को हटाता है।

WCAG 2.2 में ऑनलाइन स्टोर्स के लिए क्या बदला?

WCAG 2.2 ने नौ success criteria (मानदंड) जोड़े, जिनमें से छह Level A या AA के हैं, और 4.1.1 Parsing को पुराना (obsolete) मानकर हटा दिया (W3C WAI (नए टैब में खुलता है))।

बाकी तीन (2.4.12, 2.4.13 और 3.3.9) Level AAA के हैं। चूँकि 2.2 में 4.1.1 को छोड़कर 2.1 का हर मानदंड बना हुआ है, इसलिए 2.2 AA पूरा करने पर 2.1 AA भी पूरा हो जाता है।

स्टोर टेम्पलेट्स में कौन से WCAG मानदंड सबसे ज़्यादा फ़ेल होते हैं?

हर साल वही कुछ मानदंड सामने आते हैं: कंट्रास्ट, alt टेक्स्ट, फ़ॉर्म लेबल और लिंक व बटन के नाम, साथ ही कीबोर्ड और फ़ोकस की समस्याएँ, जिन्हें ऑटोमेटेड टूल सिर्फ़ आंशिक रूप से पकड़ पाते हैं।

WebAIM ने यह भी पाया कि हर चार में से एक लिंक की गई इमेज में alt टेक्स्ट नहीं था, और बिना alt टेक्स्ट वाली 45% इमेज लिंक थीं (WebAIM (नए टैब में खुलता है))। कलेक्शन ग्रिड पर इसका मतलब आमतौर पर प्रोडक्ट इमेज का लिंक होता है।

होम पेज पर क्या जाँचें?

हेडर, hero सेक्शन और पॉप-अप होने वाली हर चीज़ जाँचें, क्योंकि हर विज़िटर सबसे पहले इन्हीं से रूबरू होता है।

• स्किप लिंक। पहले फ़ोकस होने वाले एलिमेंट के रूप में “Skip to content” (कंटेंट पर जाएँ) लिंक हो (2.4.1 Bypass Blocks, A)।
• हेडर आइकन। सर्च, अकाउंट और कार्ट आइकन के accessible name हों, और कार्ट के नाम में आइटम की संख्या शामिल हो।
• मेन्यू। Enter या Space से खुले, सब-आइटम Tab से पहुँच में हों, Escape से बंद हो, और hover पर निर्भर न हो (2.1.1)। Shopify की Theme Store requirements (नए टैब में खुलता है) कहती हैं कि पेज के सभी हिस्से, ड्रॉपडाउन मेन्यू समेत, कीबोर्ड से इस्तेमाल किए जा सकने चाहिए।
• Hero स्लाइडर। अगर स्लाइड पाँच सेकंड से ज़्यादा समय तक अपने आप चलती हैं, तो पॉज़ कंट्रोल दें (2.2.2 Pause, Stop, Hide, A)।
• अनाउंसमेंट बार और इमेज पर टेक्स्ट। कंट्रास्ट मापें; ब्रांड रंग अक्सर 4.5:1 पर फ़ेल हो जाते हैं।
• पॉपअप और कुकी बैनर। फ़ोकस को पॉपअप के अंदर ले जाएँ, ईमेल फ़ील्ड को लेबल दें, Escape से बंद करने की सुविधा दें, और पक्का करें कि कोई स्टिकी बैनर फ़ोकस किए गए एलिमेंट को कभी पूरी तरह न ढके (2.4.11)। W3C फ़ोकस किए गए एलिमेंट को स्टिकी बार से दूर रखने के एक तरीके के रूप में CSS scroll-padding का ज़िक्र करता है (W3C (नए टैब में खुलता है))।
• पेज की भाषा। html एलिमेंट पर सही lang एट्रिब्यूट हो (3.1.1 Language of Page, A)।

कलेक्शन पेजों पर क्या जाँचें?

कलेक्शन पेज आमतौर पर प्रोडक्ट कार्ड, फ़िल्टर और स्वैच पर फ़ेल होते हैं।

• प्रोडक्ट कार्ड। इमेज लिंक में alt टेक्स्ट हो, या इमेज असिस्टिव टेक्नोलॉजी से छिपी हो और टाइटल लिंक में नाम हो।
• फ़िल्टर। हर चेकबॉक्स का लेबल हो और हर ग्रुप की एक हेडिंग या legend हो। फ़िल्टर ड्रॉअर कीबोर्ड से खुले, काम करे और बंद हो। अपडेट हुई रिज़ल्ट संख्या को स्टेटस मैसेज के रूप में अनाउंस करें (4.1.3 Status Messages, AA)।
• प्राइस स्लाइडर। न्यूनतम और अधिकतम कीमत के लिए नंबर इनपुट जोड़ें, ताकि फ़िल्टर बिना ड्रैग किए (2.5.7) और बिना माउस के (2.1.1) काम करे।
• कलर स्वैच। हर स्वैच का टेक्स्ट में नाम हो, और “स्टॉक में नहीं” (sold out) सिर्फ़ रंग से न दिखाया जाए (1.4.1 Use of Color, A)। स्वैच 24 × 24 CSS पिक्सेल के हों या स्पेसिंग का नियम पूरा करें (2.5.8)।
• सॉर्टिंग और पेजिनेशन। सॉर्ट ड्रॉपडाउन का लेबल हो; पेज लिंक और “load more” बटन टारगेट साइज़ की शर्त पूरी करें।

प्रोडक्ट पेजों पर क्या जाँचें?

ख़रीदने का फ़ैसला प्रोडक्ट पेज पर होता है, इसलिए फ़ोटो से लेकर add-to-cart बटन तक हर कंट्रोल टेस्ट करें।

• गैलरी। हर इमेज में alt टेक्स्ट हो, थंबनेल ऐसे बटन हों जिनके नाम “इमेज 2 दिखाएँ” जैसे हों, और तीर बिना ड्रैग किए काम करें (2.5.7)।
• वेरिएंट पिकर। साइज़ और रंग के विकल्प एक लेबल वाले ग्रुप में हों (1.3.1), चुना गया विकल्प स्क्रीन रीडर को बताया जाए (4.1.2), और जो साइज़ उपलब्ध नहीं हैं, वे टेक्स्ट में चिह्नित हों।
• क्वांटिटी। इनपुट का लेबल हो, और माइनस व प्लस बटन के नाम हों और वे 2.5.8 पूरा करें। Shopify का Theme Store अब कम से कम 24 × 24 CSS पिक्सेल के टच टारगेट माँगता है, और उसकी accessibility best practices (नए टैब में खुलता है) प्राइमरी कंट्रोल के लिए 44 × 44 की सलाह देती हैं।
• Add to cart। सफलता और एरर के मैसेज अनाउंस हों (4.1.3)। एक ओवरले वेंडर के ख़िलाफ़ FTC की शिकायत में एक ऐसी साइट का हवाला दिया गया था जहाँ स्क्रीन रीडर ने यह नहीं बताया कि आइटम कार्ट में जुड़ गया है, और 5-स्टार रेटिंग ग्राफ़िक को “previous” बटन के रूप में पढ़ा गया (FTC की शिकायत (नए टैब में खुलता है))।
• रेटिंग, टैब और अकॉर्डियन। रेटिंग के साथ “5 में से 4.5 स्टार” जैसा टेक्स्ट हो। अकॉर्डियन बताएँ कि वे खुले हैं या बंद।
• स्टिकी add-to-cart बार। जब कीबोर्ड यूज़र Tab से पेज पर नीचे जाता है, तो यह बार फ़ोकस किए गए एलिमेंट को पूरी तरह न ढके (2.4.11)।
• वीडियो। बोले गए शब्दों वाले प्रोडक्ट वीडियो में कैप्शन हों (1.2.2 Captions (Prerecorded), A)।

कार्ट और साइन-इन में क्या जाँचें?

कार्ट वह आख़िरी पेज है जिस पर ज़्यादातर थीम का पूरा नियंत्रण होता है, इसलिए इसे चेकआउट बटन तक टेस्ट करें, फिर जाँचें कि अकाउंट साइन-इन याददाश्त या दोबारा टाइप करने पर निर्भर न हो।

• कार्ट ड्रॉअर। फ़ोकस ड्रॉअर के अंदर जाए, जब तक वह खुला है वहीं रहे, और Escape से बंद होने पर कार्ट बटन पर लौट आए, जैसा Shopify की best practices में बताया गया है।
• लाइन आइटम। हर क्वांटिटी इनपुट पर प्रोडक्ट के नाम का लेबल हो, और हर remove बटन बताए कि वह क्या हटाता है, जैसे “लिनन शर्ट, साइज़ M हटाएँ”।
• डिस्काउंट और नोट फ़ील्ड। इन पर लेबल हों, और एरर टेक्स्ट में बताए जाएँ (3.3.1 Error Identification, A)।
• चेकआउट बटन। Tab से पहुँचा जा सके, फ़ोकस साफ़ दिखे और यह स्टिकी एलिमेंट के पीछे न छिपे।
• साइन-इन (3.3.8)। Shopify के customer accounts डिफ़ॉल्ट रूप से वन-टाइम कोड के साथ पासवर्ड-रहित साइन-इन (नए टैब में खुलता है) इस्तेमाल करते हैं। W3C कहता है कि कोड पेस्ट या ऑटो-फ़िल किए जा सकने चाहिए, और पेस्ट या पासवर्ड मैनेजर को ब्लॉक करने पर यह मानदंड फ़ेल होता है; AA पर ऑब्जेक्ट पहचानने वाले CAPTCHA की अनुमति है, लेकिन पज़ल या गणित वाले CAPTCHA के साथ कोई दूसरा तरीका भी होना चाहिए (W3C (नए टैब में खुलता है))।

यहाँ प्लेटफ़ॉर्म का अंतर मायने रखता है। Shopify पर information, shipping और payment स्टेप्स के लिए checkout.liquid अब सपोर्टेड नहीं है (नए टैब में खुलता है), इसलिए ज़्यादातर चेकआउट मार्कअप आपकी थीम का नहीं, Shopify का होता है; आप जो चेकआउट ऐप और कस्टमाइज़ेशन जोड़ते हैं, उन्हें टेस्ट करें। WooCommerce पर चेकआउट आपकी WordPress साइट का एक पेज होता है। WooCommerce कहता है कि उसका core फ़्रंट एंड काफ़ी हद तक WCAG 2.2 AA के अनुरूप है (स्टेटमेंट आख़िरी बार 1 अप्रैल 2025 को अपडेट हुआ), लेकिन आपकी थीम और प्लगइन फिर भी इसे बिगाड़ सकते हैं (WooCommerce (नए टैब में खुलता है))।

इस चेकलिस्ट से स्टोर को कैसे टेस्ट करें?

हर पेज टाइप पर एक ऑटोमेटेड स्कैन, सिर्फ़ कीबोर्ड से की गई ख़रीदारी और स्क्रीन रीडर से एक छोटी जाँच, तीनों को मिलाकर इस्तेमाल करें।

1. ऑटोमेटेड स्कैन। axe, WAVE या Lighthouse जैसे टूल कंट्रास्ट, alt टेक्स्ट, लेबल और खाली लिंक पकड़ते हैं। Shopify का Theme Store होम, कलेक्शन और प्रोडक्ट पेजों पर कम से कम 90 का औसत Lighthouse accessibility स्कोर माँगता है। यह न्यूनतम स्तर है, अनुरूपता (conformance) नहीं: W3C कहता है कि टूल अपने आप एक्सेसिबिलिटी तय नहीं कर सकते (नए टैब में खुलता है)।
2. सिर्फ़ कीबोर्ड से ख़रीदारी। होम पेज से शुरू करके, बिना माउस के, मेन्यू या सर्च से किसी प्रोडक्ट तक पहुँचें, फ़िल्टर लगाएँ, वेरिएंट चुनें, कार्ट में जोड़ें, कार्ट खोलें और चेकआउट बटन तक पहुँचें।
3. स्क्रीन रीडर से स्पॉट चेक। VoiceOver या NVDA से प्रोडक्ट का नाम, कीमत, वेरिएंट की स्थिति और add-to-cart कन्फ़र्मेशन सुनें।
4. बदलावों के बाद दोबारा टेस्ट करें। थीम अपडेट और नए ऐप पहले किए गए सुधारों को बेअसर कर सकते हैं।

हमारा मुफ़्त स्कैन असली Chromium में axe-core के साथ एक होम, कलेक्शन, प्रोडक्ट, कार्ट और कंटेंट पेज पर स्टेप 1 को कवर करता है। एक्सेसिबिलिटी सुधार रिपोर्ट 25 पेजों तक टेस्ट करती है, स्टेप 2 को चेकआउट बटन तक सिर्फ़ कीबोर्ड से की जाने वाली शॉपिंग टेस्ट के रूप में जोड़ती है, पहले और बाद का कोड देती है, और स्टेप 3 के लिए एक चेकलिस्ट शामिल करती है, जिसके लिए स्क्रीन रीडर के साथ किसी व्यक्ति की ज़रूरत होती है। इनमें से कोई भी ADA या WCAG अनुपालन की गारंटी नहीं देता।

अक्सर पूछे जाने वाले प्रश्न

क्या अमेरिका के ऑनलाइन स्टोर्स के लिए WCAG 2.2 क़ानूनी रूप से ज़रूरी है?

अमेरिकी न्याय विभाग (Justice Department) का ऐसा कोई ADA रेगुलेशन नहीं है जो प्राइवेट बिज़नेस के लिए वेब स्टैंडर्ड तय करता हो, और उसकी 2022 की वेब गाइडेंस (नए टैब में खुलता है) WCAG को मददगार मार्गदर्शन के रूप में बताती है। डिमांड लेटर में आमतौर पर WCAG 2.1 या 2.2 AA का हवाला दिया जाता है, इसलिए अपनी ख़ास ज़िम्मेदारियों के बारे में किसी वकील से बात करें।

क्या WCAG 2.2 AA पूरा करने से WCAG 2.1 AA भी पूरा हो जाता है?

हाँ, व्यावहारिक रूप से। WCAG 2.2 में 4.1.1 Parsing को छोड़कर WCAG 2.1 के सभी success criteria बने हुए हैं; 4.1.1 को W3C ने पुराना मानकर हटा दिया।

WCAG 2.2 में न्यूनतम टारगेट साइज़ क्या है?

2.5.8 के तहत टारगेट कम से कम 24 × 24 CSS पिक्सेल के होने चाहिए, जब तक कि हर छोटे टारगेट के बीच में रखा गया 24 px का घेरा दूसरे टारगेट या उनके घेरों को न छुए। वाक्यों के अंदर के लिंक, बिना स्टाइल वाले ब्राउज़र कंट्रोल, ज़रूरी प्रस्तुतियाँ (essential presentations) और ऐसे टारगेट जिनके लिए शर्त पूरी करने वाला कोई समकक्ष कंट्रोल मौजूद है, इस नियम से छूट पाते हैं।

क्या Lighthouse accessibility स्कोर 100 होने का मतलब है कि मेरा स्टोर मानकों के अनुरूप है?

नहीं। ऑटोमेटेड टूल सिर्फ़ कुछ कमियाँ पकड़ते हैं, और WebAIM बताता है कि कोई एरर न पकड़े जाने का मतलब यह नहीं है कि पेज एक्सेसिबल या मानकों के अनुरूप है।

क्या पासवर्ड वाला लॉगिन 3.3.8 पर फ़ेल होता है?

अपने आप में नहीं। पासवर्ड फ़ील्ड तब पास होता है जब लोग उसमें पेस्ट कर सकें और पासवर्ड मैनेजर इस्तेमाल कर सकें; पेस्ट या ऑटोफ़िल को ब्लॉक करना ही फ़ेल होने की वजह बनता है।

मुझे अपने स्टोर को कितनी बार दोबारा टेस्ट करना चाहिए?

हर थीम अपडेट, नए ऐप या टेम्पलेट में बड़े बदलाव के बाद दोबारा टेस्ट करें, और ख़रीदारी के रास्ते की नियमित रूप से स्पॉट-चेक करते रहें, क्योंकि ऐप बिना चेतावनी के नया मार्कअप जोड़ सकते हैं।

स्रोत

• Web Content Accessibility Guidelines (WCAG) 2.2 (नए टैब में खुलता है), W3C, Recommendation, 12 दिसंबर 2024
• What's New in WCAG 2.2 (नए टैब में खुलता है), W3C Web Accessibility Initiative, 5 अक्टूबर 2023
• WCAG 2.2 Approved as an ISO Standard (नए टैब में खुलता है), W3C Web Accessibility Initiative, 21 अक्टूबर 2025
• How to Meet WCAG 2.2 (Quick Reference) (नए टैब में खुलता है), W3C Web Accessibility Initiative, 22 अक्टूबर 2026 को देखा गया (अनुरूपता स्तर)
• Understanding SC 1.4.3 Contrast (Minimum) (नए टैब में खुलता है), SC 2.4.11 Focus Not Obscured (Minimum) (नए टैब में खुलता है), SC 2.5.8 Target Size (Minimum) (नए टैब में खुलता है) और SC 3.3.8 Accessible Authentication (Minimum) (नए टैब में खुलता है), W3C Web Accessibility Initiative, 22 अक्टूबर 2026 को देखा गया
• Selecting Web Accessibility Evaluation Tools (नए टैब में खुलता है), W3C Web Accessibility Initiative, 13 मई 2024 को अपडेट किया गया
• The WebAIM Million: 2026 report (नए टैब में खुलता है), WebAIM, फ़रवरी 2026 का डेटा, आख़िरी अपडेट 30 मार्च 2026
• Theme Store requirements (नए टैब में खुलता है), Shopify, 22 अक्टूबर 2026 को देखा गया
• Accessibility best practices for Shopify themes (नए टैब में खुलता है), Shopify, 22 अक्टूबर 2026 को देखा गया
• checkout.liquid (नए टैब में खुलता है), Shopify, 22 अक्टूबर 2026 को देखा गया
• Sign-in options for customer accounts (नए टैब में खुलता है), Shopify Help Center, 22 अक्टूबर 2026 को देखा गया
• Accessibility in WooCommerce (नए टैब में खुलता है), WooCommerce, स्टेटमेंट का आख़िरी अपडेट 1 अप्रैल 2025
• accessiBe complaint (नए टैब में खुलता है), Federal Trade Commission, 3 जनवरी 2025
• Guidance on Web Accessibility and the ADA (नए टैब में खुलता है), U.S. Department of Justice, 18 मार्च 2022