फ़ॉर्म एक ऐसा एलिमेंट है जिसकी मदद से कोई उपयोगकर्ता, किसी फ़ील्ड या फ़ील्ड के ग्रुप में डेटा डाल सकता है. फ़ॉर्म, एक फ़ील्ड वाला हो सकता है. इसके अलावा, यह एक से ज़्यादा पेजों वाला, कई फ़ील्ड वाला, इनपुट की पुष्टि करने वाला, और कैप्चा वाला जटिल फ़ॉर्म भी हो सकता है.
फ़ॉर्म को ऐक्सेस करने की सुविधा के हिसाब से, यह सबसे मुश्किल एलिमेंट माना जाता है. ऐसा इसलिए, क्योंकि इसके लिए उन सभी एलिमेंट की जानकारी होना ज़रूरी है जिनके बारे में हम पहले ही बता चुके हैं. साथ ही, फ़ॉर्म के लिए खास तौर पर बनाए गए अतिरिक्त नियमों की जानकारी भी ज़रूरी है. थोड़ी समझ और समय के साथ, आपके और आपके उपयोगकर्ताओं के लिए ऐक्सेस किया जा सकने वाला फ़ॉर्म बनाया जा सकता है.
इस कोर्स में, फ़ॉर्म से जुड़ा यह आखिरी मॉड्यूल है. इस मॉड्यूल में, फ़ॉर्म से जुड़े दिशा-निर्देशों पर फ़ोकस किया गया है. हालांकि, पहले के मॉड्यूल में दिए गए दिशा-निर्देश, जैसे कि कॉन्टेंट का स्ट्रक्चर, कीबोर्ड फ़ोकस, और कलर कंट्रास्ट, फ़ॉर्म एलिमेंट पर भी लागू होते हैं.
फ़ील्ड
फ़ॉर्म का मुख्य हिस्सा, फ़ील्ड होते हैं. फ़ील्ड, इंटरैक्टिव पैटर्न होते हैं. जैसे, इनपुट या रेडियो बटन एलिमेंट. इनकी मदद से, उपयोगकर्ता कॉन्टेंट डाल सकते हैं या कोई विकल्प चुन सकते हैं. फ़ॉर्म फ़ील्ड के कई विकल्प उपलब्ध हैं.
डिफ़ॉल्ट तौर पर, हमारा सुझाव है कि ARIA की मदद से कस्टम फ़ॉर्म बनाने के बजाय, एचटीएमएल के तय पैटर्न का इस्तेमाल करें. ऐसा इसलिए, क्योंकि फ़ील्ड की स्थितियों, प्रॉपर्टी, और वैल्यू जैसी कुछ सुविधाएं और फ़ंक्शन, एचटीएमएल एलिमेंट में पहले से मौजूद होते हैं. कस्टम फ़ील्ड के लिए, आपको ARIA को मैन्युअल तरीके से जोड़ना होगा.
सुझाव नहीं दिया जाता — ARIA के साथ कस्टम एचटीएमएल
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
सुझाव दिया जाता है — स्टैंडर्ड एचटीएमएल
<form id="sundae-order-form">
<!-- form content -->
</form>
सबसे ज़्यादा ऐक्सेस किए जा सकने वाले फ़ॉर्म फ़ील्ड पैटर्न चुनने के अलावा, जहां ज़रूरी हो, आपको अपने फ़ील्ड में एचटीएमएल ऑटोकंप्लीट एट्रिब्यूट भी जोड़ने चाहिए. ऑटोकंप्लीट एट्रिब्यूट जोड़ने से, उपयोगकर्ता एजेंट और असिस्टिव टेक्नोलॉजी (एटी) को, मकसद की ज़्यादा सटीक जानकारी या पहचान मिलती है.
ऑटोकंप्लीट एट्रिब्यूट की मदद से, उपयोगकर्ता विज़ुअल प्रज़ेंटेशन को अपनी पसंद के मुताबिक बना सकते हैं. जैसे, जन्मदिन के ऑटोकंप्लीट एट्रिब्यूट (bday) वाले फ़ील्ड में, जन्मदिन के केक का आइकॉन दिखाना. आम तौर पर, ऑटोकंप्लीट एट्रिब्यूट की मदद से, फ़ॉर्म को आसानी से और तेज़ी से भरा जा सकता है. यह सुविधा खास तौर पर उन लोगों के लिए बहुत फ़ायदेमंद है जिन्हें कॉग्निटिव और पढ़ने से जुड़ी समस्याएं हैं. साथ ही, यह उन लोगों के लिए भी फ़ायदेमंद है जो स्क्रीन रीडर जैसी एटी का इस्तेमाल करते हैं.
<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>
इसके अलावा, डाक पते जैसे संबंधित फ़ॉर्म फ़ील्ड को प्रोग्राम के हिसाब से और विज़ुअल तौर पर ग्रुप में रखना ज़रूरी है. एक तरीका यह है कि एक जैसे एलिमेंट को ग्रुप में रखने के लिए, fieldset और legend पैटर्न का इस्तेमाल किया जाए.
ब्यौरा
फ़ील्ड के ब्यौरे, लेबल की तरह ही होते हैं. इनका इस्तेमाल, फ़ील्ड और ज़रूरी शर्तों के बारे में ज़्यादा जानकारी देने के लिए किया जाता है. अगर लेबल या फ़ॉर्म के निर्देशों में पूरी जानकारी दी गई है, तो ऐक्सेस करने की सुविधा के लिए, फ़ील्ड के ब्यौरे ज़रूरी नहीं हैं.
हालांकि, कुछ स्थितियों में अतिरिक्त जानकारी जोड़ने से, फ़ॉर्म में होने वाली गड़बड़ियों से बचा जा सकता है. जैसे, पासवर्ड फ़ील्ड के लिए इनपुट की कम से कम लंबाई के बारे में जानकारी देना या उपयोगकर्ता को यह बताना कि उसे किस कैलेंडर फ़ॉर्मैट का इस्तेमाल करना है. जैसे, MM-DD-YYYY.
अपने फ़ॉर्म में फ़ील्ड के ब्यौरे जोड़ने के लिए, कई अलग-अलग तरीकों का इस्तेमाल किया जा सकता है. सबसे सही तरीकों में से एक यह है कि <label> एलिमेंट के अलावा, फ़ॉर्म एलिमेंट में
aria-describedby
एट्रिब्यूट जोड़ा जाए. स्क्रीन रीडर, ब्यौरे और लेबल, दोनों को पढ़ेगा.
अगर अपने एलिमेंट में
aria-labelledby
एट्रिब्यूट जोड़ा जाता है, तो एट्रिब्यूट की वैल्यू, आपके
<label> में मौजूद टेक्स्ट को बदल देती है. हमेशा की तरह, फ़ाइनल कोड को उन सभी एटी के साथ टेस्ट करें जिनके लिए आपको सहायता देनी है.
गड़बड़ियां
ऐक्सेस किए जा सकने वाले फ़ॉर्म बनाते समय, कई ऐसे काम किए जा सकते हैं जिनसे उपयोगकर्ताओं को फ़ॉर्म में गड़बड़ियां करने से रोका जा सकता है. इस मॉड्यूल में पहले, हमने फ़ील्ड को साफ़ तौर पर मार्कअप करने, पहचान करने वाले लेबल बनाने, और जहां भी मुमकिन हो वहां विस्तृत ब्यौरे जोड़ने के बारे में बताया था. हालांकि, आपको भले ही ऐसा लगे कि आपका फ़ॉर्म साफ़ तौर पर बना है, लेकिन आखिर में कोई न कोई उपयोगकर्ता गड़बड़ी करेगा.
जब किसी उपयोगकर्ता को फ़ॉर्म में गड़बड़ी मिलती है, तो पहला काम यह है कि उसे गड़बड़ी के बारे में बताया जाए. जिस फ़ील्ड में गड़बड़ी हुई है उसकी साफ़ तौर पर पहचान की जानी चाहिए. साथ ही, उपयोगकर्ता को गड़बड़ी के बारे में टेक्स्ट में बताया जाना चाहिए.
गड़बड़ी के मैसेज दिखाने के अलग-अलग तरीके हैं. जैसे:
- मोडल, गड़बड़ी वाली जगह के पास इनलाइन
- पेज पर सबसे ऊपर, एक बड़े मैसेज में ग्रुप की गई गड़बड़ियों का कलेक्शन
गड़बड़ियों के बारे में बताते समय, कीबोर्ड फ़ोकस और ARIA लाइव रीजन के विकल्पों पर ध्यान दें.
जहां भी मुमकिन हो, उपयोगकर्ता को गड़बड़ी ठीक करने के तरीके के बारे में विस्तृत सुझाव दें. उपयोगकर्ताओं को गड़बड़ियों के बारे में बताने के लिए, दो एट्रिब्यूट उपलब्ध हैं.
- एचटीएमएल के ज़रूरी एट्रिब्यूट का इस्तेमाल किया जा सकता है. ब्राउज़र, फ़ाइल की पुष्टि करने के पैरामीटर के आधार पर, गड़बड़ी का सामान्य मैसेज दिखाता है.
- इसके अलावा, एटी को गड़बड़ी का कस्टम मैसेज शेयर करने के लिए, aria-required एट्रिब्यूट का इस्तेमाल किया जा सकता है. सिर्फ़ एटी को यह मैसेज मिलता है. हालांकि, अगर सभी उपयोगकर्ताओं को मैसेज दिखाना है, तो आपको कोड जोड़ना होगा.
जब किसी उपयोगकर्ता को लगे कि सभी गड़बड़ियां ठीक हो गई हैं, तो उसे फ़ॉर्म फिर से सबमिट करने दें. साथ ही, सबमिट करने के नतीजों के बारे में सुझाव/शिकायत/राय पाने का अनुरोध करें. गड़बड़ी का मैसेज, उपयोगकर्ता को बताता है कि उसे और अपडेट करने हैं. वहीं, सफलता का मैसेज इस बात की पुष्टि करता है कि उसने सभी गड़बड़ियां ठीक कर ली हैं और फ़ॉर्म को सफलतापूर्वक सबमिट कर दिया है.
सफलता के अतिरिक्त क्राइटेरिया
WCAG 2.2 में, सफलता के ये क्राइटेरिया जोड़े गए हैं. इनमें, फ़ॉर्म को ज़्यादा ऐक्सेस करने की सुविधा पर फ़ोकस किया गया है: