Nhãn đơn cho hai đầu vào

Question

Tôi hiện đang thêm một số dữ liệu nhập ngày vào biểu mẫu. Tôi có đầu vào 'Ngày bắt đầu' và 'Ngày kết thúc' nhưng chỉ muốn sử dụng một nhãn ('Ngày') cho cả hai đầu vào.

Có thể thực hiện việc này không? Các vấn đề về khả năng tiếp cận là gì?

Suy nghĩ hiện tại của tôi là có nhãn 'Ngày' được hiển thị sau đó có hai nhãn ẩn cho mỗi đầu vào cho trình đọc màn hình, v.v. Đây có phải là cách để đi không? Có bất kỳ ví dụ nào về các trang web lớn đang thực hiện loại điều này (trang web của Chính phủ nếu có thể) không?

Đây là một dự án có thể do người dùng của cơ quan chính phủ sử dụng để có các quy tắc nghiêm ngặt về việc tuân thủ khả năng truy cập.

Answer 1

Trong trường hợp này tôi nghĩ rằng đánh dấu tốt nhất sẽ được quấn đầu vào trong một fieldset, sử dụng một legend cho "Ngày", sử dụng labels cho cả inputs và ẩn các nhãn:

HTML

<fieldset> 
<legend>Dates</legend> 
<label for="startdate">Start Date</label> 
<input type="text" name="startdate" id="startdate" placeholder="Start Date"> 
<label for="enddate">End Date</label> 
<input type="text" name="enddate" id="enddate" placeholder="End Date"> 
</fieldset> 

CSS

fieldset { 
    border: none; 
} 
label { 
    margin-left: -999em; 
} 
input { 
    display: block; 
} 

Fiddle here

Xem thêm: WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements

Answer 2

Vấn đề ở đây là bạn chỉ có thể chỉ định một for cho mỗi nhãn. Tôi sẽ tưởng tượng, cho các mục đích tiếp cận tốt nhất nên hiển thị hai labels một cho mỗi ngày. Bằng cách này, bất kỳ ai sử dụng trình đọc màn hình, v.v. sẽ nhận được nhãn hợp lệ cho mỗi đầu vào.

<label for="x">x name</label><input name="x"/> 
<label for="y">y name</label><input name="y"/> 

Answer 3

Tôi nghĩ đặt cược tốt nhất của bạn là bao gồm nhãn với mỗi đầu vào. Sau đó cho nhãn mà bạn không muốn thực sự hiển thị trên trang chỉ có thể được đặt ra trang sử dụng CSS qua

.hide { 
    position: absolute; 
    left: -9999em; 
} 

... hoặc một cái gì đó tương tự