Đây là lỗi vừa ảnh hưởng accessibility, vừa ảnh hưởng trực tiếp đến UX và conversion rate. Sửa đúng là cải thiện trải nghiệm rõ rệt, không chỉ cho người khuyết tật mà cho tất cả người dùng.
Label trong form là gì
Label là phần mô tả ý nghĩa của một trường nhập liệu. Nó cho screen reader biết:
- Ô input này dùng để nhập thông tin gì
- Nhãn này gắn với input nào
Về mặt kỹ thuật, label được liên kết với input thông qua thuộc tính for và id.
Vì sao lỗi này xảy ra rất nhiều
Nguyên nhân phổ biến không nằm ở thiếu kiến thức, mà nằm ở thói quen thiết kế và triển khai.
- Input được tạo mà không có thẻ
<label> - Dùng placeholder thay cho label
- Ẩn label hoàn toàn vì lý do thẩm mỹ
- Form được build nhanh, ưu tiên UI hơn semantic
Placeholder có thể giúp người dùng nhìn thấy gợi ý ban đầu, nhưng khi bắt đầu nhập dữ liệu, placeholder biến mất và screen reader không còn thông tin để đọc.
Những vị trí dễ dính lỗi nhất
- Form đăng nhập, đăng ký
- Form tìm kiếm
- Form newsletter
- Checkout và thanh toán
- Form được build bằng JavaScript framework
Ví dụ sai thường gặp
<input type="email" placeholder="Email">
Input trên không có label, screen reader không thể xác định mục đích của trường nhập.
Ví dụ đúng chuẩn accessibility
Cách chuẩn và rõ ràng nhất:
<label for="email">Email</label>
<input type="email" id="email">
Label có thể hiển thị trực tiếp hoặc được ẩn bằng CSS nếu cần giữ UI gọn gàng.
Ẩn label đúng cách mà không phá accessibility
Nếu không muốn hiển thị label, có thể ẩn về mặt thị giác nhưng vẫn giữ cho screen reader:
<label for="email" class="visually-hidden">Email</label>
<input type="email" id="email">
Quan trọng là label vẫn tồn tại trong DOM và được liên kết đúng với input.
Khi nào nên dùng aria-label
Trong một số trường hợp đặc biệt, có thể dùng aria-label thay cho label:
<input type="search" aria-label="Tìm kiếm">
Tuy nhiên, label truyền thống vẫn là giải pháp ưu tiên vì:
- Rõ ràng hơn về mặt semantic
- Dễ bảo trì
- Ít rủi ro lỗi accessibility
Những sai lầm cần tránh
- Dùng placeholder làm label
- Dùng label nhưng không liên kết đúng for/id
- Dùng chung một label cho nhiều input
- Lạm dụng aria-label khi không cần thiết
Lợi ích khi sửa lỗi label trong form
Khi mỗi form field đều có label đúng chuẩn, bạn sẽ thấy:
- Screen reader đọc form chính xác và mạch lạc
- Trải nghiệm người dùng tốt hơn
- Giảm lỗi nhập sai dữ liệu
- Tăng tỷ lệ hoàn thành form và conversion
- Điểm accessibility audit cải thiện rõ rệt
Kết luận
Lỗi Form elements do not have associated labels không làm hỏng giao diện, nhưng làm hỏng trải nghiệm của rất nhiều người dùng. Chỉ cần đảm bảo mỗi input đều có label được liên kết đúng cách, bạn đã giải quyết triệt để một trong những lỗi accessibility quan trọng nhất, đồng thời cải thiện UX và hiệu quả form một cách rõ ràng.
Bình luận