How to create accessible web forms

Sep 13, 2025

कैसे करना है

फॉर्म वेब का एक आवश्यक घटक हैं क्योंकि वे उपयोगकर्ताओं को आपके व्यवसाय से जोड़ते हैं और उन्हें आपकी साइट या ऐप के लिए जो भी आते हैं उसे पूरा करने में मदद करते हैं। ऐसा कहा जा रहा है कि, आप यह सुनिश्चित करना चाहते हैं कि आपके सभी उपयोगकर्ता एक भयानक अनुभव के बिना अपने फॉर्म का उपयोग करने में सक्षम हैं। लक्ष्य इन प्रमुख उपयोगकर्ता इंटरैक्शन को यथासंभव घर्षण रहित बनाना है।

यद्यपि यह सच है कि बिल्डिंग फॉर्म कई बार एक कठिन कार्य हो सकता है, जिससे उन्हें मामूली पहुंच योग्य बना दिया जा सकता है उतना जटिल नहीं है जितना आप सोच सकते हैं (एक अच्छा) वेबसाइट निर्माता इसे सुपर-सरल बना देगा)। अक्सर चारों ओर फेंकने वाले बहाने होते हैं 'हमारे पास अभिगम्यता के बारे में चिंता करने का समय नहीं है' या 'हम इसे बाद में सुलभ बना देंगे'। ये बहस अक्सर होते हैं (यदि हमेशा नहीं) अमान्य हैं और आप अपनी टीम को इस मानसिकता को बदलने में मदद कर सकते हैं।

।

मैंने आपको कुछ बुनियादी स्टाइल और तत्व प्रदान किए हैं जो एक साधारण सदस्यता फॉर्म बनायेंगे लेकिन इस फॉर्म को अधिक उपयोग करने योग्य बनाने के लिए हम यहां बहुत कुछ कर सकते हैं। आपके द्वारा बनाए गए किसी भी चीज़ के साथ, अच्छे अर्थपूर्ण HTML का उपयोग करके आपको एक लंबा रास्ता मिलेगा।

चलो कनेक्ट करके शुरू करते हैं & lt; इनपुट & gt; उनके संबंधित के लिए तत्व & lt; लेबल & gt; एस हम इसे देकर ऐसा करते हैं & lt; इनपुट & gt; एक आईडी और इसका उपयोग करने के लिए विशेषता के लिए & lt; लेबल & gt; । हम इनके लिए "नाम" और "ईमेल" का उपयोग कर सकते हैं और हमने पहले ही दो चीजें की हैं:

हमने प्रोग्रामेटिक रूप से इनपुट में लेबल को जोड़ा है। इसका लाभ यह है कि यदि वह इनपुट केंद्रित है तो यह एक स्क्रीन रीडर उपयोगकर्ता को लेबल पढ़ेगा।
उपयोगकर्ता अब लेबल पर क्लिक कर सकता है और संबंधित इनपुट केंद्रित होगा, इसलिए उपयोगकर्ताओं के पास अब एक बड़ा लक्ष्य आकार है।

अब जब हमारे इनपुट और लेबल सभी वायर्ड हैं, तो हम HTML इनपुट प्रकारों को परिभाषित कर सकते हैं। ये वास्तव में उपयोगी हैं और एक उत्कृष्ट उपयोगकर्ता अनुभव देने के लिए एक आसान तरीका है। जोड़ना प्रकार विशेषता उपयोगकर्ता को आपके फॉर्म को स्वतः भरने में मदद करेगी और मोबाइल उपयोगकर्ताओं के लिए एक अधिक उपयुक्त कीबोर्ड भी प्रदान करेगी। हमारे उपयोग के मामले में हम कर सकते हैं टाइप = "टेक्स्ट" इनपुट के लिए और टाइप = "ईमेल" ईमेल इनपुट के लिए।

हम यह भी चाहते हैं कि हमारे उपयोगकर्ताओं को यह एक अच्छा विचार है कि किस प्रकार का डेटा (और इसकी स्वरूपण) हम उनसे अपेक्षा करते हैं। यहां यह बहुत स्पष्ट है लेकिन यह हमेशा मामला नहीं है। यह एक लेबल प्रदान करने योग्य और प्लेसहोल्डर प्रदान करने वाला आमतौर पर अच्छा अभ्यास होता है जो अपेक्षित इनपुट को संचारित करता है। इसका मतलब नहीं है प्लेसहोल्डर एक बार उपयोगकर्ता टाइपिंग शुरू होने के बाद लेबल देखने योग्य नहीं है, इनपुट के लिए एक दृश्य लेबल के रूप में विशेषता। यह बहुत से डेवलपर्स के लिए एक लोकप्रिय अभ्यास रहा है और वास्तव में एक बार और सभी के लिए बिस्तर पर रखने की जरूरत है। हम ईमेल के लिए नाम और "पूर्व। [email protected]" के लिए "पूर्व। जेन डो" का प्लेसहोल्डर दे सकते हैं।

अब हम फोकस पर काम कर सकते हैं राज्य स्टाइलिंग। फोकस राज्य की डिफ़ॉल्ट स्टाइल ब्राउज़र के बीच अलग-अलग हैं और हम इसे अधिक उपयोगकर्ता के अनुकूल बनाने के लिए जो भी डिफ़ॉल्ट स्टाइल हो सकते हैं, हम सुधार कर सकते हैं। यहां हमारे मामले में, हम इनपुट को एक मोटी, रंगीन रूपरेखा होना चाहते हैं जो बटन से मेल खाता है।

आपकी वेबसाइट को और अधिक सुलभ बनाने के लिए 14 आसान तरीके

इनपुट चयनकर्ता को फोकस शैलियों जोड़ें

अंत में, हमें बटन तत्व के चारों ओर कुछ फोकस शैलियों को जोड़ने की जरूरत है। इसे अक्सर अनदेखा किया जाता है लेकिन वास्तव में कीबोर्ड-केवल उपयोगकर्ताओं को यह पता चल सकता है कि वे कहां हैं। हमें यह जोड़ने की जरूरत है & amp; :: मोज़-फोकस-इनर फ़ायरफ़ॉक्स में कुछ डिफ़ॉल्ट स्टाइल से छुटकारा पाने के लिए बिट (आप भविष्य के उपयोग के लिए उस स्निपेट को सहेजना चाहेंगे)।

बस इसी तरह, हमारे पास एक बुनियादी सदस्यता फॉर्म है जिसे आपको गर्व और सुधार किया जा सकता है। चूंकि हमने अच्छे अर्थशास्त्र का उपयोग किया है, फॉर्म केवल कीबोर्ड के माध्यम से पहुंच योग्य है (टैब और स्पेसबार / एंटर कुंजी का उपयोग करने का प्रयास करें)। बटन के लिए उपयोग किए गए रंग 11.51 का रंग अनुपात होते हैं, जो डब्ल्यूसीएजी (वेब सामग्री अभिगम्यता दिशानिर्देश) के लिए एएए मानकों को पूरा करते हैं। हमने दृश्य उपयोगकर्ताओं और स्क्रीन-रीडर उपयोगकर्ताओं दोनों के लिए लेबल प्रदान किए हैं, साथ ही साथ हमारे कीबोर्ड-उपयोग के दोस्तों के लिए स्टाइल फोकस राज्य भी हैं। अंत में, ध्यान दें कि फ़ॉन्ट सेट है 18px शरीर में। यह हमारे रूप को अधिक पठनीय बनाता है (आपको 14px से ऊपर रहने की कोशिश करनी चाहिए)।

दिमाग में पहुंच के साथ डिजाइनिंग और निर्माण अभ्यास लेता है लेकिन आप इसके लिए एक बेहतर डेवलपर होंगे और वेब को बेहतर स्थान बनाने में मदद करेंगे।

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — जेनरेट, वेब डिजाइनरों के लिए पुरस्कार विजेता सम्मेलन, 24-25 अप्रैल को एनवाईसी लौट आया! टिकट बुक करने के लिए छवि पर क्लिक करें

यह लेख मूल रूप से 316 अंक में प्रकाशित हुआ था जाल , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। यहां 316 जारी करें या यहां सदस्यता लें ।

संबंधित आलेख:

फिक्स एक्सेसिबिलिटी इस मुफ्त टूल के साथ विफल हो जाती है
2019 में डेवलपर्स के लिए 50 भयानक नए उपकरण
आपके डिजाइन कितने सुलभ हैं?

How to create accessible web forms

इनपुट चयनकर्ता को फोकस शैलियों जोड़ें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

एक स्थानीय विकास पर्यावरण कैसे स्थापित करें

7 top tips for starting your own business

How to use Smart layers in Photoshop

Create a multi-exposure image with Adobe CC

19 tips for great Poser art

How to paint a dreamlike fantasy forest scene

Make a composite in Photoshop

How to create manga-style hair in motion

श्रेणियाँ