एक <label> ले फार्म नियन्त्रणलाई एक पहुँचयोग्य नाम र ठूलो क्लिक लक्ष्य दिन्छ। यसलाई जोड्ने दुई तरिका छन्, र यो गरिरहेको पहुँचयोग्यताको लागि आवश्यक छ।
विधि 1: for + id (स्पष्ट)
html
Email address
एक <label> ले फार्म नियन्त्रणलाई एक पहुँचयोग्य नाम र ठूलो क्लिक लक्ष्य दिन्छ। यसलाई जोड्ने दुई तरिका छन्, र यो गरिरहेको पहुँचयोग्यताको लागि आवश्यक छ।
for + id (स्पष्ट)Email address
लेबलको for इनपुटको id सँग मेल खान्छ। यो काम गर्छ भले पनि तिनीहरू मार्कअपमा आसन्न नभएँ पनि।
<label>
Email address
<input type="email" />
</label>
इनपुट लेबलको भित्र नेस्ट गरिएको छ — कुनै id चाहिँदैन।
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
एक placeholder जब प्रयोगकर्ता टाइप गर्दछ तब हराउन्छ र विश्वसनीय तरिकाले घोषणा गरिँदैन — कहिले पनि यसलाई एकमात्र लेबलको रूपमा प्रयोग गर्नुहोस्।
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
aria-label (वा aria-labelledby) प्रयोग गर्नुहोस् केवल जब दृश्य लेबल साँच्चै सम्भव छैन।
सही तरिकाले जोडिएको लेबलहरू फार्मको लागि सबैभन्दा प्रभावशाली पहुँचयोग्यता अभ्यासहरू मध्ये एक हुन् — तिनीहरूले सहायक प्रविधिको लागि हरेक नियन्त्रणलाई नाम दिन्छन् र सबैको लागि क्लिक लक्ष्य बढाउँदछन्।
वास्तविक <label> लाई प्राधान्य दिनुहोस्; केवल आवश्यक हुँदा aria-label मा फर्किनुहोस्, र कहिले पनि placeholder लाई लेबलको रूपमा भरोसा गर्नुहोस्।