Creating accessible forms html in hindi
एचटीएमएल5 वेब पेज में एक कम्पलीट एक्सेसिबल फॉर्म बनाने के लिए आपको सभी इम्पोर्टेन्ट फॉर्म इनपुट कण्ट्रोल ऐट्रिब्यूट्स और फैक्टर्स को ध्यान में रखना होगा। इसमें सभी कैपेबल और डिसेबल इंटरनेट यूजर के लिए सभी तरह के फॉर्म कण्ट्रोल और फीचर्स होने चाहिए, यहाँ एक एक्सेसिबल वेब पेज फॉर्म सभी फॉर्म जरूरी फीचर्स और फॉर्म ऐट्रिब्यूट्स अवेलेबल होने चाहिए। जिसमे, की विंडोज स्क्रीन रीडर, कीबोर्ड नेविगेशन या अल्टरनेटिव फॉर्म इनपुट मेथड्स, कॉमन और एडवांस्ड फॉर्म ऐट्रिब्यूट्स एंड फीचर्स मौजूद होने चाहिए।
So, let’s know all the factors and features to create an accessible form in an HTML5 web page.
Use of HTML5 Semantic HTML.
मॉडर्न वेब डेवलपमेंट में एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म एलिमेंट में सिमेंटिक टैग उपयोग किये जाने चाहिए, जहा सभी एचटीएमएल5 सिमेंटिक टैग आज के सभी मॉडर्न वेब ब्राउज़र और इंटरनेट टेक्नोलॉजी कम्पेटिबल होने चाहिए।
जहा एचटीएमएल5 फॉर्म में कलेक्ट होने वाले इनपुट फॉर्म कण्ट्रोल में जरूरी फॉर्म टैग एलिमेंट में <label>, <input>, <textarea>, <select>, आदि को यूज़ करे।
Example of form semantic tag control.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title>Example of form semantic tag control. </title>
</head>
<fieldset>
<legend>Employee Data</legend>
<label for=”empname”>Employee Name – </label>
<input type=”text” id=”empname” name=”empname” required>
<br><br>
<label for=”mobile”>Mobile – </label>
<input type=”number” id=”mobile” name=”mobile” required>
<br><br>
<label for=”email”>Email – </label>
<input type=”email” id=”email” name=”email” required>
</fieldset>
</body>
</html>
Add clear labels to HTML5 form input controls.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म इनपुट कण्ट्रोल लेबल फ़ॉर्म में उपयोग कण्ट्रोल को एक्सप्लेन करते हैं, फॉर्म लेबल कण्ट्रोल हर फॉर्म इनपुट कण्ट्रोल को एक लेबल प्रोवाइड करता है, जिससे फॉर्म फील करते समय इंटरनेट यूजर को कण्ट्रोल के बारे में डिटेल जानकारी हो जाती है।
लेबल फॉर्म कण्ट्रोल को फॉर्म रिलेटेड कंट्रोल्स से रिलेट करने के लिए for फॉर्म ऐट्रिब्यूट्स के साथ फॉर्म लेबल ऐट्रिब्यूट्स को उपयोग करे। आपको फॉर्म में लेबल को जानना है, और उसके अकॉर्डिंग फॉर्म इनपुट कण्ट्रोल को मैनेज करना है।
Example of form label control.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of form label control. </title>
</head>
<label for=”visitorname”>Visitor name – </label>
<input type=”text” id=” visitorname ” name=” visitorname ” required>
</body>
</html>
Apply accessible error messages in HTML5 web page.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म एरर मैसेज वेब विजिटर को गलत फॉर्म कण्ट्रोल इनपुट करते समय एक सिस्टम एरर मैसेज वेब ब्राउज़र में डिस्प्ले करता है.
और फॉर्म यूजर को प्रॉपर सही सिंटेक्स और फॉर्मेट में उस कण्ट्रोल को यूज़ और अप्लाई करने के लिए गाइड करता है. एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म एरर मैसेज रिलेटेड फॉर्म फील्ड से कनेक्ट करने के लिए aria-describedby फॉर्म ऐट्रिब्यूट्स को अप्लाई करे.
Example of error message in HTML5 web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of error message in HTML5 web page. </title>
</head>
<label for=”password”>Password -</label>
<input type=”password” id=”password” name=”password” aria-describedby=”password-error” required>
<span id=”password-error” role=”alert”>Enter Password At least 6 Character. </span>
</body>
</html>
Define HTML5 keyboard accessibility.
एचटीएमएल5 वेब पेज में यूज़ फॉर्म कीबोर्ड एक्सेसिबिलिटी ऐट्रिब्यूट्स फॉर्म यूजर को बिना माउस पॉइंटिंग डिवाइस के कीबोर्ड से फॉर्म कण्ट्रोल को एक्सेस और मैनेज कर सकते है, जहा कीबोर्ड एक्सेसिबिलिटी फीचर्स वेब यूजर को फॉर्म इंटरैक्शन में कीबोर्ड से फॉर्म फील और नेविगेशन में हेल्पफुल होते है.
एचटीएमएल5 वेब डेवलपर फॉर्म में डिज़ाइन सभी कण्ट्रोल को डिफाइन करे. जैसे, फॉर्म बटन, इनपुट फॉर्म फ़ील्ड, कीबोर्ड नेविगेशन, टैब की, को उपयोग यूजर एक्सेसिबल बनाया जाता है.
Keyboard accessibility in HTML5 forms Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Keyboard accessibility in HTML5 forms Example. </title>
</head>
<form>
<label for=”emp-first-name”>Employee First Name -</label>
<input type=”text” id=”emp-first-name” name=”emp-first-name” required>
<label for=”emp-last-name”>Employee Last Name – </label>
<input type=”text” id=”emp-last-name” name=”emp-last-name” required>
<button type=”submit”>Submit</button>
</form>
</body>
</html>
ARIA attributes in HTML5 designed forms.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) फॉर्म ऐट्रिब्यूट्स और फीचर्स फॉर्म रेफ़्रेन्स और यूजर एक्सेसिबिलिटी को इम्प्रूव करती है. फॉर्म में जरूरत के अनुसार फॉर्म कण्ट्रोल में एरिया-लेबल कण्ट्रोल को उपयोग करे, इसके साथ रिक्वायर्ड फॉर्म इनपुट फील्ड को इंडीकेट करने के लिए एरिया-रिक्वायर्ड ऐट्रिब्यूट्स का उपयोग करे।
Example of ARIA attributes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of ARIA attributes. </title>
</head>
<label for=”cellphone”>Enter Cellphone Number -</label>
<input type=”text” id=”cellphone” name=”cellphone” aria-label=”Cellphone number” aria-required=”true”>
</body>
</html>
Incorporate HTML5 form focus management.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में प्रॉपर फॉर्म फोकस मैनेजमेंट फॉर्म ट्रैक मैनेजमेंट और फॉर्म कम्युनिकेशन में यूजर के लिए एक बेहतर भूमिका निभाते है।जरूरत के अनुसार डिज़ाइन फॉर्म कण्ट्रोल में फॉर्म के लिए फॉर्म इनपुट फील्ड ऑटोफोकस ऐट्रिब्यूट्स को ऐड या अप्लाई करे ।
Example of HTML5 form focus management.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of HTML5 form focus management. </title>
</head>
<label for=”visitor-name”>Visitor Name -</label>
<input type=”text” id=”visitorname” name=” visitorname ” required autofocus>
</body>
</html>
Group form controls in HTML5 forms.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में रिलेटेड फॉर्म कण्ट्रोल ग्रुप कर वेब पेज में फॉर्म रेफ़्रेन्स प्रोवाइड करते है। मौजूदा एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में रिलेटेड फॉर्म फील्ड को ग्रुप करने के लिए <fieldset> और ग्रुप के लिए लेबल प्रोवाइड करने के लिए <legend> फॉर्म टैग का उपयोग करें। यदि डिज़ाइन फॉर्म में जरूरत होतो, हिडन फॉर्म लेबल स्क्रीन रीडर के लिए रीडेबल हो।
Example of Group form controls in an HTML5 form.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>HTML5 Group Form Control</title>
</head>
<fieldset>
<legend>Employee Address</legend>
<label for=”street-number”>Street Number -</label>
<input type=”text” id=” street-number ” name=” street-number ” required>
<label for=”mobile”>Mobile Number -</label>
<input type=”text” id=” mobile ” name=” mobile ” required>
<label for=”city”>City -</label>
<input type=”text” id=”city” name=”city” required>
<label for=”pin”>Pin Code – </label>
<input type=”text” id=”pin” name=”pin” required>
</fieldset>
</body>
</html>
Validate HTML5 form input controls.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में इनपुट फॉर्म कण्ट्रोल फीचर्स फॉर्म में उपयोग होने वाले फॉर्म कण्ट्रोल को वेलिडेट करता है, और फॉर्म यूजर को फॉर्म डाटा इनपुट करने में सहायता करता है, और फॉर्म में इनपुट एरर मैसेज को डिस्प्ले करता है।
डिज़ाइन फॉर्म में फॉर्म इनपुट रिस्ट्रिक्शन एचटीएमएल5 वेलिडेट ऐट्रिब्यूट्स में रिक्वायर्ड ऐट्रिब्यूट्स, पैटर्न ऐट्रिब्यूट्स, मिनिमम ऐट्रिब्यूट्स, और मैक्सिमम ऐट्रिब्यूट्स को अप्लाई करें।
Example of HTML5 Validate form input controls.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of HTML5 Validate form input controls. </title>
</head>
<form>
<label for=”mobile”>Mobile Number – </label>
<input type=”number” id=”mobile” name=”mobile” min=”1″ max=”10″ required>
<input type=”submit” value=”submit”>
<br><br>
</form>
</body>
</html>
Test HTML5 form input controls.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में इनपुट फॉर्म कण्ट्रोल टेक्निकल हेल्प के साथ टेस्ट करे, जिससे की आपका फॉर्म रेडी टू यूज़ और फ्लेक्सिबल हो जाता हैं।
वेब पेज में फ़ॉर्म को कैसे रीड और इंटरैक्ट किया जाए, इसे टेस्ट करने के लिए स्क्रीन रीडर जैसे NVDA और VoiceOver फीचर्स का उपयोग करें।
Forms provide clear instructions and help.
एचटीएमएल5 वेब पेज में डिज़ाइन फॉर्म में क्लियर इंस्ट्रक्शन वेब विजिटर को फॉर्म को फील करने के लिए प्रॉपर सिंटेक्स और मेथड्स को प्रोवाइड करते है। एचटीएमएल5 में डिज़ाइन वेब पेज में फ़ॉर्म कंट्रोल्स के प्रॉपर गाइड और इंस्ट्रक्शन के लिए फॉर्म में <small> टैग और <span> टैग को अप्लाई करे।
Forms provide clear instructions and help Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Forms provide clear instructions and help Example. </title>
</head>
<label for=”password”>Enter Password – </label>
<input type=”password” id=”password” name=”password” minlength=”6″ required>
<small>You Enter Must Password At Least 6 Character Long.</small>
</body>
</html>
