वेबसाइट एक्सेसिबिलिटी: एक प्रैक्टिकल WCAG 2.2 गाइड
अपनी साइट के लिए WCAG 2.2 कैसे पढ़ें, वे फिक्स जो ज़्यादातर असली दुनिया की असफलताओं को कवर करते हैं, कोई भी चला सके ऐसा 30-मिनट का मैनुअल टेस्ट, और एक्सेसिबिलिटी व यूज़ेबिलिटी कैसे ओवरलैप करते हैं।
अक्सर पूछे जाने वाले सवाल
एक वेबसाइट के WCAG कंप्लायंट होने का क्या मतलब है?
इसका मतलब है साइट Web Content Accessibility Guidelines के चुने गए लेवल के सक्सेस क्राइटेरिया को पूरा करती है, आमतौर पर WCAG 2.1 या 2.2 लेवल AA। लेवल AA में हर लेवल A और AA क्राइटेरिया शामिल है। ज़्यादातर कानून और खरीद नीतियां जो WCAG का हवाला देती हैं वे लेवल AA मांगती हैं।
मुझे अपनी साइट के लिए WCAG गाइडलाइन कैसे समझनी चाहिए?
W3C के 'How to Meet WCAG' क्विक रेफरेंस से शुरू करें, इसे लेवल A और AA तक फिल्टर करें, और हर क्राइटेरिया के लिए 'Understanding' पेज पढ़ें, जो सरल भाषा में इरादा समझाता है। फिर हर पेज को अलग-अलग जांचने के बजाय अपने मुख्य टेम्पलेट (होम, एक कंटेंट पेज, एक फॉर्म, चेकआउट) टेस्ट करें।
क्या एक एक्सेसिबिलिटी ओवरले या प्लगइन मेरी साइट को कंप्लायंट बना सकता है?
कोई टूल अकेले किसी साइट को कंप्लायंट नहीं बना सकता। एक टूलबार जोड़ने वाले ओवरले अंतर्निहित कोड ठीक नहीं करते, और कई विकलांग यूज़र्स और एक्सेसिबिलिटी विशेषज्ञ बताते हैं कि ये रास्ते में आते हैं। HTML, कंट्रास्ट, लेबल और कीबोर्ड सपोर्ट को सीधे ठीक करें।
यूज़ेबिलिटी और एक्सेसिबिलिटी में क्या फर्क है?
एक्सेसिबिलिटी का मतलब है विकलांग लोग साइट को महसूस, समझ, नेविगेट और इस्तेमाल कर सकें। यूज़ेबिलिटी का मतलब है साइट सबके लिए आसान और कुशल है। ये काफी ओवरलैप करते हैं: साफ लेबल, अच्छा कंट्रास्ट और पूर्वानुमानित नेविगेशन सिर्फ विकलांग नहीं, सभी विज़िटर्स की मदद करते हैं।
क्या ऑटोमेटेड चेकर सभी एक्सेसिबिलिटी समस्याएं ढूंढते हैं?
नहीं। WAVE, axe और Lighthouse जैसे टूल गायब ऑल्ट टेक्स्ट, कम कंट्रास्ट और गायब लेबल जैसी समस्याएं पकड़ते हैं, लेकिन कई क्राइटेरिया, जैसे ऑल्ट टेक्स्ट सार्थक है या नहीं या फोकस ऑर्डर समझ में आता है या नहीं, को जांचने के लिए एक इंसान चाहिए।
एक WCAG कंप्लायंट वेबसाइट एक चुने गए लेवल पर Web Content Accessibility Guidelines को पूरा करती है, और लगभग हर बिज़नेस के लिए इसका मतलब है WCAG 2.2 लेवल AA। व्यवहार में, ज़्यादातर साइट्स एक ही मुट्ठी भर समस्याओं पर फेल होती हैं: कम कलर कंट्रास्ट, गायब इमेज ऑल्ट टेक्स्ट, बिना लेबल वाले फॉर्म फील्ड, खाली लिंक और बटन, और वे चीज़ें जिन तक आप कीबोर्ड से नहीं पहुंच सकते। इन्हें ठीक करें और कीबोर्ड व स्क्रीन रीडर से टेस्ट करें, तो आपने असली यूज़र्स को होने वाली ज़्यादातर समस्याओं का एक बड़ा हिस्सा कवर कर लिया।
यह गाइड समझाती है कि बिना भटके WCAG कैसे पढ़ें, कौन से फिक्स सबसे ज़्यादा मायने रखते हैं, और एक 30-मिनट का टेस्ट जो आप खुद कर सकते हैं।
WCAG कैसे संरचित है
WCAG W3C द्वारा प्रकाशित किया जाता है। यह परतों में व्यवस्थित है:
चार सिद्धांत, POUR के नाम से जाने जाते हैं: कंटेंट Perceivable (महसूस किया जा सकने वाला), Operable (चलाया जा सकने वाला), Understandable (समझा जा सकने वाला) और Robust (मज़बूत) होना चाहिए।
हर सिद्धांत के तहत गाइडलाइन (उदाहरण के लिए, "Text Alternatives" या "Keyboard Accessible")।
हर गाइडलाइन के तहत सक्सेस क्राइटेरिया। ये टेस्ट किए जा सकने वाले नियम हैं, हर एक नंबरदार (जैसे 1.4.3 Contrast) और एक लेवल दिया गया: A, AA या AAA।
लेवल A न्यूनतम है। लेवल AA कानूनी और खरीद ज़रूरतों के लिए आम लक्ष्य है। लेवल AAA ज़्यादा सख्त है और आमतौर पर पूरी साइट्स के लिए ज़रूरी नहीं होता।
WCAG 2.2 अक्टूबर 2023 में एक W3C Recommendation बना। इसने मिनिमम टारगेट साइज़, फोकस न छिपने और एक्सेसिबल ऑथेंटिकेशन जैसे क्राइटेरिया जोड़े, और 4.1.1 Parsing को पुराना मानकर हटा दिया।
अपनी साइट के लिए WCAG कैसे समझें
स्पेक एक स्टैंडर्ड जैसा पढ़ा जाता है, क्योंकि यह एक स्टैंडर्ड ही है। इसे समझने का एक व्यावहारिक तरीका:
W3C का "How to Meet WCAG (Quick Reference)" खोलें।
इसे सिर्फ लेवल A और AA तक फिल्टर करें।
हर क्राइटेरिया के लिए, लिंक किया गया "Understanding" पेज पढ़ें। यह पास और फेल होने के उदाहरणों के साथ, सरल भाषा में इरादा समझाता है।
हर पेज टेस्ट करने के बजाय, अपने टेम्पलेट टेस्ट करें: होम पेज, एक स्टैंडर्ड कंटेंट पेज, एक ब्लॉग पोस्ट, एक फॉर्म, एक प्रोडक्ट या चेकआउट पेज। एक टेम्पलेट ठीक करने से उस पर बना हर पेज ठीक हो जाता है।
हर समस्या को क्राइटेरिया नंबर, पेज, और फिक्स कैसा दिखता है इसके साथ रिकॉर्ड करें।
वे फिक्स जो ज़्यादातर असली असफलताएं कवर करते हैं
1. कलर कंट्रास्ट (1.4.3 और 1.4.11)
सामान्य टेक्स्ट: बैकग्राउंड के खिलाफ कम से कम 4.5:1।
बड़ा टेक्स्ट (लगभग 24px रेगुलर, या 18.66px बोल्ड और उससे बड़ा): कम से कम 3:1।
इंटरफेस कंपोनेंट और मतलबी ग्राफिक्स (बटन बॉर्डर, इनपुट आउटलाइन, जानकारी देने वाले आइकन): कम से कम 3:1।
हल्का ग्रे प्लेसहोल्डर टेक्स्ट और पीले ब्रांड रंगों पर सफेद टेक्स्ट आमतौर पर दोषी होते हैं। WebAIM के कंट्रास्ट चेकर या अपने ब्राउज़र के dev tools से जांचें।
2. इमेज के लिए टेक्स्ट अल्टरनेटिव (1.1.1)
जानकारी देने वाली इमेज को मायने रखने वाली बात बताने वाला ऑल्ट टेक्स्ट मिलता है: alt="Technician replacing a furnace filter"।
डेकोरेटिव इमेज को खाली ऑल्ट मिलता है: alt="", ताकि स्क्रीन रीडर इन्हें छोड़ दें।
टेक्स्ट की इमेज (एक फ्लायर स्क्रीनशॉट, JPG के रूप में एक मेन्यू) को असली टेक्स्ट के रूप में वही टेक्स्ट उपलब्ध होना चाहिए।
लिंक की गई इमेज, जैसे होम जाने वाला एक लोगो, डेस्टिनेशन का वर्णन करती हैं: alt="Acme Plumbing home"।
3. फॉर्म लेबल और एरर (1.3.1, 3.3.1, 3.3.2)
हर इनपुट को इससे लिंक किया गया एक दिखने वाला <label> चाहिए। प्लेसहोल्डर टेक्स्ट एक लेबल नहीं है: यह टाइप करते ही गायब हो जाता है।
एरर मैसेज बताते हैं क्या गलत हुआ और इसे कैसे ठीक करें ("एरिया कोड के साथ एक फोन नंबर डालें"), टेक्स्ट में, सिर्फ एक लाल बॉर्डर नहीं।
ज़रूरी फील्ड टेक्स्ट में या एक एक्सेसिबल इंडिकेटर के साथ चिह्नित होते हैं, सिर्फ रंग से नहीं।
4. कीबोर्ड एक्सेस (2.1.1, 2.4.3, 2.4.7)
हर लिंक, बटन, मेन्यू और फॉर्म कंट्रोल को Tab, Shift+Tab, Enter और Space के साथ काम करना चाहिए।
फोकस ऑर्डर विज़ुअल ऑर्डर को फॉलो करता है।
एक दिखने वाला फोकस इंडिकेटर दिखाता है कि आप कहां हैं। outline: none से बिना किसी बदले के ब्राउज़र आउटलाइन हटाना एक आम असफलता है।
ड्रॉपडाउन मेन्यू और मोडल को कीबोर्ड से खुलना, काम करना और बंद होना चाहिए, और मोडल को बंद होने तक फोकस अंदर रखना चाहिए।
5. नाम वाले लिंक और बटन (2.4.4, 4.1.2)
सिर्फ आइकन वाले बटन (एक हैमबर्गर मेन्यू, एक सर्च मैग्नीफायर, सोशल आइकन) को दिखने वाले टेक्स्ट, aria-label या छिपे टेक्स्ट के ज़रिए एक एक्सेसिबल नाम चाहिए।
"Click here" और "Read more" लिंक से भरे पेज से बचें। लिंक टेक्स्ट को डेस्टिनेशन का वर्णन करने दें, या हर एक को एक अलग एक्सेसिबल नाम दें।
6. संरचना और हेडिंग (1.3.1, 2.4.6)
पेज का वर्णन करने वाला प्रति पेज एक <h1>।
लॉजिकल क्रम में हेडिंग (सेक्शन के लिए h2, उनके अंदर h3), फॉन्ट साइज़ के लिए नहीं चुने गए।
असली लिस्ट, हेडर सेल वाली टेबल, और लैंडमार्क (<header>, <nav>, <main>, <footer>) इस्तेमाल करें।
पेज की भाषा सेट करें: <html lang="en">।
7. WCAG 2.2 में नया, जानने लायक
2.5.8 Target Size (Minimum), AA: क्लिक किए जा सकने वाले टारगेट कम से कम 24 गुणा 24 CSS पिक्सेल, या छोटे टारगेट के आसपास काफी स्पेसिंग।
2.4.11 Focus Not Obscured (Minimum), AA: स्टिकी हेडर, कुकी बैनर और चैट विजेट को फोकस किए गए एलिमेंट को पूरी तरह छिपाना नहीं चाहिए।
3.3.8 Accessible Authentication (Minimum), AA: बिना किसी विकल्प के लॉग इन करने के लिए पहेलियां हल करना या जानकारी याद रखना ज़रूरी न बनाएं; पासवर्ड मैनेजर और पेस्ट की अनुमति दें।
3.3.7 Redundant Entry, A: लोगों को वही जानकारी दोबारा टाइप करने पर मजबूर न करें जो उन्होंने उसी प्रोसेस में पहले ही दी हो।
8. मीडिया और मोशन
वीडियो को कैप्शन चाहिए (1.2.2); पहले से रिकॉर्ड किए गए वीडियो को महत्वपूर्ण विज़ुअल कंटेंट के लिए ऑडियो डिस्क्रिप्शन या एक टेक्स्ट अल्टरनेटिव चाहिए।
जो कुछ भी पांच सेकंड से ज़्यादा अपने आप चलता है उसे रोकने का एक तरीका चाहिए (2.2.2)।
बड़े एनिमेशन के लिए prefers-reduced-motion सेटिंग का सम्मान करें।
एक 30-मिनट का मैनुअल टेस्ट
ऑटोमेटेड टूल तस्वीर का सिर्फ एक हिस्सा पकड़ते हैं। हर मुख्य टेम्पलेट के लिए यह रूटीन जोड़ें।
मिनट 0 से 5: ऑटोमेटेड स्कैन। WAVE (ब्राउज़र एक्सटेंशन) या axe DevTools, या Lighthouse का एक्सेसिबिलिटी सेक्शन चलाएं। गायब ऑल्ट, गायब लेबल और कंट्रास्ट असफलता जैसी साफ गलतियां ठीक करें।
मिनट 5 से 15: सिर्फ कीबोर्ड। माउस दूर रखें। पेज को ऊपर से Tab करते हुए जाएं।
क्या आप हर समय देख सकते हैं कि फोकस कहां है?
क्या आप मेन्यू खोल और बंद कर सकते हैं, हर फॉर्म फील्ड इस्तेमाल कर सकते हैं और सबमिट कर सकते हैं?
क्या "Skip to content" लिंक है, और क्या यह काम करता है?
क्या फोकस कभी एक स्टिकी हेडर या बैनर के पीछे गायब हो जाता है?
मिनट 15 से 25: स्क्रीन रीडर। VoiceOver (macOS और iOS में बिल्ट-इन) या NVDA (Windows पर मुफ्त) इस्तेमाल करें।
हेडिंग लिस्ट सुनें। क्या यह पेज का वर्णन करती है?
इमेज और बटन पर Tab करें। क्या वे संदर्भ के बाहर भी समझ में आते हैं?
फॉर्म भरें। क्या हर फील्ड अपने लेबल के साथ बताई जाती है? क्या एरर बताए जाते हैं?
मिनट 25 से 30: ज़ूम और रीफ्लो। ब्राउज़र को 200% फिर 400% तक ज़ूम करें। 400% पर, कंटेंट को बिना हॉरिज़ॉन्टल स्क्रॉलिंग के एक कॉलम में रीफ्लो होना चाहिए (1.4.10 Reflow), और कुछ भी कटा नहीं होना चाहिए।
यूज़ेबिलिटी और एक्सेसिबिलिटी ओवरलैप
"web usability accessibility" सर्च करने वाले लोग इन्हें साथ रखने में सही हैं। लगभग हर एक्सेसिबिलिटी फिक्स एक यूज़ेबिलिटी फिक्स है:
एक्सेसिबिलिटी फिक्स
यह और किसकी मदद करता है
मज़बूत कंट्रास्ट
धूप में फोन पर मौजूद कोई भी
दिखने वाले लेबल
जल्दी में फॉर्म भरने वाला कोई भी
कैप्शन
बिना आवाज़ के देखने वाले लोग
कीबोर्ड सपोर्ट
पावर यूज़र, खराब ट्रैकपैड वाले लोग
बड़े टैप टारगेट
मोबाइल पर हर कोई
साफ एरर मैसेज
टाइपो करने वाला हर कोई
ओवरले, स्टेटमेंट और कानून
ओवरले: एक-लाइन कंप्लायंस का वादा करने वाले विजेट आपका अंतर्निहित कोड नहीं बदलते। साइट को खुद ठीक करें।
एक्सेसिबिलिटी स्टेटमेंट: एक छोटा पेज पब्लिश करें जो बताए कि आप किस स्टैंडर्ड को टारगेट करते हैं, जानी हुई समस्याएं, और मदद या वैकल्पिक फॉर्मेट के लिए आपसे कैसे संपर्क करें।
कानूनी संदर्भ: ज़रूरतें देश के हिसाब से अलग होती हैं। European Accessibility Act जून 2025 से EU में कई प्रोडक्ट और सर्विसेज़ पर लागू होता है; अमेरिका में, ADA अक्सर वेबसाइटों पर लागू किया जाता है; पब्लिक सेक्टर बॉडी के अक्सर अपने खास नियम होते हैं। अपनी स्थिति के लिए कानूनी सलाह लें।
चेकलिस्ट
[ ] कंट्रास्ट: 4.5:1 टेक्स्ट, 3:1 बड़ा टेक्स्ट और UI हिस्से
[ ] जानकारी देने वाली इमेज पर ऑल्ट टेक्स्ट, डेकोरेटिव पर खाली ऑल्ट
[ ] हर इनपुट का एक दिखने वाला, लिंक किया गया लेबल है
[ ] दिखने वाले फोकस के साथ पूरी साइट कीबोर्ड से काम करती है
[ ] आइकन बटन के एक्सेसिबल नाम हैं
[ ] लॉजिकल हेडिंग और लैंडमार्क, पेज की भाषा सेट
[ ] टैप टारगेट कम से कम 24 गुणा 24 CSS पिक्सेल
[ ] वीडियो पर कैप्शन, मोशन पर पॉज़ कंट्रोल
[ ] 400% ज़ूम पर रीफ्लो होता है
[ ] एक्सेसिबिलिटी स्टेटमेंट पब्लिश किया गया
एक्सेसिबिलिटी सर्च को भी सपोर्ट करती है: हेडिंग, ऑल्ट टेक्स्ट और वर्णनात्मक लिंक ऑन-पेज SEO की बुनियादी बातें भी हैं, जो हमारी ऑन-पेज SEO चेकलिस्ट में कवर की गई हैं।
We.Inc साइट्स को स्टैंडर्ड HTML, CSS और React कोड के रूप में जनरेट करता है जिसे आप सीधे एडिट कर सकते हैं, इसलिए आप खुद लेबल, ऑल्ट टेक्स्ट और कंट्रास्ट ठीक कर सकते हैं या चैट में बदलाव मांग सकते हैं। आप जो भी पब्लिश करें, हमेशा ऊपर दी गई मैनुअल जांच चलाएं।