एक <label> फॉर्म नियंत्रण को एक सुलभ नाम और एक बड़ा क्लिक लक्ष्य देता है। उन्हें जोड़ने के दो तरीके हैं, और ऐसा करना पहुंच के लिए आवश्यक है।
Method 1: for + id (explicit)
html
Email address
एक <label> फॉर्म नियंत्रण को एक सुलभ नाम और एक बड़ा क्लिक लक्ष्य देता है। उन्हें जोड़ने के दो तरीके हैं, और ऐसा करना पहुंच के लिए आवश्यक है।
for + id (explicit)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 पर लेबल के रूप में निर्भर न रहें।