Về hướng dẫn WCAG 2.2 ‘3.2.1 Hành vi khi có tiêu điểm’ Level A
Mở đầu
Tiêu chí “3.2.1 Hành vi khi có tiêu điểm” của WCAG 2.2 yêu cầu khi các thành phần giao diện người dùng nhận tiêu điểm, ngữ cảnh không thay đổi tự động. Tiêu chí này rất quan trọng để đảm bảo người dùng không bị bối rối bởi các hành vi không mong muốn.
1. Khái quát tiêu chí
Yêu cầu
- Chỉ việc nhận tiêu điểm không được gây ra sự thay đổi ngữ cảnh
- Thay đổi ngữ cảnh bao gồm các yếu tố sau:
- Tải lại toàn bộ trang
- Mở hoặc đóng cửa sổ hoặc tab mới tự động
- Thay đổi lớn trong nội dung có thể làm thay đổi vị trí hiện tại của người dùng
2. Phương pháp triển khai
a. Không sử dụng sự kiện focus làm kích hoạt thay đổi
Thay vì thay đổi ngữ cảnh khi có tiêu điểm, sử dụng hành động rõ ràng của người dùng (như nhấp chuột hoặc nhấn phím Enter) làm kích hoạt.
Ví dụ: Thay đổi không phù hợp khi có tiêu điểm
<select onchange="location.href=this.value;">
<option value="page1.html">Trang 1</option>
<option value="page2.html">Trang 2</option>
</select>
Biện pháp cải thiện
<select id="navigation">
<option value="page1.html">Trang 1</option>
<option value="page2.html">Trang 2</option>
</select>
<button onclick="changePage()">Di chuyển</button>
<script>
function changePage() {
const select = document.getElementById('navigation');
location.href = select.value;
}
</script>
b. Nhắc nhở khi mở cửa sổ hoặc tab mới
Khi mở cửa sổ hoặc tab mới, thông báo rõ ràng cho người dùng
Ví dụ: Liên kết mở tab mới
<p><a href="example.html" target="_blank">Mở trong tab mới (cửa sổ mới)</a></p>
Biện pháp cải thiện
<p><a href="example.html" target="_blank">Mở trong tab mớiく<span aria-label="（Mở trong tab mới）"></span></a></p>
c. Sử dụng sự kiện activate
Được sử dụng làm kích hoạt cho ‘nhấp chuột’ hoặc ‘nhấn phím Enter’
Ví dụ: Thay đổi ngữ cảnh bằng nút bấm
<button onclick="changeContext()">Đến trang tiếp theo</button>
<script>
function changeContext() {
window.location.href = "nextPage.html";
}
</script>
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Nội dung tự động thay đổi khi có tiêu điểm
Ví dụ thất bại
<input type="text" onfocus="document.getElementById('message').innerText='Đã được tiêu điểm';">
<p id="message"></p>
Biện pháp cải thiện
- Thay vì sử dụng tiêu điểm, sử dụng hành động rõ ràng làm kích hoạt
b. Vấn đề mất tiêu điểm
Ví dụ thất bại
<input type="text" onfocus="this.blur();">
Vấn đề
- Không thể duy trì tiêu điểm để người dùng nhập liệu
Biện pháp cải thiện
- Không thay đổi tiêu điểm một cách cưỡng bức bằng script
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện trải nghiệm người dùng
- Việc loại bỏ các hành vi không mong muốn giúp người dùng dễ dàng tập trung vào nội dung hơn.
b. Đảm bảo quyền kiểm soát thao tác của người dùng
- Người dùng sẽ có thể hoàn thành thao tác theo ý muốn của mình.
c. Tính tương thích với công nghệ hỗ trợ
- Cung cấp môi trường mà công nghệ hỗ trợ như trình đọc màn hình hoạt động chính xác.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Dẫn hướng đến các biểu mẫu và liên kết bằng bàn phím.
- Xác nhận rằng không có hành vi không mong muốn khi có tiêu điểm.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ kiểm tra khả năng tiếp cận như Axe và WAVE để xác nhận.
Tóm tắt
Tiêu chí “3.2.1 Hành vi khi có tiêu điểm” của WCAG 2.2 nhằm ngăn ngừa sự thay đổi ngữ cảnh không mong muốn khi có tiêu điểm và cung cấp môi trường hoạt động thoải mái cho tất cả người dùng.
Điểm cần lưu ý khi triển khai
- Đảm bảo ngữ cảnh không thay đổi khi có tiêu điểm.
- Sử dụng nhấp chuột hoặc nhấn phím Enter làm kích hoạt.
- Nhắc nhở khi mở cửa sổ hoặc tab mới.
Đ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.