A <label> memberikan nama yang dapat diakses dan target klik yang lebih besar kepada kontrol formulir. Ada dua cara untuk menghubungkannya, dan melakukannya sangat penting untuk aksesibilitas.
for + id (explicit)Email address
for label cocok dengan id input. Ini berfungsi bahkan jika mereka tidak berdampingan dalam markup.
<label>
Email address
<input type="email" />
</label>
Input disarangkan di dalam label — tidak perlu 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 -->
A placeholder hilang ketika pengguna mengetik dan tidak diumumkan dengan andal — jangan pernah menggunakannya sebagai satu-satunya label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Gunakan aria-label (atau aria-labelledby) hanya ketika label yang terlihat benar-benar tidak mungkin.
Label yang terhubung dengan benar adalah salah satu praktik aksesibilitas paling berdampak untuk formulir — mereka memberikan nama kepada setiap kontrol untuk teknologi pendukung dan memperbesar target klik untuk semua orang.
Pilih <label> asli; kembali ke aria-label hanya jika diperlukan, dan jangan pernah mengandalkan placeholder sebagai label.