“Thông điệp trạng thái” trong tiêu chuẩn khả năng truy cập web là một chức năng quan trọng giúp thông báo tình trạng hiện tại đến người dùng khi có sự thay đổi nội dung động, như gửi biểu mẫu, thông báo lỗi hoặc cập nhật trang. Việc cung cấp thông điệp trạng thái một cách phù hợp giúp người dùng có khiếm khuyết về thị giác hoặc nhận thức dễ dàng sử dụng trang web một cách an toàn và thuận tiện. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về vai trò và cách triển khai “Thông điệp trạng thái” trong khả năng truy cập web.
Thông điệp trạng thái là gì?
“Thông điệp trạng thái” là những thông báo được hiển thị theo thời gian thực để thông báo kết quả hoặc tình trạng của các thao tác mà người dùng thực hiện (ví dụ: gửi dữ liệu, tải trang, xảy ra lỗi, v.v.). Điều này giúp những người dùng khó nhận biết sự thay đổi về mặt trực quan trên trang web dễ dàng hiểu được tình trạng hiện tại và các bước tiếp theo cần thực hiện.
Ví dụ về thông điệp trạng thái
- Thông điệp thành công: “Biểu mẫu đã được gửi thành công”
- Thông điệp lỗi: “Địa chỉ email không hợp lệ”
- Thông báo đang tải: “Đang tải dữ liệu, vui lòng chờ một chút”
Tầm quan trọng của thông điệp trạng thái
1. Cải thiện tính dễ sử dụng cho người dùng
Nhờ có thông điệp trạng thái, người dùng khiếm thị hoặc người có khuyết tật nhận thức sẽ dễ dàng hiểu được kết quả thao tác hoặc thông báo lỗi, từ đó sử dụng trang web một cách an toàn và tự tin. Việc kết quả thao tác được làm rõ giúp ngăn ngừa các thao tác sai và giảm bớt sự nhầm lẫn, nâng cao trải nghiệm người dùng.
2. Hỗ trợ công nghệ trợ giúp khả năng truy cập
Người dùng sử dụng các công nghệ trợ giúp như trình đọc màn hình có thể hiểu được sự thay đổi tình trạng thông qua các thông điệp trạng thái. Đặc biệt, bằng cách sử dụng các thuộc tính như aria-live và role để cấu hình thông điệp, trạng thái sẽ được đọc tự động, giúp thao tác trên trang web trở nên mượt mà hơn.
Cách triển khai thông điệp trạng thái
Để đảm bảo tính khả năng truy cập, hãy chú ý các điểm triển khai sau khi cài đặt thông điệp trạng thái.
1. Sử dụng thuộc tính aria-live để thiết lập thông báo tự động
Bằng cách sử dụng thuộc tính aria-live, các thông điệp động sẽ được trình đọc màn hình tự động đọc to. Việc cấu hình thuộc tính này cũng cho phép điều chỉnh mức độ ưu tiên của việc đọc.
<div aria-live="polite" role="status">
Biểu mẫu đã được gửi thành công
</div>
- aria-live=“polite”：Thông báo tình trạng sẽ được cung cấp vào thời điểm mà công việc của người dùng không bị gián đoạn.
- aria-live=“assertive”：Các thông điệp quan trọng sẽ được đọc ngay lập tức. Điều này rất phù hợp với các thông báo có độ ưu tiên cao như thông báo lỗi.
2. Sử dụng role=“status” để định nghĩa vai trò của thông điệp
role=“status” là một vai trò được sử dụng để chỉ ra sự thay đổi trạng thái quan trọng. Trình đọc màn hình sẽ nhanh chóng đọc các thông điệp có thuộc tính này được cài đặt.
<div role="status" aria-live="polite">
Đơn hàng của bạn đã được xác nhận. Chúng tôi đang chuẩn bị giao hàng.
</div>
3. Sử dụng thuộc tính aria-atomic để thiết lập việc đọc toàn bộ thông điệp
Khi thông điệp được cập nhật, nếu chỉ thông báo một phần, người dùng có thể bị nhầm lẫn. Bằng cách sử dụng aria-atomic=“true”, bạn có thể thiết lập để toàn bộ thông điệp được đọc lại mỗi khi có sự thay đổi.
<div aria-live="polite" aria-atomic="true">
Bạn đã nhận được tin nhắn mới
</div>
4. Hiển thị thông điệp vào thời điểm thích hợp
Khi cập nhật thông điệp trạng thái trong thời gian thực, hãy cấu hình để thông điệp hiển thị đồng bộ với các thao tác cụ thể của người dùng (ví dụ: khi nhấn nút gửi biểu mẫu).
<button onclick="showMessage()">Gửi</button>
<div id="statusMessage" aria-live="assertive" role="alert" style="display: none;">
Đã xảy ra lỗi. Vui lòng thử lại
</div>
<script>
function showMessage() {
document.getElementById("statusMessage").style.display = "block";
}
</script>
Những lưu ý khi triển khai thông điệp trạng thái
- Không làm tăng số lượng thông điệp quá mức cần thiết: Nếu có quá nhiều thông báo không cần thiết, người dùng có thể bỏ lỡ những thông điệp quan trọng.
- Nội dung thông điệp cần ngắn gọn: Thông điệp trạng thái nên được truyền đạt bằng những từ ngữ ngắn gọn và dễ hiểu, giúp tránh sự nhầm lẫn và người dùng có thể hiểu nhanh chóng nội dung.
- Thực hiện kiểm tra với công nghệ trợ giúp: Hãy kiểm tra thông điệp trạng thái bằng các công cụ như trình đọc màn hình để đảm bảo rằng thông điệp được đọc lên một cách chính xác.
Tóm tắt
Việc triển khai thông điệp trạng thái một cách phù hợp giúp người dùng dễ dàng nắm bắt được tình trạng hiện tại và nội dung lỗi, từ đó sử dụng nội dung web một cách an tâm. Hơn nữa, sự kết hợp với công nghệ trợ giúp sẽ cải thiện khả năng truy cập, tạo ra một trang web dễ sử dụng cho tất cả mọi người. Hãy thiết kế thông điệp trạng thái theo các nguyên tắc cơ bản để cung cấp trải nghiệm thao tác thoải mái cho mọi 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.