Đăng ký để truy cập
Đọc thêm nội dung này khi bạn đăng ký ngay hôm nay.
Việc gán nhãn cho các yếu tố của biểu mẫu là một bước quan trọng để nâng cao khả năng tiếp cận web. Để người dùng khiếm thị và những người sử dụng công nghệ hỗ trợ có thể hiểu và thao tác đúng với biểu mẫu, việc gán nhãn chính xác cho từng yếu tố là cần thiết. Bài viết này sẽ giải thích lý do tại sao việc gán nhãn cho các yếu tố biểu mẫu lại quan trọng, phương pháp gán nhãn hiệu quả, và các phương pháp tốt nhất để cải thiện khả năng tiếp cận.
Việc gán nhãn cho các yếu tố của biểu mẫu là gì?
Việc gán nhãn cho các yếu tố của biểu mẫu là việc liên kết văn bản mô tả (nhãn) với các yếu tố của biểu mẫu như ô nhập liệu hoặc nút. Nhãn này không chỉ giúp người dùng thị giác hiểu được ý nghĩa của các trường biểu mẫu mà còn hỗ trợ đầu ra âm thanh cho những người sử dụng trình đọc màn hình. Các yếu tố biểu mẫu được gán nhãn đúng cách giúp người dùng hiểu chính xác thông tin cần nhập.
Lý do tại sao nhãn biểu mẫu lại quan trọng
-
Cải thiện khả năng tiếp cận: Người dùng khiếm thị sử dụng trình đọc màn hình để thao tác với biểu mẫu. Khi các nhãn được thiết lập chính xác, trình đọc màn hình sẽ truyền tải đúng mục đích của từng trường biểu mẫu.
-
Cải thiện trải nghiệm người dùng: Nhãn rõ ràng giúp cung cấp biểu mẫu dễ sử dụng cho tất cả người dùng, giảm thiểu việc nhập sai và ngăn chặn lỗi khi gửi biểu mẫu.
-
Cải thiện SEO và hiệu suất: Các công cụ tìm kiếm cũng đánh giá cao nhãn, từ đó nâng cao chất lượng biểu mẫu. Ngoài ra, việc gán nhãn giúp cấu trúc biểu mẫu được tổ chức tốt hơn, góp phần cải thiện hiệu suất.
Các phương pháp gán nhãn hiệu quả
Để thực hiện gán nhãn hiệu quả, hãy xem xét các điểm sau:
1. Sử dụng phần tử <label>
Đối với mỗi yếu tố của biểu mẫu, hãy sử dụng phần tử <label> và tham chiếu thuộc tính id của yếu tố biểu mẫu tương ứng bằng thuộc tính for. Điều này giúp thiết lập mối liên kết giữa nhãn và ô nhập liệu.
<label for="username">Tên người dùng：</label>
<input type="text" id="username" name="username">
Phương pháp này cho phép trình đọc màn hình đọc ‘Tên người dùng’ trước khi nhắc người dùng nhập liệu vào ô tương ứng.
2. Đặt nhãn và các yếu tố của biểu mẫu gần nhau
Nhãn và các yếu tố biểu mẫu tương ứng nên được đặt gần nhau về mặt thị giác, để người dùng có thể hiểu được mối liên quan ngay từ cái nhìn đầu tiên. Thông thường, nhãn được đặt ở trên hoặc bên trái của yếu tố biểu mẫu.
3. Sử dụng nhãn có vai trò rõ ràng
Nhãn nên phản ánh chính xác nội dung và mục đích của ô nhập liệu. Thay vì sử dụng ‘Vui lòng nhập địa chỉ email’, hãy sử dụng các biểu hiện ngắn gọn và rõ ràng như ‘Địa chỉ email’.
<input type="email" id="email" name="email">
4. Không sử dụng placeholder thay cho nhãn
Placeholder chỉ được sử dụng để cung cấp gợi ý hoặc ví dụ, không thể thay thế cho nhãn. Mặc dù placeholder có thể tiện lợi về mặt thị giác, nhưng chúng có thể không được đọc lên, vì vậy hãy luôn sử dụng nhãn rõ ràng.
<input type="text" placeholder="Nhập họ tên">
<!-- Ví dụ tốt: Sử dụng nhãn một cách rõ ràng -->
<label for="name">Họ tên：</label>
<input type="text" id="name" name="name" placeholder="Ví dụ：Nguyen Van Nam">
5. Sử dụng nhãn ẩn
Nếu cần ẩn nhãn về mặt thị giác, hãy ẩn nó theo cách mà trình đọc màn hình có thể nhận diện được. Sử dụng thuộc tính aria-label hoặc lớp sr-only để thực hiện gán nhãn không dựa vào thị giác.
<input type="search" id="search" name="search" aria-label="Nhập từ khóa tìm kiếm">
6. Sử dụng <fieldset> và <legend> cho các yếu tố biểu mẫu được nhóm lại
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.