“Nhận diện lỗi” trong khả năng tiếp cận web là tiêu chuẩn giúp người dùng nhận biết và sửa chữa các sai sót khi nhập liệu hoặc thao tác. Khi xảy ra lỗi trong các biểu mẫu hoặc trường nhập liệu, cần thông báo rõ ràng về mục nào bị lỗi và lỗi đó là gì. Điều này đặc biệt quan trọng đối với những người dùng có khiếm khuyết về thị giác hoặc nhận thức, để thông điệp về lỗi có thể được truyền tải một cách chính xác. Bài viết này sẽ giải thích cách thực hiện việc nhận diện lỗi và các điểm cần lưu ý khi triển khai.
Lý do cần thiết phải nhận diện lỗi
Nếu lỗi không được nhận diện hoặc hiển thị thông báo lỗi không phù hợp, có thể xảy ra những vấn đề sau:
-
Không thể hiểu nội dung đã nhập
Nếu không biết lỗi xảy ra ở đâu, người dùng sẽ bối rối không biết cần sửa điều gì. -
Sự giảm sút trải nghiệm người dùng
Nếu thông báo lỗi khó hiểu, thao tác sẽ không diễn ra suôn sẻ, dẫn đến giảm mức độ hài lòng của người dùng. -
Thiếu khả năng tiếp cận
Nếu người khiếm thị sử dụng trình đọc màn hình không thể nhận biết lỗi, việc sửa lỗi sẽ trở nên khó khăn và dẫn đến việc khó sử dụng trang web.
Hướng dẫn để thực hiện nhận diện lỗi
WCAG（Web Content Accessibility Guidelines）đã đưa ra các tiêu chuẩn để nhận diện lỗi, đặc biệt chú trọng vào các điểm sau:
1. Thông báo lỗi rõ ràng và ngắn gọn
Khi xảy ra lỗi, hãy hiển thị thông báo rõ ràng và cụ thể để người dùng dễ hiểu. Ví dụ, nếu thiếu thông tin đầu vào, hãy hiển thị thông báo như: “Địa chỉ email là bắt buộc.”
<label for="email">Địa chỉ email</label>
<input type="email" id="email" required aria-describedby="error-email">
<span id="error-email" class="error" role="alert">Địa chỉ email là bắt buộc</span>
2. Nhấn mạnh lỗi bằng hình ảnh trực quan
Nhấn mạnh các trường xảy ra lỗi bằng màu sắc hoặc đường viền để người dùng dễ dàng nhận biết lỗi một cách trực quan. Đặc biệt, đối với người dùng có khiếm khuyết về thị giác, nên bổ sung thêm biểu tượng hoặc văn bản thông báo lỗi thay vì chỉ sử dụng màu sắc.
.error {
color: red;
font-weight: bold;
border: 1px solid red;
}
3. Thông báo lỗi tương thích với trình đọc màn hình
Hãy sử dụng thuộc tính ARIA để giúp người dùng sử dụng trình đọc màn hình nhận biết được thông báo lỗi. Ví dụ, sử dụng role=“alert” hoặc aria-live=“assertive” để thông báo lỗi ngay lập tức theo thời gian thực.
<label for="username">ユーザー名</label>
<input type="text" id="username" required aria-describedby="error-username">
<span id="error-username" class="error" role="alert" aria-live="assertive">ユーザー名は必須項目です。</span>
4. Hướng dẫn hỗ trợ nhập liệu và cách sửa lỗi
Việc cung cấp thông điệp hướng dẫn cụ thể về cách sửa lỗi là rất quan trọng. Ví dụ, nếu định dạng ngày là “YYYY/MM/DD”, khi xảy ra lỗi, hãy bổ sung giải thích như: “Vui lòng nhập ngày theo định dạng YYYY/MM/DD” để người dùng dễ dàng chỉnh sửa.
Danh sách kiểm tra khi triển khai nhận diện lỗi
-
Thông báo lỗi có dễ hiểu hay không Hãy đảm bảo thông báo sử dụng ngôn ngữ đơn giản, tránh các thuật ngữ chuyên môn để người dùng có thể hiểu ngay lập tức.
-
Thông báo lỗi có được truyền đạt qua trình đọc màn hình hay không Thực tế sử dụng trình đọc màn hình để kiểm tra xem thông báo lỗi có được đọc chính xác hay không.
-
Có phương pháp nhấn mạnh ngoài việc sử dụng màu sắc hay không Hãy đảm bảo rằng ngoài màu sắc, còn có sự nhấn mạnh bằng biểu tượng hoặc văn bản, để hỗ trợ cả những người mắc chứng mù màu.
Tóm tắt
Việc nhận diện lỗi là một yếu tố không thể thiếu để đảm bảo mọi người dùng có thể sử dụng biểu mẫu web một cách thoải mái. Đặc biệt, từ góc độ khả năng tiếp cận, việc nhấn mạnh trực quan vị trí xảy ra lỗi và đảm bảo rằng lỗi có thể được nhận diện qua trình đọc màn hình là rất quan trọng. Hãy cung cấp thông báo lỗi rõ ràng và dễ hiểu, hướng đến mục tiêu tạo ra một trang web thân thiện với tất cả 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.