Trong tiêu chuẩn khả năng tiếp cận web, “trợ giúp phụ thuộc vào ngữ cảnh có sẵn” đề cập đến việc cung cấp thông tin trợ giúp để hỗ trợ người dùng hiểu và giải quyết vấn đề ngay lập tức khi thao tác hoặc nhập liệu. Chức năng này giúp người dùng thực hiện các thao tác và nhập liệu đúng cách trong thời gian thực, qua đó ngăn chặn các lỗi hoặc thao tác sai. Đặc biệt, đối với người cao tuổi hoặc người khuyết tật, trợ giúp phụ thuộc vào ngữ cảnh là một yếu tố quan trọng để nâng cao đáng kể tính dễ sử dụng của trang web.
Tầm quan trọng của trợ giúp phụ thuộc vào ngữ cảnh
Nếu không cung cấp trợ giúp phụ thuộc vào ngữ cảnh, có thể xảy ra các vấn đề sau:
-
Người dùng có thể bị nhầm lẫn hoặc thao tác sai
Người dùng có thể bối rối khi thao tác với biểu mẫu hoặc giao diện, dẫn đến khả năng nhập sai tăng lên. -
Tăng gánh nặng hỗ trợ
Việc không cung cấp trợ giúp sẽ làm tăng số trường hợp người dùng phải hỏi về cách thao tác, dẫn đến gánh nặng cho bộ phận hỗ trợ khách hàng tăng lên. -
Tỷ lệ người dùng rời bỏ tăng lên
Người dùng có thể bối rối khi thao tác, dẫn đến khả năng họ rời khỏi trang web tăng cao.
Do đó, việc thiết lập trợ giúp phụ thuộc vào ngữ cảnh là rất quan trọng để nâng cao trải nghiệm người dùng và tăng cường độ tin cậy của trang web.
Cách triển khai trợ giúp phụ thuộc vào ngữ cảnh
1. Hỗ trợ tức thì bằng tooltip
Đặt tooltip gần các trường nhập liệu hoặc nút, hiển thị gợi ý khi người dùng di chuột qua. Ví dụ: đối với trường nhập mật khẩu, thiết lập tooltip hiển thị các yêu cầu như “ít nhất 8 ký tự, bao gồm cả chữ và số”.
<label for="password">Mật khẩu</label>
<input type="password" id="password" aria-describedby="password-help">
<span id="password-help" role="tooltip">Mật khẩu phải có ít nhất 8 ký tự, bao gồm cả chữ và số</span>
2. Thông báo lỗi theo thời gian thực khi nhập liệu
Hiển thị thông báo lỗi theo thời gian thực nếu người dùng nhập không đúng điều kiện. Ví dụ: trong trường nhập địa chỉ email, nếu định dạng không đúng, lỗi sẽ được hiển thị ngay lập tức.
<label for="email">Địa chỉ email</label>
<input type="email" id="email" aria-describedby="email-help" oninput="validateEmail()">
<span id="email-help" role="alert">Vui lòng nhập địa chỉ email hợp lệ（Ví dụ: user@example.com）</span>
<script>
function validateEmail() {
// Mã kiểm tra định dạng địa chỉ email
}
</script>
3. Đặt nút “Trợ giúp” để cung cấp hướng dẫn chi tiết
Đối với các biểu mẫu hoặc giao diện yêu cầu thao tác phức tạp, đặt nút “Trợ giúp” bên cạnh từng trường nhập liệu để hiển thị giải thích chi tiết dưới dạng cửa sổ bật lên hoặc trong một cửa sổ mới.
<button aria-haspopup="dialog" onclick="openHelp()">Trợ giúp</button>
<script>
function openHelp() {
// Mã hiển thị nội dung trợ giúp
}
</script>
4. Tăng cường hỗ trợ công nghệ trợ giúp bằng thuộc tính ARIA
Sử dụng thuộc tính ARIA để đảm bảo các tooltip hoặc thông báo lỗi được đọc chính xác cho người dùng sử dụng trình đọc màn hình. Ví dụ, sử dụng aria-describedby để liên kết thông báo trợ giúp.
Những lưu ý khi triển khai trợ giúp phụ thuộc vào ngữ cảnhs
- Sử dụng ngôn từ đơn giản và rõ ràng: Đảm bảo thông điệp trợ giúp ngắn gọn và dễ hiểu để người dùng có thể nắm bắt ngay lập tức.
- Cung cấp trợ giúp theo thời gian thực: Đặt trợ giúp ở vị trí mà người dùng có thể truy cập ngay khi gặp khó khăn.
- Hỗ trợ trình đọc màn hình: Sử dụng thuộc tính ARIA để đảm bảo thông tin trợ giúp được truyền tải chính xác qua các công nghệ hỗ trợ.
Tóm tắt
Việc áp dụng trợ giúp phụ thuộc vào ngữ cảnh là một yếu tố quan trọng để trang web trở nên dễ sử dụng đối với tất cả người dùng. Các biện pháp như hiển thị tức thì tooltip hoặc thông báo lỗi, đặt nút trợ giúp,… giúp cung cấp sự hỗ trợ phù hợp, mang lại sự yên tâm cho người dùng khi thao tác. Hãy cân nhắc triển khai trợ giúp phụ thuộc vào ngữ cảnh để nâng cao khả năng tiếp cận của trang web.
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.