किसी विज़िटर का इंटरनेट आपका फ़ॉर्म लोड होते समय कट जाता है। कोई Chrome एक्सटेंशन आपकी JavaScript तोड़ देता है। कोई पुराना ब्राउज़र आपकी इस्तेमाल की गई JavaScript सपोर्ट नहीं करता। उनका स्क्रीन रीडर आपके फ़ॉर्म में नहीं चल पाता क्योंकि लेबल CSS से छिपे हैं।
फ़ॉर्म अहम रास्ते हैं। यूज़र को उन्हें सबमिट करना होता है। फ़ॉर्म यूं ही टूट नहीं सकता। प्रोग्रेसिव एन्हांसमेंट वह सिद्धांत है जिसमें ऐसे फ़ॉर्म बनाए जाते हैं जो हर जगह चलें, और फिर उन ब्राउज़र के लिए सुधार जोड़े जाते हैं जो उन्हें संभाल सकते हैं।
इस लेख में बताया गया है कि ऐसे फ़ॉर्म कैसे बनाएं जो धीरे-धीरे नीचे आएं, JavaScript के बिना चलें और सबके लिए एक्सेसिबल रहें।
प्रोग्रेसिव एन्हांसमेंट क्या है?
प्रोग्रेसिव एन्हांसमेंट का मतलब है एक बुनियादी, चलने वाले फ़ॉर्म से शुरू करना जो सबसे पुराने ब्राउज़र में और JavaScript के बिना चले, और फिर आधुनिक ब्राउज़र के लिए उसके ऊपर सुधार जोड़ना। परत 1 (HTML) इनपुट फ़ील्ड, लेबल और सबमिट बटन वाला बुनियादी फ़ॉर्म देती है, जिसे JavaScript नहीं चाहिए और जो हर जगह चलता है। परत 2 (CSS) फ़ॉर्म को रंग, स्पेसिंग और लेआउट से सजाती है, इसलिए CSS लोड न हो तो भी फ़ॉर्म चलता है, बस खराब दिखता है। परत 3 (JavaScript) रीयल-टाइम वैलिडेशन, स्मूद एनिमेशन और AJAX सबमिशन जोड़ती है, इसलिए JavaScript फ़ेल हो तो भी फ़ॉर्म चलता है और पारंपरिक तरीके से सबमिट होता है। अगर कोई भी परत फ़ेल हो, तो यूज़र को फिर भी चलने वाला फ़ॉर्म मिलता है। यही मज़बूती है।
आधार: HTML जो चलता है
सही लेबल, फ़ील्डसेट और लेजेंड एलिमेंट के साथ सिमेंटिक HTML से शुरू करें। बुनियादी फ़ॉर्म ऐसा दिखता है <form action="/submit" method="POST"> <label for="email">Email</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form>। यह फ़ॉर्म JavaScript के बिना, CSS के बिना, पुराने ब्राउज़र में, स्क्रीन रीडर के साथ और कीबोर्ड नेविगेशन के साथ चलता है। यही आपका आधार है। DOM से एलिमेंट हटाकर उनकी जगह JavaScript से बने एलिमेंट कभी न रखें, क्योंकि JavaScript फ़ेल हुई तो फ़ॉर्म टूट जाता है। सिमेंटिक HTML बनाए रखें।
CSS के साथ आसानी से नीचे आना
HTML के ऊपर CSS के सुधार जोड़ें। फ़ॉर्म को अच्छे से सजाएं। पर अगर CSS फ़ेल हो, तब भी फ़ॉर्म चलना चाहिए।
CSS से लेबल छिपाकर प्लेसहोल्डर पर निर्भर न रहें, क्योंकि कभी-कभी CSS लोड नहीं होती और स्क्रीन रीडर को HTML में लेबल चाहिए। ज़रूरी फ़ील्ड के संकेत CSS से न छिपाएं, क्योंकि अगर आपका कस्टम "ज़रूरी तारा" लोड न हो, तो यूज़र नहीं बता सकते कि कौन से फ़ील्ड ज़रूरी हैं। इसके बजाय HTML की required एट्रिब्यूट इस्तेमाल करें। label { display: none; } और input::placeholder { content: 'Email'; } से लेबल को देखने में छिपाकर प्लेसहोल्डर दिखाने से बचें। इसके बजाय लेबल को HTML में रखें और label { font-weight: bold; color: #333; } से जैसे चाहें सजाएं।
JavaScript के सुधार जो नीचे आ सकें
JavaScript के सुधार जोड़ें, पर तभी जब फ़ॉर्म पहले से चलता हो। फ़ीचर डिटेक्शन से जांचें कि ब्राउज़र वह सपोर्ट करता है जो आपको चाहिए, जैसे if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }। मत मानें कि फ़ीचर मौजूद हैं। मानें कि शायद न हों। पहले पहचानें।
फ़ॉलबैक के साथ रीयल-टाइम वैलिडेशन
आधार के रूप में HTML वैलिडेशन इस्तेमाल करें, जैसे <input type="email" required>, ताकि ब्राउज़र सबमिट पर जांचे। फिर JavaScript वैलिडेशन जोड़ें जो रीयल-टाइम में चले, जैसे input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });। यह यूज़र के टाइप करते समय गलतियां दिखाता है, और अगर JavaScript फ़ेल हो, तो ब्राउज़र का अपना वैलिडेशन फिर भी चलता है। यूज़र को रीयल-टाइम फ़ीडबैक का फ़ायदा मिलता है, और JavaScript फ़ेल हो तो उन्हें ब्राउज़र से सबमिट के समय फ़ीडबैक मिलता है। किसी भी हाल में वैलिडेशन होता है।
पारंपरिक फ़ॉलबैक के साथ AJAX सबमिशन
पहले पारंपरिक फ़ॉर्म बनाएं जो सर्वर-साइड सबमिट हो, फिर सबमिट को रोककर AJAX इस्तेमाल करें, जैसे form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });। अगर JavaScript फ़ेल हो, तो preventDefault कभी चलता ही नहीं, फ़ॉर्म पारंपरिक तरीके से सबमिट होता है, और यूज़र को स्मूद UX की जगह पेज रीलोड मिलता है। पर उन्हें चलने वाला फ़ॉर्म मिल जाता है।
प्रोग्रेसिव एन्हांसमेंट के रूप में एक्सेसिबिलिटी
एक्सेसिबिलिटी कोई अतिरिक्त सुविधा नहीं है। वह आधार है। एक्सेसिबल फ़ॉर्म बनाएं।
लेबल को for और id एट्रिब्यूट से इनपुट के साथ जोड़ना ज़रूरी है। data-एट्रिब्यूट से नहीं, aria-label से नहीं जो छूट सकते हैं। सही लेबल।
<label for="email">Email</label>
<input id="email">
सिमेंटिक HTML एलिमेंट (fieldset, legend, button, input) इस्तेमाल करें। बटन जैसे सजाए गए div नहीं।
कीबोर्ड नेविगेशन चलना चाहिए। सभी फ़ील्ड में Tab से जाएं। पीछे जाने के लिए Shift+Tab। सबमिट के लिए Enter। चेकबॉक्स बदलने के लिए Space। सिमेंटिक HTML के साथ यह डिफ़ॉल्ट रूप से चलता है। इसे JavaScript से न तोड़ें।
बुनियाद काम करने लगे, तो स्क्रीन रीडर के लिए ARIA लेबल जोड़ें। कीबोर्ड यूज़र के लिए फ़ोकस इंडिकेटर जोड़ें। पर ये एक्सेसिबल HTML के ऊपर के सुधार हैं।
मज़बूती के लिए टेस्टिंग
अपना फ़ॉर्म JavaScript बंद करके टेस्ट करें। अपने ब्राउज़र में JavaScript बंद करें और सबमिट करके देखें। अगर फ़ॉर्म टूट जाए, तो वह मज़बूत नहीं है।
धीमे नेटवर्क के साथ टेस्ट करें। अपना कनेक्शन 2G तक धीमा करें। अगर फ़ॉर्म लोड होने में बहुत समय ले, तो खराब इंटरनेट वाले विज़िटर चले जाएंगे।
पुराने ब्राउज़र के साथ टेस्ट करें। IE 11 में टेस्ट करने के लिए (अगर अब भी ज़रूरत हो) कोई क्रॉस-ब्राउज़र टेस्टिंग सर्विस इस्तेमाल करें। देखें कि कौन से फ़ीचर सपोर्ट नहीं होते।
स्क्रीन रीडर के साथ टेस्ट करें। NVDA (Windows) या VoiceOver (Mac) इस्तेमाल करें। सुनें कि फ़ॉर्म कैसे बोला जाता है। अगर स्क्रीन रीडर के लिए उसका कोई मतलब न निकले, तो ठीक करें।
सिर्फ़ कीबोर्ड से टेस्ट करें। माउस इस्तेमाल न करें। क्या आप फ़ॉर्म में घूम पा रहे हैं? क्या आप उसे सबमिट कर पा रहे हैं?
फ़ीचर डिटेक्शन, ब्राउज़र डिटेक्शन नहीं
खास ब्राउज़र न जांचें। ब्राउज़र डिटेक्शन के बजाय फ़ीचर जांचें। जैसे if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ } न लिखें। इसके बजाय फ़ीचर डिटेक्शन इस्तेमाल करें, जैसे if (window._blocked_) { /* use _blocked_ */ }। फ़ीचर डिटेक्शन ज़्यादा भरोसेमंद है, क्योंकि जो ब्राउज़र अपडेट _blocked_ सपोर्ट जोड़ता है, वह आपके कोड के साथ चलेगा, पर ब्राउज़र डिटेक्शन के साथ नहीं।
मज़बूत फ़ॉर्म का सिद्धांत
मज़बूत फ़ॉर्म प्रोग्रेसिव एन्हांसमेंट के सिद्धांतों पर बनते हैं: वे JavaScript के बिना चलते हैं, लेबल और सिमेंटिक HTML अपनी जगह रखते हैं, और JavaScript के सुधार वैकल्पिक होते हैं, ताकि पुराने ब्राउज़र को चलने वाला फ़ॉर्म मिले और आधुनिक ब्राउज़र को स्मूद इंटरैक्शन।
WEMASY के प्लान और प्राइसिंग देखें।