Một <label> cho một form control một tên có accessibility và một vùng click lớn hơn. Có hai cách để liên kết chúng, và làm vậy là thiết yếu cho accessibility.
Cách 1: for + id (tường minh)
html
Email address
Một <label> cho một form control một tên có accessibility và một vùng click lớn hơn. Có hai cách để liên kết chúng, và làm vậy là thiết yếu cho accessibility.
for + id (tường minh)Email address
for của label khớp với id của input. Cách này hoạt động ngay cả khi chúng không nằm cạnh nhau trong markup.
<label>
Email address
<input type="email" />
</label>
Input được lồng bên trong label — không cần id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- click vào văn bản sẽ bật-tắt checkbox -->
<input placeholder="Email" /> <!-- ❌ biến mất khi gõ, tương phản kém, không phải label -->
Một placeholder biến mất khi người dùng gõ và không được thông báo một cách đáng tin cậy — đừng bao giờ dùng nó làm label duy nhất.
<input type="search" aria-label="Search products" /> <!-- tên có accessibility, không có label nhìn thấy -->
Dùng aria-label (hoặc aria-labelledby) chỉ khi một label nhìn thấy thực sự không khả thi.
Label được liên kết đúng cách là một trong những thực hành accessibility có tác động lớn nhất cho form — chúng cho mọi control một tên cho công nghệ hỗ trợ và mở rộng vùng click cho tất cả mọi người.
Hãy ưu tiên một <label> thực sự; chỉ dùng aria-label khi cần, và đừng bao giờ dựa vào placeholder làm label.