ਇੱਕ <label> ਇੱਕ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇੱਕ ਪਹੁੰਚ ਯੋਗ ਨਾਮ ਅਤੇ ਇੱਕ ਵੱਡਾ ਕਲਿਕ ਟਾਰਗੇਟ ਦਿੰਦਾ ਹੈ। ਇਸ ਨੂੰ ਜੋੜਨ ਦੇ ਦੋ ਤਰੀਕੇ ਹਨ, ਅਤੇ ਅਜਿਹਾ ਕਰਨਾ ਪਹੁੰਚ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।
ਵਿਧੀ 1: for + id (ਸਪੱਸ਼ਟ)
html
Email address
ਇੱਕ <label> ਇੱਕ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇੱਕ ਪਹੁੰਚ ਯੋਗ ਨਾਮ ਅਤੇ ਇੱਕ ਵੱਡਾ ਕਲਿਕ ਟਾਰਗੇਟ ਦਿੰਦਾ ਹੈ। ਇਸ ਨੂੰ ਜੋੜਨ ਦੇ ਦੋ ਤਰੀਕੇ ਹਨ, ਅਤੇ ਅਜਿਹਾ ਕਰਨਾ ਪਹੁੰਚ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।
for + id (ਸਪੱਸ਼ਟ)Email address
ਲੇਬਲ ਦਾ for ਇੰਪੁਟ ਦੇ id ਨਾਲ ਮਿਲਦਾ ਹੈ। ਇਹ ਉਦੋਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ ਜਦੋਂ ਉਹ ਮਾਰਕਅਪ ਵਿੱਚ ਨਿਕਟ ਨਹੀਂ ਹਨ।
<label>
Email address
<input type="email" />
</label>
ਇੰਪੁਟ ਲੇਬਲ ਦੇ ਅੰਦਰ nested ਹੈ — ਕੋਈ 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 ਉੱਤੇ ਲੇਬਲ ਵਜੋਂ ਕਦੀ ਭਰੋਸਾ ਨਾ ਕਰੋ।