फ़ॉर्म एक ऐसा एलिमेंट है जिसकी मदद से उपयोगकर्ता किसी फ़ील्ड या ग्रुप में डेटा दे सकता है फ़ील्ड में से. फ़ॉर्म किसी एक फ़ील्ड जितने आसान या मुश्किल हो सकते हैं कई चरणों वाला फ़ॉर्म एलिमेंट, जिसमें हर पेज पर कई फ़ील्ड, इनपुट की पुष्टि, और कभी-कभी कैप्चा भी हासिल करना होता है.
फ़ॉर्म को सीधे हासिल करना सबसे मुश्किल एलिमेंट में से एक माना जाता है. सुलभता के मामले में यह मॉडल इस्तेमाल करता है, क्योंकि उन्हें हमारे उन सभी एलिमेंट के बारे में जानकारी होनी चाहिए जो साथ ही, फ़ॉर्म से जुड़े कुछ और नियम भी शामिल हैं. कुछ के साथ और समय बचाते हैं, तो आप अपने लिए एक सुलभ फ़ॉर्म बना सकते हैं और उपयोगकर्ता.
इस कोर्स का आखिरी कॉम्पोनेंट खास मॉड्यूल फ़ॉर्म है. इस मॉड्यूल से के दिशा-निर्देशों पर फ़ोकस करते हैं. हालांकि, वे सभी दिशा-निर्देश जो आपने सीखे हैं कुछ मॉड्यूल के बारे में है, जैसे कि कॉन्टेंट का स्ट्रक्चर, कीबोर्ड फ़ोकस, और रंग कंट्रास्ट, फ़ॉर्म पर भी लागू होता है एलिमेंट.
फ़ील्ड
फ़ॉर्म का आधार फ़ील्ड होता है. फ़ील्ड छोटे इंटरैक्टिव पैटर्न होते हैं, जैसे कि इनपुट या रेडियो बटन एलिमेंट, जिसकी मदद से लोग कॉन्टेंट डाल सकते हैं या का विकल्प चुनें. इन कामों के लिए कई तरह के फ़ॉर्म फ़ील्ड उपलब्ध हैं इनमें से चुनें.
डिफ़ॉल्ट सुझाव यह है कि आप इसके बजाय, पहले से मौजूद एचटीएमएल पैटर्न का इस्तेमाल करें ARIA के साथ कुछ कस्टम बनाना, जैसे कि कुछ फ़ीचर और फ़ंक्शन, जैसे कि फ़ील्ड की स्थितियां, प्रॉपर्टी, और वैल्यू HTML एलिमेंट में बनाई गई है, जबकि आपको मैन्युअल रूप से कस्टम ARIA जोड़ना पड़ता है.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
एचटीएमएल
<form id="sundae-order-form"> <!-- form content --> </form>
सबसे ज़्यादा ऐक्सेस किए जा सकने वाले फ़ॉर्म फ़ील्ड पैटर्न चुनने के अलावा, लागू हो, तो आपको यह भी जोड़ना चाहिए एचटीएमएल ऑटोकंप्लीट एट्रिब्यूट को भी बढ़ावा दिया जा सकता है. ऑटोकंप्लीट एट्रिब्यूट जोड़ने से, ज़्यादा सटीक जानकारी मिलती है मकसद की परिभाषा या पहचान और सहायक टेक्नोलॉजी (AT) को शामिल कर लिया है.
ऑटोकंप्लीट एट्रिब्यूट की मदद से, उपयोगकर्ता विज़ुअल प्रज़ेंटेशन,
उदाहरण के लिए, जन्मदिन ऑटोकंप्लीट की सुविधा वाले फ़ील्ड में जन्मदिन का केक आइकॉन
एट्रिब्यूट (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>
इसके अलावा, संबंधित फ़ॉर्म फ़ील्ड, जैसे कि डाक पता प्रोग्रामेटिक और विज़ुअल तौर पर ग्रुप किया गया हो. फ़ील्डसेट/लेगंड का इस्तेमाल करना भी एक तरीका है पैटर्न है.
ब्यौरा
फ़ील्ड की जानकारी, लेबल की तरह ही होती है. इसका इस्तेमाल इन कामों के लिए किया जाता है इनसे फ़ील्ड और ज़रूरी शर्तों के बारे में ज़्यादा जानकारी मिलेगी. फ़ील्ड की जानकारी ऐक्सेस करने के लिए ज़रूरी है, अगर लेबल या फ़ॉर्म के निर्देशों में जानकारी मौजूद है बहुत हो गया.
हालांकि, कुछ स्थितियों में अतिरिक्त जानकारी जोड़ना फ़ायदेमंद होता है फ़ॉर्म की गड़बड़ियों से बचने के लिए, जैसे कि फ़ाइल की कम से कम लंबाई के बारे में जानकारी देना पासवर्ड फ़ील्ड में इनपुट डालना या उपयोगकर्ता को यह बताना कि किस कैलेंडर प्रारूप का उपयोग करना है (जैसे DD-MM-YYYY के तौर पर).
फ़ील्ड की जानकारी जोड़ने के लिए, कई तरीकों का इस्तेमाल किया जा सकता है
फ़ॉर्म भरें. अपनी वेबसाइट पर
aria-deDescriptionby
विशेषता के साथ <label>
एलिमेंट के साथ जोड़ें. स्क्रीन
पाठक, ब्यौरा और लेबल, दोनों को पढ़ेगा.
अगर आप
aria-labeledby
एट्रिब्यूट का इस्तेमाल करता है, तो एट्रिब्यूट का मान आपके एलिमेंट के अंदर के टेक्स्ट को बदल देता है
<label>
. हमेशा की तरह, अपने सभी ATs के साथ फ़ाइनल कोड की जांच करना न भूलें
को भी मदद मिलती है.
गड़बड़ियां
ऐक्सेस किए जा सकने वाले फ़ॉर्म बनाते समय, ऐसे कई तरीके हैं जिनकी मदद से उपयोगकर्ताओं को फ़ॉर्म से जुड़ी गड़बड़ियां हो सकती हैं. इस मॉड्यूल की शुरुआत में, हमने मार्क-अप के बारे में साफ़ तौर पर बात की थी बनाने, पहचानने वाले लेबल बनाने, और जब चाहें पूरी जानकारी को जोड़ने के लिए किया जा सकता है. हालांकि, आपको इस बात की कितनी भी समझ हो कि आपका फ़ॉर्म हमेशा एक उपयोगकर्ता से गलती हो जाएगी.
जब किसी उपयोगकर्ता को फ़ॉर्म में कोई गड़बड़ी मिलती है, तो सबसे पहले गड़बड़ी के बारे में बताएं. जिस फ़ील्ड में गड़बड़ी हुई है उसे साफ़ तौर पर पहचाना जाना चाहिए और गड़बड़ी उपयोगकर्ता को खुद टेक्स्ट में बताया जाना चाहिए.
गड़बड़ी दिखाने के अलग-अलग तरीके हैं मैसेज, जैसे:
- पॉप-अप मोडल, जहां गड़बड़ी हुई है उसके पास वाला इनलाइन
- पेज के सबसे ऊपर, एक बड़े मैसेज में ग्रुप की गई गड़बड़ियों का संग्रह
कीबोर्ड फ़ोकस पर ज़रूर ध्यान दें और ARIA लाइव रीजन के विकल्प गड़बड़ियों की सूचना देते समय.
जब भी हो सके, उपयोगकर्ता को समस्या को हल करने के बारे में पूरा सुझाव दें गड़बड़ी. उपयोगकर्ताओं को गड़बड़ियों की सूचना देने के लिए दो एट्रिब्यूट उपलब्ध हैं.
- इसके लिए, ज़रूरी एट्रिब्यूट का इस्तेमाल किया जा सकता है. फ़ाइल किए गए पुष्टि के पैरामीटर के आधार पर, ब्राउज़र आपको गड़बड़ी का सामान्य मैसेज दिखाएगा.
- इसके अलावा, ATs में गड़बड़ी का कस्टम मैसेज शेयर करने के लिए, aria-ज़रूरी एट्रिब्यूट का इस्तेमाल किया जा सकता है. जब तक सभी उपयोगकर्ताओं को मैसेज दिखाने के लिए कोई अतिरिक्त कोड नहीं जोड़ा जाता, तब तक सिर्फ़ AT को मैसेज मिलेगा.
जब उपयोगकर्ता को लगे कि सभी गड़बड़ियां ठीक हो गई हैं, तो उसे फिर से सबमिट करने की अनुमति दें फ़ॉर्म भरें और उन्हें सबमिट करने के नतीजों के बारे में सुझाव/राय दें या शिकायत करें. एक गड़बड़ी मैसेज से उपयोगकर्ता को पता चलता है कि उसे कुछ और अपडेट करने हैं. वहीं दूसरी ओर, उसे सफलता का मैसेज मिलता है यह पुष्टि करेगा कि उसने सभी गड़बड़ियां ठीक कर दी हैं और फ़ॉर्म सबमिट कर दिया है.
देखें कि आपको कितना समझ आया है
सुलभता वाले फ़ॉर्म के बारे में अपनी जानकारी परखें
नीचे दिए गए किस फ़ॉर्म इनपुट को सबसे ज़्यादा ऐक्सेस किया जा सकता है?
Email address: <input type="email" required>
<label>Email address: <input type="email" required></label>
<label>Email address: <input type="email" required autocomplete="email"></label>
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>