Isang <label> ay nagbibigay sa form control ng accessible name at mas malaking click target. May dalawang paraan upang iugnay ang mga ito, at ang paggawa nito ay mahalaga para sa accessibility.
Isang <label> ay nagbibigay sa form control ng accessible name at mas malaking click target. May dalawang paraan upang iugnay ang mga ito, at ang paggawa nito ay mahalaga para sa accessibility.
forid<label for="email">Email address</label>
<input id="email" type="email" />
Ang label for ay tumutugma sa input id. Ito ay gumagana kahit hindi sila magkatabing nakalagay sa markup.
<label>
Email address
<input type="email" />
</label>
Ang input ay nakatuon sa loob ng label — walang kailangan na 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 -->
Ang placeholder ay nawala kapag ang user ay nagtipe at ay hindi mabilis na inanunsyo — huwag kailanman gamitin ito bilang ang tanging label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Gamitin aria-label (o aria-labelledby) lamang kapag ang isang nakikitang label ay tunay na hindi posible.
Ang tamang naugnay na label ay isa sa pinaka-epektibong pagsasanay ng accessibility para sa mga form — nagbibigay sila sa bawat kontrol ng pangalan para sa assistive tech at pinalaki ang mga click target para sa lahat.
Piliin ang tunay na <label>; bumaling sa aria-label lamang kung kinakailangan, at huwag kailanman umasa sa placeholder bilang label.