Web Accessibility क्या है? WCAG और सबके लिए डिज़ाइन समझें
Web accessibility का मतलब है वेबसाइटें और ऐप्स इस तरह बनाना कि विकलांग लोग उन्हें इस्तेमाल कर सकें: चाहे वे नेत्रहीन हों और screen reader इस्तेमाल करते हों, माउस न चला सकते हों, कमज़ोर नज़र या रंग पहचानने में दिक्कत हो, बधिर हों, या संज्ञानात्मक या सीखने संबंधी विकलांगता हो। व्यवहार में इसका मतलब है चित्रों के लिए text विकल्प, पर्याप्त रंग कंट्रास्ट, ठीक से लेबल वाले फ़ॉर्म, और सब कुछ सिर्फ़ keyboard से चलना। इसका अंतरराष्ट्रीय मानक WCAG है, W3C का Web Content Accessibility Guidelines।
Accessibility को अक्सर a11y कहा जाता है: "a", फिर 11 अक्षर, फिर "y"।
AI से बनाते समय accessibility क्यों मायने रखती है
AI builders ऐसी ऐप्स बनाने में अच्छे हैं जो देखने में सही लगती हैं। Accessibility ज़्यादातर वह है जो स्क्रीनशॉट में नहीं दिखता: क्या बटन सचमुच बटन है, क्या input का ऐसा लेबल है जिसे screen reader बोल सके, क्या Tab key से menu तक पहुँचा जा सकता है।
इसीलिए यह पूछना ज़रूरी है:
- इसे चूकना आसान है। कस्टम स्टाइल वाला dropdown बिल्कुल सुंदर दिख सकता है और माउस के बिना इस्तेमाल न हो सकने वाला हो सकता है। परखे बिना आपको पता नहीं चलेगा।
- शुरू में सही करना सस्ता है। पहली प्रॉम्प्ट से accessible components माँगने में लगभग कुछ नहीं लगता। बनी हुई ऐप में बाद में जोड़ना हर स्क्रीन को छूना होता है।
- यह सबके काम आता है। Captions शोरगुल वाली जगहों पर मदद करते हैं, अच्छा कंट्रास्ट धूप में फ़ोन पर मदद करता है, और साफ़ लेबल हर किसी को फ़ॉर्म जल्दी भरने में मदद करते हैं।
- यह SEO से भी जुड़ा है। सही headings, वर्णनात्मक links और alt text search engines को भी आपके पेज समझने में मदद करते हैं; देखें AI से बनी वेबसाइटों के लिए SEO।
- यह ज़रूरी हो सकता है। आप कहाँ काम करते हैं और किसकी सेवा करते हैं, इसके आधार पर accessibility कानूनी दायित्व हो सकती है।
एक रोज़मर्रा की मिसाल
किसी इमारत के प्रवेश द्वार के बारे में सोचिए।
सीढ़ियाँ कई लोगों के लिए ठीक हैं। रैम्प व्हीलचेयर इस्तेमाल करने वालों के लिए काम आता है, और उन माता-पिता के लिए भी जो प्रैम ले जाते हैं, डिलीवरी कर्मचारियों के लिए जो ट्रॉली लाते हैं, और यात्रियों के लिए जो सूटकेस खींचते हैं। स्वचालित दरवाज़े, साफ़ संकेत, लिफ़्ट बटनों पर ब्रेल और अच्छी रोशनी, हर एक किसी की बाधा हटाती है।
वेब accessibility डिजिटल जगह के लिए यही विचार है: आपकी ऐप के रैम्प, संकेत और हैंडरेल। और इमारत की तरह, नक्शे में रैम्प शामिल करना कंक्रीट सूखने के बाद उसे जोड़ने से कहीं आसान है।
WCAG एक नज़र में
WCAG, W3C के Web Accessibility Initiative द्वारा प्रकाशित होता है। वर्तमान संस्करण WCAG 2.2 है, जो अक्टूबर 2023 में पहली बार आया। यह पिछली संगत है: जो सामग्री WCAG 2.2 को पूरा करती है, वह 2.1 और 2.0 को भी पूरा करती है, और W3C नवीनतम संस्करण इस्तेमाल करने को प्रोत्साहित करता है। WCAG 2.2 को अंतरराष्ट्रीय मानक ISO/IEC 40500:2025 के रूप में भी स्वीकृत किया गया है। WCAG 3 एक बिल्कुल अलग मसौदा है जो अभी विकसित हो रहा है, पूरा मानक नहीं।
WCAG चार सिद्धांतों के अंतर्गत संगठित है, जिन्हें अक्सर POUR के रूप में याद किया जाता है:
| सिद्धांत | मतलब | उदाहरण |
|---|---|---|
| Perceivable (अनुभव योग्य) | लोग उन इंद्रियों से सामग्री समझ सकें जिनका वे इस्तेमाल करते हैं | चित्रों के लिए alt text, वीडियो के लिए captions, पर्याप्त कंट्रास्ट |
| Operable (संचालन योग्य) | लोग controls चला सकें और नेविगेट कर सकें | Keyboard पहुँच, बिना बढ़ाए जा सकने वाली समय सीमा नहीं, दिखने वाला focus |
| Understandable (समझ योग्य) | सामग्री और व्यवहार समझ में आएँ | साफ़ लेबल, मददगार error messages, एक-सा नेविगेशन |
| Robust (मज़बूत) | कई browsers और assistive technologies के साथ काम करे | सही HTML elements, controls के सही नाम और roles |
हर दिशानिर्देश में तीन स्तरों पर परखे जा सकने वाले success criteria हैं:
- Level A — न्यूनतम। इनमें विफल होने से कुछ लोग पूरी तरह रुक जाते हैं।
- Level AA — मानक लक्ष्य, और वह स्तर जिसका अधिकांश कानून और नीतियाँ हवाला देते हैं।
- Level AAA — सबसे ऊँचा स्तर। कुछ जगहों पर लक्ष्य रखना उपयोगी है, पर W3C पूरी साइटों के लिए इसे ज़रूरी बनाने की सिफ़ारिश नहीं करता, क्योंकि कुछ सामग्री इस पर खरी नहीं उतर सकती।
WCAG 2.2 ने 2.1 में नौ success criteria जोड़े, जिनमें Target Size (Minimum) शामिल है, जो level AA पर है: क्लिक योग्य लक्ष्य आमतौर पर कम से कम 24 गुणा 24 CSS pixels के होने चाहिए, कुछ अपवादों के साथ। और Accessible Authentication (Minimum) भी, जो लॉगिन के उन चरणों को सीमित करता है जो याददाश्त या पहेलियों पर निर्भर हैं, जैसे पासवर्ड दोबारा टाइप करना, जबकि उसे paste करने की अनुमति न हो। इसने पुराना "Parsing" criterion भी हटा दिया, क्योंकि वह अप्रचलित हो गया था।
एक उदाहरण: साइन-अप फ़ॉर्म
यह एक साइन-अप फ़ॉर्म है जो AI बना सकता है, और accessibility जाँच में क्या मिलता है:
| समस्या | किसे प्रभावित करती है | समाधान |
|---|---|---|
| Inputs में लेबल की जगह placeholder टेक्स्ट ("Email") है | Screen reader यूज़र्स; और कोई भी जो टाइप शुरू करने के बाद भूल जाता है कि फ़ील्ड क्या था | हर input से जुड़ा दिखने वाला <label> |
| सफ़ेद पर हल्का स्लेटी टेक्स्ट, 4.5:1 कंट्रास्ट से काफ़ी नीचे | कमज़ोर नज़र वाले लोग, बाहर धूप में कोई भी | गहरा टेक्स्ट जो 4.5:1 कंट्रास्ट अनुपात पूरा करे |
| Errors केवल लाल border से दिखते हैं | रंग-अंधत्व वाले यूज़र्स, screen reader यूज़र्स | फ़ील्ड के पास टेक्स्ट संदेश, जो screen readers को भी सुनाई दे |
"Sign up" एक styled <div> है, <button> नहीं | Keyboard और screen reader यूज़र्स उसे सक्रिय नहीं कर सकते | असली <button> element इस्तेमाल करें |
| Fields में Tab करते समय कोई दिखने वाली outline नहीं | Keyboard यूज़र्स भूल जाते हैं कि कहाँ हैं | साफ़ focus style |
| Logo image में alt text नहीं | Screen reader यूज़र्स केवल फ़ाइल का नाम सुनते हैं | "Acme Bookings" जैसा alt text |
इनमें से कोई भी सुधार फ़ॉर्म के दिखने को ज़्यादा नहीं बदलता। पर ये सब बदलते हैं कि कुछ लोग उसे बिल्कुल इस्तेमाल कर पाते हैं या नहीं।
मुख्य शब्द
| शब्द | मतलब |
|---|---|
| Screen reader | ऐसा सॉफ़्टवेयर जो स्क्रीन को ज़ोर से या braille display पर पढ़ता है, जैसे VoiceOver, NVDA या JAWS। |
| Alt text | चित्र का टेक्स्ट विवरण, जिसे screen readers पढ़ते हैं। सजावटी चित्रों के लिए खाली alt text दिया जाता है ताकि वे छोड़ दिए जाएँ। |
| Contrast ratio | टेक्स्ट और पृष्ठभूमि के रंग कितने अलग हैं, 1:1 से 21:1 तक। |
| Keyboard navigation | माउस की जगह Tab, Enter, Space और तीर keys से साइट चलाना। |
| Focus indicator | दिखने वाली outline जो बताती है कि keyboard किस एलिमेंट पर है। |
| Semantic HTML | काम के लिए सही element इस्तेमाल करना, जैसे <button>, <nav>, <h2>, ताकि browsers और assistive tech पेज को समझें। |
| ARIA | कस्टम controls का वर्णन करने वाले अतिरिक्त attributes, assistive technology के लिए। कम इस्तेमाल करें; native HTML elements पहले आते हैं। |
| Assistive technology | कंप्यूटर तक पहुँचने के लिए लोगों के उपकरण, screen readers से लेकर switch devices और voice control तक। |
आम गलतफ़हमियाँ
- "Accessibility सिर्फ़ नेत्रहीन यूज़र्स के लिए मायने रखती है।" यह दृश्य, मोटर, श्रवण, बोलने और संज्ञानात्मक विकलांगताओं को कवर करती है, और अस्थायी स्थितियों को भी, जैसे टूटा हुआ हाथ।
- "Accessible साइटें सादी दिखती हैं।" Accessibility कुछ चीज़ों को सीमित करती है: कंट्रास्ट, focus styles, टेक्स्ट का आकार। पर अच्छी दिखने वाली accessible साइटें नियम हैं, अपवाद नहीं।
- "स्वचालित checker 100 दे रहा है, तो हम हो गए।" स्वचालित टूल केवल कुछ समस्याएँ पकड़ते हैं। क्या alt text सचमुच अर्थपूर्ण है, या कोई flow screen reader के साथ समझ में आता है, इसके लिए किसी इंसान को जाँचना होगा।
- "Overlay widget हमें compliant बना देगा।" ऊपर से लगे toolbars आपके कोड में गायब लेबल या टूटी keyboard पहुँच ठीक नहीं कर सकते। स्रोत ठीक करें।
- "हमारे यहाँ कोई विकलांग यूज़र नहीं है।" शायद आपको पता ही न हो। कई विकलांगताएँ दिखती नहीं हैं, और जो लोग बाधा से टकराते हैं वे अक्सर बस चले जाते हैं।
AI builder से क्या माँगें
- "इसे WCAG 2.2 level AA पर बनाएँ।"
- "Semantic HTML इस्तेमाल करें: असली buttons, links, क्रम में headings, और हर form field के लिए labels।"
- "सुनिश्चित करें कि हर interactive element केवल keyboard से काम करे और उसका दिखने वाला focus style हो।"
- "सभी टेक्स्ट और icon रंगों का कंट्रास्ट जाँचें: सामान्य टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट और icons के लिए 3:1।"
- "सूचनात्मक चित्रों पर सार्थक alt text और सजावटी चित्रों पर खाली alt text दें।"
- "Form errors टेक्स्ट में दिखाएँ, फ़ील्ड से जुड़े हुए, केवल रंग से नहीं।"
- "Animations के लिए यूज़र की reduced-motion सेटिंग का सम्मान करें।"
- "एक स्वचालित accessibility जाँच चलाएँ और बताएँ कि वह क्या नहीं परख सकती, ताकि मैं उसे हाथ से जाँच सकूँ।"
फिर खुद जाँचें: माउस हटाकर केवल Tab, Shift+Tab, Enter और Space से अपना मुख्य flow पूरा करने की कोशिश करें। अपने फ़ोन के built-in screen reader से मुख्य पेज पढ़वाएँ। ब्राउज़र को 200% तक ज़ूम करें और देखें कि कुछ टूटता तो नहीं।
Mythex में accessibility
Mythex में कोई समर्पित accessibility checker नहीं है, इसलिए accessibility को अपनी प्रॉम्प्ट और परीक्षण का हिस्सा मानें। पहली प्रॉम्प्ट से WCAG 2.2 AA माँगें, Preview में keyboard से परिणाम जाँचें, और publish से पहले एजेंट से /test चलवाएँ ताकि वह मुख्य flows पर क्लिक करके देखे; देखें App Testing। SEO रेसिपी भी semantic headings और सार्थक alt text माँगती है, जो दोनों लक्ष्यों की सेवा करते हैं।
व्यावहारिक चेकलिस्ट के लिए देखें अपनी वेबसाइट को accessible कैसे बनाएं। डिज़ाइन के लिए AI से अच्छी दिखने वाली ऐप कैसे डिज़ाइन करें पढ़ें, और लॉन्च से पहले लॉन्च से पहले अपनी ऐप कैसे परखें। W3C की अपनी WCAG overview सबसे प्रामाणिक स्रोत है।
सवाल
सरल शब्दों में web accessibility क्या है?
Web accessibility का मतलब है वेबसाइटों और ऐप्स को इस तरह डिज़ाइन और बनाना कि विकलांग लोग उन्हें समझ, देख, नेविगेट और इस्तेमाल कर सकें। इसमें वे लोग शामिल हैं जो नेत्रहीन हैं और screen readers इस्तेमाल करते हैं, जो माउस नहीं चला सकते, जिनकी नज़र कमज़ोर है या रंग पहचानने में दिक्कत है, बधिर यूज़र्स, और संज्ञानात्मक विकलांगता वाले लोग।
WCAG क्या है?
WCAG (Web Content Accessibility Guidelines) web accessibility का अंतरराष्ट्रीय मानक है, जिसे W3C प्रकाशित करता है। वर्तमान संस्करण WCAG 2.2 है, जो अक्टूबर 2023 में पहली बार प्रकाशित हुआ। इसके success criteria A, AA और AAA स्तरों में बँटे हैं, और अधिकांश संगठन और कानून AA स्तर को लक्ष्य मानते हैं।
WCAG किस तरह का रंग कंट्रास्ट माँगता है?
AA स्तर पर, सामान्य टेक्स्ट को उसकी पृष्ठभूमि से कम से कम 4.5:1 का कंट्रास्ट अनुपात चाहिए, और बड़े टेक्स्ट (लगभग 18 point, या बोल्ड 14 point) को कम से कम 3:1। Icons और controls के दिखने वाले हिस्सों को अपने आसपास के रंग से कम से कम 3:1 चाहिए।
क्या web accessibility कानूनी ज़रूरत है?
कई जगहों पर, कई संगठनों के लिए, हाँ। कानून देश और क्षेत्र के अनुसार अलग हैं; उदाहरण के लिए, European Accessibility Act EU में कई उपभोक्ता digital उत्पादों और सेवाओं को कवर करता है। अपने लिए लागू नियम जाँचें, या किसी कानूनी सलाहकार से पूछें।
क्या accessibility overlay या widget मेरी साइट को compliant बना सकता है?
अकेले नहीं। Overlays आपकी साइट के ऊपर एक toolbar जोड़ते हैं, पर गहरी समस्याएँ, जैसे लेबल का गायब होना, keyboard नेविगेशन का काम न करना या अस्पष्ट संरचना, भरोसेमंद ढंग से ठीक नहीं कर सकते। भरोसेमंद तरीका है साइट का कोड और सामग्री ठीक करना।