Hướng dẫn WCAG 2.2 ‘2.5.7 Thao tác kéo’ Mức AA
Mở đầu
Tiêu chuẩn ‘2.5.7 Thao tác kéo’ trong WCAG 2.2 yêu cầu đảm bảo rằng đối với các chức năng cần thao tác kéo, người dùng có thể thực hiện cùng một thao tác bằng cách sử dụng một con trỏ duy nhất khác (ví dụ: nhấp chuột, chạm). Tiêu chuẩn này được thiết lập nhằm xem xét sự khó khăn của người dùng khi thực hiện thao tác kéo và giảm thiểu nguy cơ thao tác sai.
1. Khái quát tiêu chí
Yêu cầu
- Đối với các chức năng yêu cầu thao tác kéo, cần phải cung cấp phương pháp thay thế không phải kéo (ví dụ: nhấp chuột hoặc chạm bằng một con trỏ duy nhất).
- Khi thao tác kéo là cần thiết về bản chất (ví dụ: nhập chữ ký) hoặc khi chức năng phụ thuộc vào trình duyệt của người dùng, sẽ không áp dụng tiêu chuẩn này.
2. Phương pháp triển khai
a. Cung cấp phương án thay thế cho thao tác kéo
Đảm bảo rằng các chức năng có thể thực hiện bằng thao tác kéo cũng có thể được thực hiện bằng các phương pháp khác như nút bấm hoặc thanh trượt.
Ví dụ: Cung cấp nút bấm thay vì điều khiển thanh trượt bằng thao tác kéo
HTML
<div>
<button id="decrease">-</button>
<input type="range" id="slider" min="0" max="100">
<button id="increase">+</button>
</div>
JavaScript
const slider = document.getElementById('slider');
document.getElementById('decrease').addEventListener('click', () => {
slider.value = Math.max(slider.min, slider.value - 1);
});
document.getElementById('increase').addEventListener('click', () => {
slider.value = Math.min(slider.max, parseInt(slider.value) + 1);
});
- Cho phép thay đổi giá trị của thanh trượt bằng thao tác nhấn nút
b. Thực hiện thao tác kéo bằng cách nhấp chuột
Cung cấp giao diện kiểu nhấp chuột mô phỏng thao tác kéo
Ví dụ: Di chuyển phần tử bằng cách nhấp chuột
HTML
<div id="box" style="width: 50px; height: 50px; background: red;"></div>
<button id="moveLeft">Di chuyển sang trái</button>
<button id="moveRight">Di chuyển sang phải</button>
JavaScript
const box = document.getElementById('box');
document.getElementById('moveLeft').addEventListener('click', () => {
box.style.transform = 'translateX(-50px)';
});
document.getElementById('moveRight').addEventListener('click', () => {
box.style.transform = 'translateX(50px)';
});
- Đảm bảo rằng người dùng có thể thay đổi vị trí bằng cách nhấp chuột thay vì kéo
c. Tận dụng menu ngữ cảnh
Cung cấp thao tác thông qua menu chuột phải hoặc menu thả xuống
Ví dụ: Di chuyển mục bằng menu ngữ cảnh
HTML
<div id="item" style="width: 50px; height: 50px; background: blue;"></div>
<select id="moveOptions">
<option value="none">Vui lòng chọn</option>
<option value="left">Di chuyển sang trái</option>
<option value="right">Di chuyển sang phải</option>
</select>
JavaScript
const item = document.getElementById('item');
document.getElementById('moveOptions').addEventListener('change', (event) => {
if (event.target.value === 'left') {
item.style.transform = 'translateX(-50px)';
} else if (event.target.value === 'right') {
item.style.transform = 'translateX(50px)';
}
});
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Chỉ phụ thuộc vào thao tác kéo
Ví dụ thất bại
- Chức năng di chuyển phần tử chỉ phụ thuộc vào thao tác kéo
Biện pháp cải thiện
- Cung cấp phương án thay thế có thể thao tác bằng nút bấm hoặc menu
b. Không có phương án thay thế cho thao tác kéo thả
Ví dụ thất bại
- Chỉ có thể chọn phạm vi bằng thao tác kéo thả, không có phương pháp thao tác khác.
Biện pháp cải thiện
- Cho phép chọn phạm vi bằng cách nhấp chuột hoặc sử dụng bàn phím.
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện khả năng thao tác
- Ngay cả những người dùng gặp khó khăn với thao tác kéo thả cũng sẽ có thể thao tác một cách dễ dàng.
b. Ngăn ngừa thao tác sai
- Giảm thiểu thao tác sai trên màn hình nhỏ hoặc trong môi trường không ổn định.
c. Cải thiện trải nghiệm người dùng
- Bằng cách cung cấp nhiều phương thức thao tác, người dùng có thể có trải nghiệm trực quan và linh hoạt hơn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận xem có phương án thay thế nào được cung cấp cho các chức năng yêu cầu thao tác kéo thả hay không.
- Kiểm tra xem có thể thực hiện chức năng tương tự bằng thao tác nhấp chuột hoặc bàn phím không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem thao tác kéo thả có phải là bắt buộc hay không.
Tóm tắt
Tiêu chí ‘2.5.7 Thao tác kéo thả’ trong WCAG 2.2 nhằm mục đích cung cấp phương án thay thế có thể thao tác bằng một con trỏ cho người dùng gặp khó khăn với thao tác kéo thả.
Điểm cần lưu ý khi triển khai
- Cung cấp giao diện có thể thay thế bằng nút bấm hoặc nhấp chuột
- Áp dụng thiết kế không phụ thuộc vào thao tác kéo thả
- Cung cấp phương thức thao tác linh hoạt đáp ứng nhu cầu đa dạng của người dùng
Đ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.