એક <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 પર લેબલ તરીકે નિર્ભર ન રહો.