ऐसे एक्सेसिबल फ़ॉर्म कैसे डिज़ाइन करें जो सबके लिए काम करें

अमेरिका के हर 4 में से 1 वयस्क किसी न किसी तरह की विकलांगता के साथ जीता है। अगर आपका फ़ॉर्म एक्सेसिबल नहीं है, तो आप अपने संभावित दर्शकों के एक चौथाई हिस्से को सबमिट बटन तक पहुंचने से पहले ही काट देते हैं।

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

साफ़ लेबल। कीबोर्ड नेविगेशन। ऐसे एरर मैसेज जिन्हें स्क्रीन रीडर बोलकर बता सके। इतना कंट्रास्ट कि कम दिखने वाले यूज़र टेक्स्ट पढ़ सकें। ये अतिरिक्त फ़ीचर नहीं हैं। ये वह न्यूनतम स्तर हैं जो WCAG 2.1 AA और Americans with Disabilities Act अप्रैल 2026 से मांगते हैं।

एक्सेसिबल फ़ॉर्म अलग क्यों होते हैं

कोई भी कॉन्टैक्ट फ़ॉर्म उठाइए, आपको वही गलतियां मिलेंगी। प्लेसहोल्डर वाला टेक्स्ट फ़ील्ड, पर कोई दिखने वाला लेबल नहीं। चेकबॉक्स, जिसके बारे में कुछ नहीं बताया गया कि वह क्या करता है। लाल टेक्स्ट में एरर मैसेज, जिसे स्क्रीन रीडर बोल नहीं सकता।

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

इससे फ़ॉर्म बनाने का तरीका बदल जाता है। लेबल के बिना प्लेसहोल्डर बेकार हैं। टेक्स्ट के बिना लाल तारे बेकार हैं। माउस वालों के लिए ठीक चलने वाला विज़ुअल लेआउट कीबोर्ड वालों को फंसा सकता है। एक्सेसिबल फ़ॉर्म बनाना ज़्यादा मुश्किल नहीं है। बस माउस से आगे इंटरैक्शन के तरीकों के बारे में सोचना पड़ता है।

यह क्यों मायने रखता है

कानूनी समय सीमा। ADA का Title II 24 अप्रैल 2026 तक WCAG 2.1 AA मांगता है। अनुपालन न करना अब जोखिम नहीं है। यह अभी की देनदारी है।

बिज़नेस पर असर। विकलांगता वाले विज़िटर असली पैसा खर्च करते हैं। एक्सेसिबल फ़ॉर्म सबका कम्प्लीशन रेट बढ़ाता है, क्योंकि साफ़ लेबल सिर्फ़ विकलांग लोगों की नहीं, सभी यूज़र की मदद करते हैं। सुबह 6 बजे मोबाइल पर जल्दी-जल्दी स्कैन करने वाले व्यस्त यूज़र। कीबोर्ड से नेविगेट करने वाले पावर यूज़र। सब।

SEO का फ़ायदा। सर्च इंजन उन पेज को पसंद करते हैं जहां इंटरैक्टिव एलिमेंट के लेबल हों और कीबोर्ड से चलाए जा सकें। एक्सेसिबल फ़ॉर्म ज़्यादा ऊपर रैंक करते हैं।

एक्सेसिबल फ़ॉर्म को असल में क्या चाहिए

हर फ़ील्ड पर दिखने वाले लेबल

हर इनपुट फ़ील्ड को लेबल चाहिए। ऐसा प्लेसहोल्डर नहीं जो गायब हो जाए। title एट्रिब्यूट नहीं। पेज पर ठीक वहीं बैठा असली लेबल।

स्क्रीन रीडर पहले लेबल पढ़ता है, फिर फ़ील्ड का प्रकार बताता है। "नाम, टेक्स्ट इनपुट।" यूज़र को पता चल जाता है कि क्या करना है। लेबल के बिना सिर्फ़ "टेक्स्ट इनपुट" सुनाई देता है और कुछ नहीं। यूज़र को अंदाज़ा नहीं होता कि क्या भरना है।

देखने वाले यूज़र के लिए लेबल वैसे ही काम करते हैं जैसे कागज़ पर। वे बताते हैं कि हर खाली जगह में क्या जाएगा। वे क्लिक करने लायक जगह भी बढ़ाते हैं। लेबल को इनपुट से for एट्रिब्यूट से जोड़ दें, तो यूज़र लेबल या फ़ील्ड, दोनों में से किसी पर भी क्लिक करके उसे फ़ोकस कर सकते हैं। मोबाइल पर यह बड़ा क्लिक टारगेट मायने रखता है।

सिर्फ़ कीबोर्ड से काम करना

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

इसे टेस्ट करें। माउस निकाल दें। सिर्फ़ Tab की, ऐरो की और Enter से फ़ॉर्म में घूमें। आप हाथ हिलाए बिना हर फ़ील्ड तक पहुंच पाएं, हर विकल्प चुन पाएं और सबमिट दबा पाएं।

फ़ोकस आउटलाइन हर स्टेप पर दिखनी चाहिए। अदृश्य फ़ोकस स्टेट नहीं। यूज़र को पता होना चाहिए कि वह फ़ॉर्म में कहां है। और टैब का क्रम मायने रखता है। फ़ील्ड बाएं से दाएं, ऊपर से नीचे चलने चाहिए, जैसे फ़ॉर्म पढ़ा जाता है। अगर आपका लेआउट इधर-उधर कूदता है या फ़ील्ड छिपाता है, तो टैब क्रम बिगड़ जाता है और कीबोर्ड यूज़र फंस जाते हैं।

ऐसे एरर मैसेज जो खुद सुनाई दें

फ़ॉर्म के ऊपर लाल टेक्स्ट स्क्रीन रीडर यूज़र के लिए कुछ मायने नहीं रखता। वे सबमिट करते हैं, चुप्पी सुनते हैं और दोबारा कोशिश करते हैं। फिर हार मान लेते हैं।

एरर को उस ख़ास फ़ील्ड से जोड़ें जहां वह हुई। जब स्क्रीन रीडर यूज़र उस फ़ील्ड पर टैब करता है, तो एरर बोलकर सुनाई जाती है। और एरर मैसेज में लिखें कि क्या ठीक करना है, सिर्फ़ "अमान्य" नहीं। "अमान्य एंट्री" की जगह लिखें "ईमेल में @ चिह्न होना चाहिए।"

एरर मैसेज को फ़ील्ड से जोड़ने के लिए aria-describedby जैसे ARIA एट्रिब्यूट इस्तेमाल करें। जब फ़ोकस फ़ील्ड पर आता है, तो स्क्रीन रीडर एरर अपने आप सुना देता है। कोई अंदाज़ा नहीं।

कम दिखने वाले यूज़र के लिए टेक्स्ट पढ़ने लायक बनाएं

सफ़ेद बैकग्राउंड पर हल्के ग्रे लेबल कम दिखने वाले व्यक्ति को दिखते ही नहीं। WCAG 2.1 AA सामान्य टेक्स्ट के लिए 4.5:1 कंट्रास्ट रेशियो मांगता है। हल्के बैकग्राउंड पर गहरा टेक्स्ट, या गहरे बैकग्राउंड पर हल्का टेक्स्ट। कंट्रास्ट साफ़ दिखना चाहिए।

बड़े टेक्स्ट (18 पॉइंट+) के लिए 3:1 कंट्रास्ट चल सकता है। बाकी सब को 4.5:1 चाहिए। कंट्रास्ट चेकर टूल में 5 सेकंड लगते हैं। लॉन्च से पहले हर लेबल, बटन और एरर मैसेज को उसमें डालकर देखें।

ज़रूरी फ़ील्ड बताने के लिए सिर्फ़ रंग का इस्तेमाल कभी न करें। लाल तारे का रंग-अंध यूज़र के लिए कोई मतलब नहीं। फ़ील्ड के पास "ज़रूरी" शब्द जोड़ें। स्क्रीन रीडर उसे बोलते हैं। देखने वाले यूज़र उसे देखते हैं। टेक्स्ट सबको समझ आता है।

एक्सेसिबल फ़ॉर्म के लिए फ़ील्ड-दर-फ़ील्ड सलाह

टेक्स्ट इनपुट और टेक्स्ट एरिया

नाम, ईमेल, फ़ोन: सबको सीधे ऊपर या बगल में लेबल चाहिए। <label> HTML एलिमेंट इस्तेमाल करें, जिसका for एट्रिब्यूट इनपुट की id से मेल खाए।

अगर फ़ील्ड किसी ख़ास फ़ॉर्मेट की उम्मीद करता है, तो बता दें। "फ़ॉर्मेट: 555-123-4567" सबकी मदद करता है, ख़ासकर उनकी जो साफ़ निर्देश मिलने पर बेहतर काम करते हैं।

टेक्स्ट एरिया ऐसे दिखने चाहिए कि वे लंबे जवाब लेंगे। "मैसेज" लेबल वाला एक लाइन का बॉक्स छोटे जवाब जैसा लगता है। लंबा बॉक्स कहता है "मुझे और बताओ।" साइज़ मायने रखता है।

सेलेक्ट ड्रॉपडाउन और रेडियो बटन

हर ड्रॉपडाउन को लेबल चाहिए। संदर्भ के बिना "कोई विकल्प चुनें" और "हां/नहीं" बेकार हैं। स्क्रीन रीडर यूज़र को अंदाज़ा नहीं होता कि आप कौन-सा सवाल पूछ रहे हैं। ड्रॉपडाउन के लेबल में साफ़ लिखें कि यह किस चीज़ का चुनाव है।

रेडियो बटन को लेजेंड वाले फ़ील्डसेट में रखना चाहिए। लेजेंड सवाल पूछता है। विकल्प उसका जवाब देते हैं। "आपके इस्तेमाल का तरीका सबसे अच्छा कौन-सा है?" और विकल्प जैसे "ई-कॉमर्स", "मीडिया", "SaaS"। स्क्रीन रीडर पहले लेजेंड बोलता है, फिर हर विकल्प। यूज़र समझ जाता है कि वह एक समूह में से चुन रहा है और उस समूह का मकसद क्या है।

चेकबॉक्स

चेकबॉक्स का लेबल स्वाभाविक पढ़ना चाहिए। "मैं सेवा की शर्तों से सहमत हूं" लेबल हो, और चेकबॉक्स उसके बगल में। टेक्स्ट के बिना सूना चेकबॉक्स नहीं, जिससे यूज़र को अंदाज़ा लगाना पड़े कि वह क्या करता है।

अगर कोई सहायक जानकारी है, जैसे पूरी शर्तों का लिंक, तो उसे चेकबॉक्स के ठीक बगल में रखें। छिपाएं नहीं। चेकबॉक्स टिक करने से पहले यूज़र को पता होना चाहिए कि वे किस बात पर सहमत हो रहे हैं।

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

बटन

बटन का टेक्स्ट बताए कि क्या होगा। "सबमिट।" "भेजें।" "ठीक है" कन्फ़र्मेशन के लिए चलता है। "जाओ" नहीं चलता। कोई सामान्य लेबल नहीं।

अगर आपके पास कई बटन हैं, तो उन्हें अलग-अलग रखें। "कैंसल" और "सबमिट" साफ़ हैं। दो बटन जिन दोनों पर "अगला" लिखा है, साफ़ नहीं हैं: स्क्रीन रीडर यूज़र को "अगला बटन, अगला बटन" सुनाई देता है और उसे पता नहीं चलता कि कौन-सा कौन-सा है।

आपकी साइट पर फ़ॉर्म कहां जाते हैं

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

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

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

आम गलतियां

लेबल की जगह प्लेसहोल्डर टेक्स्ट पर निर्भर रहना

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

असली लेबल इस्तेमाल करें। अगर आप फ़ॉर्मेट के संकेत के लिए प्लेसहोल्डर चाहते हैं, तो ठीक है। पर उसे खुद लेबल की तरह कभी इस्तेमाल न करें।

ज़रूरी फ़ील्ड के लिए सिर्फ़ रंग का इस्तेमाल

लाल तारा रंग-अंध यूज़र को नहीं दिखता। आइकन स्क्रीन रीडर को नहीं दिखता। टेक्स्ट में "ज़रूरी" शब्द इस्तेमाल करें। टेक्स्ट सबको समझ आता है।

हाथ से टेस्टिंग छोड़ देना

कागज़ पर सही HTML ढांचे का मतलब यह नहीं कि आपका फ़ॉर्म असल में चलता है। लेबल इनपुट से बहुत दूर हो सकते हैं। फ़ोकस आउटलाइन अदृश्य हो सकती हैं। एरर मैसेज सुनाई दे सकते हैं पर फ़ोकस को फ़ील्ड पर नहीं ले जाते।

कीबोर्ड से टेस्ट करें। स्क्रीन रीडर से टेस्ट करें। NVDA मुफ़्त है। JAWS मानक है। iOS पर टेस्ट करते हैं तो VoiceOver। ऑटोमैटिक चेकर साफ़ दिखने वाली समस्याएं पकड़ते हैं। असली टेस्टिंग बाकी पकड़ती है।

टाइम लिमिट जोड़ना

हाथ कांपने वाला यूज़र धीरे टाइप करता है। स्क्रीन रीडर यूज़र को सारे लेबल और निर्देश सुनने के लिए समय चाहिए। 5 मिनट की सीमा उन यूज़र को फंसा देती है जिन्हें 10 मिनट चाहिए।

हो सके तो टाइम लिमिट हटा दें। अगर रखनी ही है, तो सेशन खत्म होने से पहले यूज़र को दो बार समय बढ़ाने दें।

WEMASY में एक्सेसिबल फ़ॉर्म

WEMASY में फ़ॉर्म टूल है, जिससे आप अपनी वेबसाइट पर फ़ॉर्म बना सकते हैं।

फ़ॉर्म बनाते समय ऊपर बताई बातें ध्यान में रखें।

हमारी फ़ॉर्म की पूरी गाइड में और जानें, या देखें हर WEMASY प्लान में क्या शामिल है।

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