Hướng dẫn WCAG 2.2 – 3.2.2 Hành vi khi nhập liệu" Cấp A
Mở đầu
Tiêu chí “3.2.2 Hành vi khi nhập liệu” của WCAG 2.2 yêu cầu khi thay đổi cài đặt của các thành phần giao diện người dùng, ngữ cảnh không được thay đổi tự động mà không có thông báo trước. Tiêu chí này nhằm mục đích ngăn người dùng bị bối rối bởi các hành vi của trang web không như dự đoán.
1. Khái quát tiêu chí
Yêu cầu
- Khi ngữ cảnh thay đổi do hành động của người dùng, cần phải thông báo trước về hành vi đó.
- Sự thay đổi ngữ cảnh bao gồm các điều sau:
- Sự mở và đóng tự động của trang hoặc cửa sổ mới.
- Tải lại toàn bộ trang.
- Di chuyển vị trí focus.
2. Phương pháp triển khai
a. Sử dụng nút submit
Khi người dùng xác nhận hành động, việc thực hiện hành động sẽ xảy ra thông qua việc nhấp vào nút một cách rõ ràng.
Ví dụ: Sau khi chọn, hành động sẽ được thực hiện khi nhấn nút submit
<form action="process.php" method="post">
<label for="options">Cung cấp các lựa chọn：</label>
<select id="options" name="options">
<option value="1">Lựa chọn 1</option>
<option value="2">Lựa chọn 2</option>
</select>
<button type="submit">Gửi</button>
</form>
b. Ngăn chặn sự thay đổi ngữ cảnh bằng sự kiện onchange
Khi sử dụng sự kiện onchange, không được tự động thay đổi ngữ cảnh mà phải để người dùng thực hiện hành động mong muốn để kích hoạt thay đổi đó.
Ví dụ: Tránh việc tự động chuyển hướng khi sử dụng sự kiện onchange
<select id="navigation" onchange="document.getElementById('navigateBtn').disabled = false;">
<option value="home">Trang chủ</option>
<option value="about">Tổng quan</option>
<option value="contact">Liên hệ</option>
</select>
<button id="navigateBtn" onclick="changePage()" disabled>Di chuyển</button>
<script>
function changePage() {
const select = document.getElementById('navigation');
location.href = select.value + ".html";
}
</script>
c. Thông báo trước cho người dùng
Trước khi hành động xảy ra, cần phải truyền đạt rõ ràng nội dung cho người dùng.
Ví dụ: Liên kết mở cửa sổ mới
<p><a href="example.html" target="_blank">Mở trong tab mới</a></p>
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Ngữ cảnh thay đổi tự động
Ví dụ thất bại
<select onchange="location.href=this.value;">
<option value="home.html">Trang chủ</option>
<option value="about.html">Tổng quan</option>
</select>
Vấn đề
- Việc chuyển trang chỉ bằng cách người dùng chọn sẽ gây ra hành vi không mong muốn.
Biện pháp cải thiện
<select id="navigation">
<option value="home.html">Trang chủ</option>
<option value="about.html">Tổng quan</option>
</select>
<button onclick="changePage()">Di chuyển</button>
<script>
function changePage() {
const select = document.getElementById('navigation');
location.href = select.value;
}
</script>
b. Cửa sổ mới mở mà không có thông báo trước
Ví dụ thất bại
<p><a href="example.html" target="_blank">Ở đây</a></p>
Vấn đề
- Người dùng không thể dự đoán được việc cửa sổ mới sẽ mở
Biện pháp cải thiện
<p><a href="example.html" target="_blank">Mở trong tab mới</a></p>
4. Lợi ích của khả năng truy cập (accessibility)
a. Tăng khả năng dự đoán của người dùng
- Bằng cách thông báo trước khi ngữ cảnh thay đổi, người dùng sẽ dễ dàng dự đoán được hành vi.
b. Cải thiện khả năng sử dụng
- Bằng cách để người dùng hoàn thành thao tác một cách có chủ ý, sẽ giúp ngăn ngừa sự nhầm lẫn.
c. Tính tương thích với các công nghệ hỗ trợ
- Việc trình đọc màn hình nhận diện chính xác sự thay đổi ngữ cảnh sẽ cải thiện khả năng tiếp cận.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Vận hành các thành phần và kiểm tra xem có sự thay đổi ngữ cảnh không mong muốn nào hay không.
- Khi sự thay đổi ngữ cảnh xảy ra, hãy đảm bảo rằng có thông báo trước.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra xem có sự thay đổi ngữ cảnh tự động hay không.
Tóm tắt
Tiêu chí “3.2.2 Hành vi khi nhập liệu” của WCAG 2.2 nhằm ngăn chặn sự thay đổi ngữ cảnh không mong muốn khi người dùng thao tác với giao diện người dùng, đồng thời cung cấp trải nghiệm dễ dự đoán và dễ sử dụng cho người dùng.
Điểm cần lưu ý khi triển khai
- Khuyến khích thao tác rõ ràng bằng cách sử dụng nút submit.
- Không tạo ra việc chuyển hướng tự động hoặc mở cửa sổ mới mà không có thông báo trước.
- Đảm bảo rằng việc chọn hoặc nhập dữ liệu không gây ra sự thay đổi ngữ cảnh.
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập cho 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.