Đăng ký để truy cập
Đọc thêm nội dung này khi bạn đăng ký ngay hôm nay.
Một biểu mẫu dễ tiếp cận bắt đầu từ câu hỏi rất đơn giản: khi người dùng đi tới từng ô nhập liệu, họ có biết ô đó dùng để làm gì không? Với người nhìn thấy màn hình, câu trả lời thường nằm ở dòng chữ đặt cạnh ô nhập. Với người dùng trình đọc màn hình hoặc công nghệ hỗ trợ khác, câu trả lời phải nằm trong mã HTML.
Vì vậy, nhãn biểu mẫu không chỉ là phần trang trí giao diện. Nhãn là cách trang web đặt tên cho từng trường, giúp người dùng hiểu cần nhập thông tin gì, kiểm tra lại nội dung trước khi gửi và sửa lỗi khi có thông báo sai.
Nhãn biểu mẫu là gì?
Nhãn biểu mẫu là văn bản mô tả mục đích của một thành phần trong biểu mẫu, chẳng hạn như ô nhập tên, địa chỉ email, hộp kiểm, nút radio hoặc danh sách chọn. Trong HTML, cách phổ biến và ổn định nhất là dùng phần tử <label> và liên kết nhãn đó với trường nhập liệu tương ứng.
Ví dụ, nhãn “Địa chỉ email” cho biết ô nhập liệu đang yêu cầu địa chỉ email. Nếu liên kết giữa nhãn và ô nhập được thiết lập đúng, công nghệ hỗ trợ có thể đọc tên trường khi người dùng di chuyển tới ô đó. Người dùng không phải đoán một ô trống đang yêu cầu họ nhập thông tin nào.
Vì sao nhãn quan trọng với khả năng tiếp cận?
- Người dùng không nhìn thấy bố cục vẫn hiểu được trường nhập. Trình đọc màn hình cần một tên rõ ràng để thông báo mục đích của từng ô.
- Người dùng nhìn thấy màn hình cũng thao tác nhanh hơn. Nhãn rõ ràng giúp giảm nhầm lẫn, nhất là khi biểu mẫu dài hoặc có nhiều trường tương tự nhau.
- Lỗi nhập liệu dễ được xử lý hơn. Khi thông báo lỗi nhắc tới đúng tên trường, người dùng biết cần sửa phần nào.
- Nhóm thiết kế và phát triển dễ kiểm tra hơn. Một biểu mẫu có nhãn nhất quán thường dễ rà soát theo WCAG và các tiêu chí nội bộ về khả năng tiếp cận.
Không nên xem nhãn như một mẹo SEO riêng lẻ hoặc một cách tự động cải thiện hiệu suất. Giá trị chính của nhãn là làm cho biểu mẫu dễ hiểu, dễ dùng và dễ kiểm tra hơn. Khi nội dung biểu mẫu rõ ràng hơn, chất lượng trải nghiệm người dùng cũng tốt hơn.
Các thành phần cần phân biệt
| Thành phần | Dùng để làm gì | Lưu ý khi triển khai |
|---|---|---|
<label> |
Đặt tên cho một trường biểu mẫu. | Nên liên kết với trường bằng cặp for và id. |
| Placeholder | Đưa ra gợi ý ngắn hoặc ví dụ trong ô nhập. | Không thay thế nhãn vì nội dung này biến mất khi người dùng nhập. |
aria-label |
Cung cấp tên truy cập khi không thể đặt nhãn hiển thị. | Chỉ nên dùng khi mục đích của trường đã rõ trong ngữ cảnh thị giác. |
<fieldset> và <legend> |
Nhóm nhiều trường liên quan. | Hữu ích với nhóm nút radio, hộp kiểm hoặc các trường có cùng chủ đề. |
Cách gán nhãn biểu mẫu hiệu quả
1. Dùng <label> và khớp đúng for với id
Khi có thể, hãy dùng nhãn hiển thị. Thuộc tính for của <label> phải trùng với thuộc tính id của trường nhập liệu.
<label for="username">Tên người dùng</label>
<input type="text" id="username" name="username">Cách này tạo quan hệ rõ ràng giữa dòng chữ “Tên người dùng” và ô nhập tương ứng. Khi người dùng chọn hoặc di chuyển tới ô nhập, trình duyệt và công nghệ hỗ trợ có đủ thông tin để xác định tên trường.
2. Đặt nhãn gần trường biểu mẫu
Nhãn và trường nhập nên ở gần nhau về mặt thị giác. Với trường văn bản, nhãn thường nằm phía trên hoặc bên trái trường. Với checkbox và radio button, nhãn thường nằm bên phải lựa chọn.
Mục tiêu là để người dùng không phải đoán dòng chữ nào đang thuộc về ô nào. Khi bố cục có nhiều cột hoặc nhiều nhóm trường, khoảng cách và căn chỉnh cần được kiểm tra kỹ hơn.
3. Viết nhãn ngắn, cụ thể và không lẫn với hướng dẫn
Nhãn nên gọi tên thông tin cần nhập, không nên biến thành một câu hướng dẫn dài. “Địa chỉ email” thường rõ hơn “Vui lòng nhập địa chỉ email của bạn vào đây”. Nếu cần thêm điều kiện, hãy đặt hướng dẫn ở dòng mô tả riêng.
<label for="email">Địa chỉ email</label>
<p id="email-help">Dùng địa chỉ có thể nhận thông báo xác nhận.</p>
<input type="email" id="email" name="email" aria-describedby="email-help">Cách tách nhãn và mô tả giúp người dùng nghe được tên trường trước, sau đó mới nghe thêm điều kiện nhập liệu. Nếu muốn tìm hiểu rộng hơn về phần mô tả, có thể đọc thêm bài viết về nhãn và mô tả.
4. Không dùng placeholder thay cho nhãn
Placeholder có thể đưa ra ví dụ, nhưng không nên là tên duy nhất của trường. Khi người dùng bắt đầu nhập, placeholder thường không còn hiển thị. Người dùng cũng có thể quên yêu cầu ban đầu nếu phải quay lại kiểm tra sau đó.
<!-- Chưa đủ rõ: chỉ có placeholder -->
<input type="text" name="full-name" placeholder="Nhập họ tên">
<!-- Rõ hơn: có nhãn và placeholder chỉ làm ví dụ -->
<label for="full-name">Họ tên</label>
<input type="text" id="full-name" name="full-name" placeholder="Ví dụ: Nguyen Van Nam">5. Chỉ ẩn nhãn khi thật sự cần
Có những giao diện mà nhãn hiển thị gây lặp, ví dụ ô tìm kiếm đặt ngay cạnh nút “Tìm kiếm”. Khi đó, vẫn cần cung cấp tên cho trường trong mã. Có thể dùng nhãn được ẩn bằng CSS dành cho công nghệ hỗ trợ, hoặc dùng aria-label trong trường hợp ngữ cảnh đã đủ rõ.
<label class="sr-only" for="search">Tìm kiếm</label>
<input type="search" id="search" name="search">
<input type="search" name="site-search" aria-label="Tìm kiếm trong trang">Không nên dùng WAI-ARIA để che lấp một cấu trúc HTML có thể viết đúng ngay từ đầu. Với trường nhập thông thường, nhãn hiển thị vẫn là lựa chọn dễ hiểu nhất cho nhiều nhóm người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.