हमने UI दिशानिर्देश सामग्री के साथ विदेशों में स्क्रीन UI (फॉर्म) में “अनिवार्य” मार्कर के बारे में जानकारी संकलित की है।
📌 मुख्य अनिवार्य मार्कर और सर्वोत्तम प्रथाएँ
तारांकन (*) का उपयोग
- यह आमतौर पर सबसे अधिक उपयोग किया जाता है, अनिवार्य फ़ील्ड में “*” जोड़ा जाता है।
- हालाँकि, फॉर्म के आरंभ में " * अनिवार्य है" जैसी व्याख्या आवश्यक है (Nielsen Norman Group, California State University, Northridge)।
- ऐसे उदाहरण भी हैं जहां जोर देने के लिए रंग का उपयोग किया जाता है (जैसे लाल पाठ)।
लेबल में “Required” या “(required)” निर्दिष्ट करना
- लेबल के भीतर “Required” शब्द को शामिल करके, स्क्रीन रीडर को यह स्पष्ट रूप से दर्शाया जा सकता है, जिससे एक्सेसिबिलिटी में सुधार होता है (Deque)।
ARIA विशेषताओं और HTML5
requiredविशेषता का संयुक्त उपयोग- दृश्य प्रदर्शन के अतिरिक्त,
aria-required="true"और<input required>का उपयोग करके, फ़ील्ड को प्रोग्राम के माध्यम से भी अनिवार्य बताया जा सकता है (Deque)।
- दृश्य प्रदर्शन के अतिरिक्त,
वैकल्पिक फ़ील्ड को निर्दिष्ट करने के लिए “(optional)” का उपयोग
- अनिवार्य फ़ील्ड के बजाय वैकल्पिक फ़ील्ड को “(optional)” के रूप में स्पष्ट रूप से चिह्नित करने का एक तरीका भी है, जो मिश्रित होने पर प्रभावी होता है।
- हालाँकि, Nielsen-Norman बताते हैं कि “यदि अनिवार्य फ़ील्ड को भी स्पष्ट रूप से निर्दिष्ट किया जाए तो न्याय करना आसान है” (TPGi)।
✅ UI दिशानिर्देश सामग्री सारांश
| स्रोत | सामग्री |
|---|---|
| NN/g: Marking Required Fields in Forms | तारांकन और व्याख्यात्मक पाठ के संयोजन की सिफारिश की जाती है; केवल वैकल्पिक प्रदर्शित करना अमित्र माना जाता है (Nielsen Norman Group)। |
| Deque (Anatomy of Accessible Forms) | ・लेबल के भीतर “Required” स्ट्रिंग या छवि का उपयोग किया जाता है। ・यह स्पष्ट रूप से बताता है कि केवल रंगों के माध्यम से संकेत अपर्याप्त है। |
| W3C Techniques (H90) | लेबल में तारांकन या “(required)” शामिल करने और फॉर्म की शुरुआत में इसका अर्थ परिभाषित करने के उदाहरण हैं। |
| TPGi (Doing what’s required) | एक्सेसिबिलिटी को ध्यान में रखते हुए, तारांकन + ARIA विशेषताएँ + लेबल पाठ प्रविष्टि के संयोजन को इष्टतम के रूप में मूल्यांकित किया गया है। |
| Contensis फॉर्म UX गाइड | संक्षेप में व्यवस्थित: एक सुसंगत अंकन (* या (optional)) महत्वपूर्ण है। |
✅ कार्यान्वयन के लिए अनुशंसित दृष्टिकोण
फॉर्म के आरंभ में एक व्याख्यात्मक पाठ जोड़ें :
Fields marked with * are required. (या सभी के लिए “All fields are required”, या यदि वैकल्पिक हैं तो “unless marked optional”)
लेबल असाइनमेंट :
First Name *याEmail (required)के रूप में लिखा गया।
ARIA विशेषताएँ और HTML5 विशेषताएँ :
1 2<label for="email">Email <abbr title="required">*</abbr></label> <input id="email" required aria-required="true">केवल रंग पर निर्भर न रहें : दृश्य और प्रोग्राम दोनों तरह से समर्थन प्रदान करें।
🔗 संदर्भ लिंक (UI दिशानिर्देश सामग्री)
- NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
- Deque: Anatomy of Accessible Forms (Deque)
- W3C Techniques: H90 Indicating required form controls (W3C)
- TPGi: Indicating mandatory fields accessibly (TPGi)
- Contensis: UX Forms Guidelines (Contensis)
यदि आवश्यक हो, तो मैं स्केच और फिग्मा के लिए विशिष्ट HTML/CSS कोड उदाहरण या UI घटक डिज़ाइन टेम्पलेट भी प्रदान कर सकता हूँ। कृपया पूछने में संकोच न करें!