फ़ॉर्म

फ़ॉर्म एक ऐसा एलिमेंट है जिसकी मदद से उपयोगकर्ता किसी फ़ील्ड या फ़ील्ड के ग्रुप में डेटा दे सकते हैं. Forms, एक फ़ील्ड जितना आसान या मुश्किल हो सकता है. इसमें हर पेज में कई फ़ील्ड होने वाले कई चरणों वाले फ़ॉर्म एलिमेंट होते हैं. साथ ही, इनपुट की पुष्टि करने में भी आसानी होती है. इसके अलावा, कभी-कभी कैप्चा भी काम करता है.

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

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

फ़ील्ड

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

डिफ़ॉल्ट सुझाव यह है कि ARIA के साथ कुछ कस्टम बनाने के बजाय मौजूदा एचटीएमएल पैटर्न का इस्तेमाल किया जाए, क्योंकि कुछ सुविधाएं और फ़ंक्शन, जैसे कि फ़ील्ड स्टेटस, प्रॉपर्टी, और वैल्यू मूल रूप से एचटीएमएल एलिमेंट में बनी होती हैं, जबकि आपको मैन्युअल रूप से कस्टम ARIA जोड़ना पड़ता है.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

जहां लागू हो, वहां सबसे ऐक्सेस किए जा सकने वाले फ़ॉर्म फ़ील्ड पैटर्न चुनने के अलावा, आपको अपनी फ़ील्ड में एचटीएमएल ऑटोकंप्लीट एट्रिब्यूट भी जोड़ने चाहिए. ऑटोकंप्लीट एट्रिब्यूट जोड़ने से, उपयोगकर्ता एजेंट और सहायक टेक्नोलॉजी (AT) के लिए, मकसद की परिभाषा या पहचान को बेहतर बनाया जा सकता है.

ऑटोकंप्लीट एट्रिब्यूट की मदद से उपयोगकर्ता, विज़ुअल प्रज़ेंटेशन को अपने हिसाब से बना सकते हैं. जैसे, जन्मदिन का ऑटोकंप्लीट एट्रिब्यूट (bday) के साथ फ़ील्ड में जन्मदिन का केक दिखाना. आम तौर पर, ऑटोकंप्लीट एट्रिब्यूट की मदद से फ़ॉर्म भरना आसान और तेज़ हो जाता है. यह उन लोगों के लिए खास तौर पर मददगार है जिन्हें सीखने-समझने और पढ़ने से जुड़ी समस्या है और जो ATs का इस्तेमाल करते हैं जैसे कि स्क्रीन रीडर.

<form id="sundae-order-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

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

लेबल

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

ऐक्सेस किए जा सकने वाले फ़ॉर्म के बुनियादी सिद्धांतों में से एक है, फ़ील्ड और उसके लेबल के बीच साफ़ और सटीक कनेक्शन बनाना. यह विज़ुअल और प्रोग्राम के हिसाब से सही है. इस संदर्भ के बिना, उपयोगकर्ता शायद फ़ॉर्म में फ़ील्ड भरने का तरीका समझ नहीं पाएगा.

<form id="sundae-order-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

इसके अलावा, मिलते-जुलते फ़ॉर्म के फ़ील्ड (जैसे कि डाक पता) को प्रोग्राम के हिसाब से और विज़ुअल तौर पर ग्रुप में शामिल किया जाना चाहिए. एक जैसे एलिमेंट को ग्रुप करने के लिए फ़ील्डसेट/लेगेंड पैटर्न का इस्तेमाल किया जा सकता है.

ब्यौरे

फ़ील्ड की जानकारी, लेबल की तरह ही होती है. इसका इस्तेमाल फ़ील्ड और ज़रूरी शर्तों के बारे में ज़्यादा जानकारी देने के लिए किया जाता है. अगर लेबल या फ़ॉर्म के निर्देशों में ज़रूरत के मुताबिक जानकारी नहीं है, तो सुलभता के लिए फ़ील्ड में जानकारी देना ज़रूरी नहीं है.

हालांकि, कुछ मामलों में फ़ॉर्म की गड़बड़ियों से बचने के लिए अतिरिक्त जानकारी जोड़ना फ़ायदेमंद होता है. जैसे, पासवर्ड फ़ील्ड के लिए इनपुट की कम से कम लंबाई के बारे में जानकारी देना या उपयोगकर्ता को यह बताना कि कौनसे कैलेंडर फ़ॉर्मैट का इस्तेमाल करना है (जैसे कि MM-DD-YYYY).

ऐसे कई अलग-अलग तरीके हैं जिनका इस्तेमाल करके आप अपने फ़ॉर्म में फ़ील्ड की जानकारी जोड़ सकते हैं. सबसे अच्छे तरीकों में से एक, फ़ॉर्म एलिमेंट में <label> एलिमेंट के साथ-साथ aria-describedby एट्रिब्यूट जोड़ना है. स्क्रीन रीडर, ब्यौरा और लेबल, दोनों को पढ़ लेगा.

अगर आपने एलिमेंट में aria-label्डby एट्रिब्यूट जोड़ा है, तो एट्रिब्यूट की वैल्यू, आपके <label> में मौजूद टेक्स्ट को बदल देती है. हमेशा की तरह, पक्का करें कि आपने जिन ATs को सपोर्ट करने के बारे में सोचा है उनके साथ फ़ाइनल कोड की जांच करें.

गड़बड़ियां

ऐक्सेस किया जा सकने वाला फ़ॉर्म बनाते समय, उपयोगकर्ताओं को फ़ॉर्म की गड़बड़ियों से बचने के लिए कई तरीके अपनाने होते हैं. इस मॉड्यूल में पहले हमने, फ़ील्ड को साफ़ तौर पर मार्क करने, पहचान करने वाले लेबल बनाने, और जहां भी संभव हो सके, पूरी जानकारी जोड़ने के बारे में बात की थी. भले ही, आपको अपना फ़ॉर्म साफ़ तौर पर समझ में आए, लेकिन उपयोगकर्ता गलती कर रहा होगा.

जब किसी उपयोगकर्ता को फ़ॉर्म में कोई गड़बड़ी दिखती है, तो सबसे पहले उस गड़बड़ी के बारे में बताएं. जिस फ़ील्ड में गड़बड़ी हुई है उसकी पहचान साफ़ तौर पर बताई जानी चाहिए. साथ ही, उपयोगकर्ता को गड़बड़ी के बारे में टेक्स्ट में बताया जाना चाहिए.

गड़बड़ी के मैसेज दिखाने के कई तरीके हैं, जैसे:

• गड़बड़ी वाली जगह के पास की इनलाइन जानकारी वाला पॉप-अप मॉडल
• पेज के सबसे ऊपर, एक बड़े मैसेज के तौर पर गड़बड़ियों का कलेक्शन.

गड़बड़ियों का एलान करते समय कीबोर्ड फ़ोकस और ARIA लाइव रीजन के विकल्पों पर ध्यान दें.

जब भी हो सके, उपयोगकर्ता को गड़बड़ी को ठीक करने के बारे में ज़्यादा जानकारी के साथ सुझाव दें. उपयोगकर्ताओं को गड़बड़ियों के बारे में सूचना देने के लिए दो एट्रिब्यूट उपलब्ध हैं.

• आप एचटीएमएल ज़रूरी एट्रिब्यूट का इस्तेमाल कर सकते हैं. पुष्टि करने के लिए सबमिट किए गए पैरामीटर के आधार पर, ब्राउज़र आपको गड़बड़ी का एक सामान्य मैसेज देगा.
• इसके अलावा, एटी के साथ गड़बड़ी का कस्टमाइज़ किया गया मैसेज शेयर करने के लिए, aria-ज़रूरी एट्रिब्यूट का इस्तेमाल किया जा सकता है. जब तक मैसेज को सभी उपयोगकर्ताओं को दिखाने के लिए कोई अतिरिक्त कोड नहीं जोड़ा जाता, तब तक मैसेज सिर्फ़ ATs को ही मिलेगा.

जब उपयोगकर्ता को लगे कि सभी गड़बड़ियां ठीक हो गई हैं, तब उसे फ़ॉर्म फिर से सबमिट करने की अनुमति दें. साथ ही, सबमिट किए गए कॉन्टेंट के नतीजों के बारे में सुझाव, शिकायत या राय दें. गड़बड़ी का मैसेज, उपयोगकर्ता को यह बताता है कि उसे कुछ और अपडेट करने हैं. वहीं, सफल होने का मैसेज इस बात की पुष्टि करता है कि उसने सभी गड़बड़ियां ठीक करके फ़ॉर्म सबमिट कर दिया है.

आपने जो सीखा है उसकी जांच करें

ऐक्सेस किए जा सकने वाले फ़ॉर्म के बारे में अपनी जानकारी देखें