ஒரு <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 ஐ லேபிளாக நம்பவேண்டாம்.