आपका बनाया हुआ फ़ॉर्म लोगों के लिए है. लोग अलग-अलग डिवाइस का इस्तेमाल करते हैं. कुछ माउस, कुछ टच डिवाइस, और कुछ कीबोर्ड का इस्तेमाल करते हैं. कुछ ऐसे डिवाइस होते हैं जिन्हें आंखों की मूवमेंट से कंट्रोल किया जाता है. कुछ में स्क्रीन रीडर, कुछ छोटी स्क्रीन, और कुछ में टेक्स्ट बड़ा करने वाला सॉफ़्टवेयर इस्तेमाल किया जाता है. सभी लोग आपके फ़ॉर्म का इस्तेमाल करना चाहते हैं. अपने फ़ॉर्म को सभी के लिए सुलभ और इस्तेमाल करने लायक बनाने का तरीका जानें.
पक्का करें कि उपयोगकर्ताओं को फ़ॉर्म फ़ील्ड का मकसद पता है
आपके पास फ़ॉर्म कंट्रोल के कई विकल्प हैं.
उन सब में क्या समानता है?
हर फ़ॉर्म कंट्रोल में, उससे जुड़ा <label> एलिमेंट होना चाहिए.
<label> एलिमेंट, फ़ॉर्म कंट्रोल के मकसद के बारे में बताता है.
<label> टेक्स्ट, फ़ॉर्म कंट्रोल से विज़ुअल तौर पर जुड़ा होता है और स्क्रीन रीडर इसे पढ़ते हैं.
साथ ही, <label> पर टैप या क्लिक करने से, इससे जुड़े फ़ॉर्म पर फ़ोकस होता है,
और उसे बड़ा टारगेट बनाकर.
बिल्ट-इन ब्राउज़र सुविधाओं को ऐक्सेस करने के लिए सही एचटीएमएल का इस्तेमाल करना
सिद्धांत के तौर पर, सिर्फ़ <div> एलिमेंट का इस्तेमाल करके फ़ॉर्म बनाया जा सकता है.
आपके पास इसे नेटिव <form> जैसा बनाने का भी विकल्प है.
इस्तेमाल करने में क्या समस्या है
नॉन-सिमेंटिक एलिमेंट?
बिल्ट-इन फ़ॉर्म एलिमेंट में कई सुविधाएं पहले से मौजूद होती हैं. आइए एक उदाहरण देखें.
विज़ुअल तौर पर, <input> (उदाहरण में पहला वाला) और <div> एक जैसे दिखते हैं.
आप दोनों के लिए टेक्स्ट भी डाल सकते हैं, क्योंकि <div> में
contenteditable एट्रिब्यूट.
हालांकि, सही <input> एलिमेंट और <div> एलिमेंट का इस्तेमाल करने के बीच कई अंतर हैं
<input> जैसा दिख रहा है.
अगर स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति <div> की पहचान इनपुट एलिमेंट के तौर पर नहीं करता है,
और फ़ॉर्म नहीं भर पा रहा है.
सभी स्क्रीन रीडर को 'नाम' सुनाई देता है,
इसमें यह जानकारी नहीं दी गई है कि एलिमेंट, टेक्स्ट जोड़ने के लिए एक फ़ॉर्म कंट्रोल है.
<div>Name</div> पर क्लिक करने से, उसके साथ जाने वाले <div> पर फ़ोकस नहीं होता, जबकि <label> और
<input> को जोड़ने के लिए, for और id एट्रिब्यूट का इस्तेमाल किया जाता है.
फ़ॉर्म सबमिट करने के बाद, <div> में डाला गया डेटा, अनुरोध में शामिल नहीं किया जाता.
JavaScript के साथ डेटा को अटैच करना मुमकिन है, लेकिन
डिफ़ॉल्ट रूप से, <input> ऐसा करता है.
पहले से मौजूद फ़ॉर्म एलिमेंट में अन्य सुविधाएं भी हैं.
उदाहरण के लिए, सही फ़ॉर्म एलिमेंट और सही inputmode या type के साथ,
जब कोई ऑन-स्क्रीन कीबोर्ड ज़रूरी वर्ण दिखाता हो. <div> पर inputmode एट्रिब्यूट का इस्तेमाल करना
वह ऐसा नहीं कर सकता.
पक्का करें कि उपयोगकर्ताओं को, सही डेटा फ़ॉर्मैट के बारे में पता हो
किसी फ़ॉर्म कंट्रोल के लिए, पुष्टि करने के अलग-अलग नियम तय किए जा सकते हैं.
उदाहरण के लिए, मान लें कि एक फ़ॉर्म फ़ील्ड में हमेशा कम से कम आठ वर्ण होने चाहिए.
ब्राउज़र को पुष्टि करने का नियम बताने के लिए, minlength एट्रिब्यूट का इस्तेमाल किया जाता है.
यह कैसे पक्का किया जा सकता है कि उपयोगकर्ताओं को पुष्टि करने के नियम के बारे में भी पता है? उन्हें बताएं.
फ़ॉर्म कंट्रोल के नीचे, अनुमानित फ़ॉर्मैट के बारे में जानकारी जोड़ें.
सहायक डिवाइसों के लिए साफ़ तौर पर जानकारी देने के लिए,
फ़ॉर्म कंट्रोल पर aria-describedby एट्रिब्यूट का इस्तेमाल करें,
और id को जोड़ने के लिए, एक ही वैल्यू का इस्तेमाल करें.
फ़ॉर्म कंट्रोल में गड़बड़ी के मैसेज ढूंढने में उपयोगकर्ताओं की मदद करना
पुष्टि करने के बारे में पिछले मॉड्यूल में, आपने अमान्य डेटा एंट्री होने पर गड़बड़ी के मैसेज दिखाने का तरीका सीखा है.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
उदाहरण के लिए, अगर किसी फ़ील्ड में required एट्रिब्यूट है और अमान्य डेटा डाला गया है, तो ब्राउज़र दिखाता है कि
तो फ़ॉर्म सबमिट किए जाने पर फ़ॉर्म नियंत्रण के बगल में 'गड़बड़ी का मैसेज' दिखेगा. स्क्रीन रीडर, गड़बड़ी के मैसेज के बारे में भी बताते हैं.
गड़बड़ी का मैसेज खुद भी तय किया जा सकता है:
गड़बड़ी के मैसेज को फ़ॉर्म कंट्रोल से जोड़ने के लिए, इस उदाहरण में और बदलाव करने होंगे.
aria-describedby का इस्तेमाल करना, एक आसान तरीका है
एट्रिब्यूट की वैल्यू सबमिट करें, जो गड़बड़ी के मैसेज एलिमेंट पर मौजूद id से मेल खाती है.
इसके बाद, गड़बड़ी के मैसेज के लिए aria-live="assertive" का इस्तेमाल करें.
ARIA लाइव रीजन, स्क्रीन रीडर इस्तेमाल करने वालों को गड़बड़ी के बारे में सूचना देते हैं.
इस तरीके में समस्या, एक से ज़्यादा फ़ील्ड वाले फ़ॉर्म में होती है.
यह की वैल्यू यह है कि एक से ज़्यादा गड़बड़ियां होने पर, आम तौर पर aria-live सिर्फ़ पहली गड़बड़ी के बारे में बताएगा.
जैसा कि एक ही कार्रवाई पर कई aria-live सूचनाओं के बारे में इस लेख में बताया गया है, सभी गड़बड़ियों को जोड़कर एक मैसेज बनाया जा सकता है. दूसरा तरीका यह है कि आप गड़बड़ियों की सूचना दें, फिर फ़ील्ड के फ़ोकस में होने पर अलग-अलग गड़बड़ियों के बारे में बताएं.
पक्का करें कि उपयोगकर्ता गड़बड़ियों को पहचानें
कभी-कभी डिज़ाइनर अमान्य स्थिति को लाल रंग में रंग देते हैं,
:invalid pseudo-class का इस्तेमाल करके.
हालांकि, किसी गड़बड़ी या सफलता के बारे में बताने के लिए,
आपको कभी भी सिर्फ़ रंग पर भरोसा नहीं करना चाहिए.
लाल-हरे रंग की रोशनी न पाने वाले लोगों में
हरा और लाल बॉर्डर करीब-करीब एक जैसा दिखता है.
यह देखना मुमकिन है कि मैसेज किसी गड़बड़ी से जुड़ा हो.
रंग के साथ-साथ, आइकॉन का इस्तेमाल करें या गड़बड़ी के मैसेज के आगे गड़बड़ी का टाइप लगाएं.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
उपयोगकर्ताओं को फ़ॉर्म में नेविगेट करने में मदद करें
सीएसएस की मदद से, फ़ॉर्म कंट्रोल के विज़ुअल ऑर्डर को बदला जा सकता है. विज़ुअल ऑर्डर और कीबोर्ड नेविगेशन (DOM ऑर्डर) के बीच का डिसकनेक्ट स्क्रीन रीडर और कीबोर्ड इस्तेमाल करने वालों को समस्या होती है.
पक्का करने के तरीके के बारे में ज़्यादा जानें पेज पर विज़ुअल ऑर्डर, DOM के क्रम के मुताबिक होता है.
उपयोगकर्ताओं को मौजूदा फ़ॉर्म कंट्रोल की पहचान करने में मदद करें
नेविगेट करने के लिए, अपने कीबोर्ड का इस्तेमाल करें
यह फ़ॉर्म भरें.
क्या आपको पता है कि फ़ॉर्म कंट्रोल के चालू होने के बाद, उनकी स्टाइल बदल गई थी?
यह डिफ़ॉल्ट फ़ोकस स्टाइल है.
आप इसे
:focus सीएसएस pseudo-class.
:focus के अंदर आप चाहे कोई भी स्टाइल इस्तेमाल करें,
हमेशा यह पक्का करें कि डिफ़ॉल्ट स्थिति और फ़ोकस की स्थिति के बीच का विज़ुअल अंतर पहचाना जा सके.
इसके बारे में ज़्यादा जानें फ़ोकस इंडिकेटर डिज़ाइन करना.
पक्का करें कि आपका फ़ॉर्म इस्तेमाल किया जा सकता हो
अलग-अलग डिवाइसों पर फ़ॉर्म को भरकर, आम तौर पर होने वाली कई समस्याओं की पहचान की जा सकती है. सिर्फ़ अपने कीबोर्ड का इस्तेमाल करने के लिए, स्क्रीन रीडर का इस्तेमाल करें (जैसे कि Windows पर NVDA या Mac पर VoiceOver), या पेज को 200% तक ज़ूम करें. अपने फ़ॉर्म की हमेशा अलग-अलग प्लैटफ़ॉर्म पर जांच करें. खास तौर पर, ऐसे डिवाइसों या सेटिंग का इस्तेमाल करें जिन्हें आपने हर दिन इस्तेमाल नहीं किया है. क्या आप किसी ऐसे व्यक्ति को जानते हैं जो स्क्रीन रीडर इस्तेमाल कर रहा है, या कोई व्यक्ति टेक्स्ट बड़ा करने वाले सॉफ़्टवेयर का इस्तेमाल कर रहा है? उन्हें आपका फ़ॉर्म भरने के लिए कहें. सुलभता की समीक्षाएं बेहतरीन होती हैं, लेकिन इन्हें असली उपयोगकर्ताओं के साथ टेस्ट करना और भी बेहतर है.
ऐसा करने के बारे में ज़्यादा जानें सुलभता सुविधाओं की समीक्षा करना साथ ही, असली उपयोगकर्ताओं के साथ टेस्ट करने का तरीका भी बताया है.