Làm cho hộp kiểm và nhãn radio có thể nhấp được

Question

Một số lượng lớn các trang web (tôi có thể nói nhiều nhất?) Không làm cho các nhãn có thể nhấp cho hộp kiểm và đầu vào radio của chúng. Nó có vẻ là một khả năng sử dụng rất lớn cho nỗ lực rất ít. Có bất kỳ vấn đề về khả năng tương thích/chức năng/khả năng sử dụng nào với việc sử dụng <label> có thể ngăn cản các nhà phát triển sử dụng thẻ này không?

Edit: Thậm chí StackOverflow dường như phạm tội này, ví dụ, khi hỏi một câu hỏi, các Thông báo hàng ngày của bất kỳ câu trả lời mới nhãn hộp kiểm là không nhấp được.

Answer 1

Không có lý do nào khác ngoài sự lười biếng. <label> s rất cần thiết cho khả năng truy cập và cũng rất tiện dụng cho những người có mục tiêu kém với số lần nhấp chuột của chúng tôi :)

Answer 2

<label> là thẻ HTML thuần túy, không yêu cầu JavaScript. Tôi cho rằng tất cả trình duyệt (chính) hỗ trợ thẻ này, vì nó rất dễ thực hiện.

Rất nhiều các nhà phát triển không sử dụng nó vì:

• nó đòi hỏi nỗ lực nhiều hơn (thêm tất cả các thẻ ở khắp mọi nơi)
• họ không biết về nó tồn tại
• họ không nghĩ rằng đó là tiện lợi?!

Nhưng không có lý do gì để không sử dụng thẻ. Trừ khi bạn là rất bị giới hạn với băng thông của mình, có thể?

Answer 3

Không, không có vấn đề gì với điều đó, nhưng tiếc là đây là một trong số most ignored html tags. Đồng ý, thẻ này là cực kỳ quan trọng vì lý do khả năng truy cập và những gì là nhiều hơn khi nói đến bố trí cho các thiết bị nhỏ như điện thoại di động, bạn không thể sống mà không có điều này.

Answer 4

Khó khăn duy nhất tôi có thể nghĩ là các điều khiển biểu mẫu của bạn cần phải có thuộc tính ID và thuộc tính ID cần phải là duy nhất trong trang của bạn.

Nếu bạn tạo các trường biểu mẫu theo lập trình, bạn sẽ phải tạo một ID duy nhất cho từng trường trong mỗi trang mà chúng xuất hiện. Điều này có thể hình dung là một vấn đề.

Nhưng nói chung, vâng, tôi nghĩ chỉ là những người lập trình không có nó trong đầu.

Trong ASP.NET WebForms (hoặc bất kỳ tên nào được gọi là), bạn muốn thuộc tính AssociatedControlID trên phần tử <asp:Label>.

Answer 5

Và đây là demonstration cho những người đang tìm cách thực hiện.

Có một cách để kết nối các văn bản gần một yếu tố hình thức với các yếu tố bản thân, do đó, hoặc ai có thể được bấm để kích hoạt điều khiển:

những gì bạn muốn với đồ uống của bạn?

<label for="ice1"><input type="checkbox" name="withice" id="ice1">ice</label> 
<label for="ice2"><input type="checkbox" name="withlid" id="ice2">plastic lid</label> 
<label for="ice3"><input type="checkbox" name="withstraw" id="ice3">straw</label>