Hướng dẫn WCAG 2.2 ‘2.5.1 Cử chỉ thao tác con trỏ’ cấp độ A

Mở đầu

Hướng dẫn WCAG 2.2 ‘2.5.1 Cử chỉ thao tác con trỏ’ yêu cầu cung cấp các phương án thay thế có thể thao tác bằng một con trỏ đơn (ví dụ: một ngón tay hoặc nhấp chuột) cho các thao tác yêu cầu sử dụng nhiều ngón tay hoặc vẽ các cử chỉ theo một đường cụ thể. Tiêu chí này đặc biệt quan trọng để cải thiện khả năng sử dụng trên các thiết bị di động hoặc màn hình cảm ứng.

1. Khái quát tiêu chí

Yêu cầu

• Đối với tất cả các chức năng có thể thao tác bằng cử chỉ đa điểm (ví dụ: phóng to bằng cách kẹp ngón tay) hoặc cử chỉ dựa trên đường đi (ví dụ: vuốt), cần phải cung cấp phương án thay thế sao cho có thể thao tác tương tự bằng một con trỏ (ví dụ: một ngón tay hoặc nhấp chuột).
• Trừ khi các cử chỉ đa điểm hoặc dựa trên đường đi là cần thiết về bản chất, tiêu chí này phải được đáp ứng.

2. Phương pháp triển khai

a. Cung cấp thao tác với một con trỏ

Ngoài các thao tác đa điểm và dựa trên đường đi, cung cấp các điều khiển cho phép thực hiện thao tác tương tự bằng một con trỏ.

Ví dụ: Cung cấp cả thao tác vuốt và thao tác nút

HTML

<div>
  <button id="prev">Lùi lại</button>
  <button id="next">Tiến tới</button>
</div>
<div id="carousel">
  <!-- Nội dung -->
</div>

JavaScript

const carousel = document.getElementById('carousel');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');

// Thao tác vuốt
carousel.addEventListener('touchstart', handleTouchStart);
carousel.addEventListener('touchmove', handleTouchMove);

// Thao tác nút
prevButton.addEventListener('click', () => moveCarousel('prev'));
nextButton.addEventListener('click', () => moveCarousel('next'));

function moveCarousel(direction) {
  if (direction === 'prev') {
    console.log('Di chuyển đến slide trước');
  } else {
    console.log('Di chuyển đến slide tiếp theo');
  }
}

• Bằng cách cung cấp cả thao tác vuốt và thao tác nút, người dùng có thể chọn phương thức mà họ ưa thích.

b. Thao tác con trỏ đơn trên thanh trượt

Ngoài thao tác kéo trên thanh trượt, cũng cung cấp các thao tác bằng nút bấm và bàn phím

Ví dụ: Thao tác thay thế cho thanh trượt

HTML

<div>
  <button id="decrease">-</button>
  <input type="range" id="slider" min="0" max="100" step="1">
  <button id="increase">+</button>
</div>

JavaScript

const slider = document.getElementById('slider');
const decreaseButton = document.getElementById('decrease');
const increaseButton = document.getElementById('increase');

// Thao tác nút
decreaseButton.addEventListener('click', () => {
  slider.value = Math.max(slider.min, slider.value - slider.step);
});
increaseButton.addEventListener('click', () => {
  slider.value = Math.min(slider.max, parseInt(slider.value) + parseInt(slider.step));
});

• Không chỉ thao tác kéo, mà còn cho phép thay đổi giá trị bằng cách sử dụng nút

c. Cung cấp phương án thay thế cho các cử chỉ tùy chỉnh

Ngay cả khi các cử chỉ đa điểm hoặc dựa trên đường đi là cần thiết, cũng đảm bảo rằng có thể đạt được cùng kết quả bằng thao tác nhấp chuột đơn giản.

Ví dụ: Phương án thay thế cho cử chỉ vẽ vòng tròn

Vấn đề

• Thực hiện một hành động cụ thể bằng cử chỉ vẽ vòng tròn

Biện pháp cải thiện

• Thêm nút ‘Thực hiện’ và cung cấp cùng một hành động bằng thao tác nhấp chuột thay vì vẽ vòng tròn

<button id="execute">Thực hiện</button>

3. Các ví dụ thất bại phổ biến và biện pháp cải thiện

a. Chỉ cung cấp thao tác đa điểm

Ví dụ thất bại

• Chỉ phóng to/thu nhỏ hình ảnh bằng cách kẹp ngón tay

Biện pháp cải thiện

• Cung cấp nút zoom in/zoom out

<button>Phóng to</button>
<button>Thu nhỏ</button>

b. Cử chỉ dựa trên đường đi là bắt buộc

Ví dụ thất bại

• Chỉ có thể chuyển trang bằng thao tác vuốt

Biện pháp cải thiện

• Thêm nút hoặc liên kết để cho phép thao tác bằng một con trỏ

4. Lợi ích của khả năng truy cập (accessibility)

a. Đáp ứng nhu cầu của người dùng đa dạng

• Có thể xem xét người dùng có vấn đề về tay hoặc những người sử dụng thiết bị không hỗ trợ cử chỉ.

b. Cải thiện trải nghiệm người dùng

• Bằng cách cung cấp phương thức thao tác đơn giản, tất cả người dùng đều có thể thao tác một cách thoải mái.

c. Tính tương thích giữa các thiết bị

• Vì các chức năng có thể sử dụng được cả với thao tác chuột và bàn phím, nên trở nên dễ sử dụng trên mọi nền tảng.

5. Phương pháp kiểm tra

a. Kiểm tra thủ công

1. Xác nhận rằng tất cả các thao tác đều có thể thực hiện được bằng một con trỏ.
2. Kiểm tra hoạt động bằng cách sử dụng chuột hoặc màn hình cảm ứng.

b. Kiểm tra trình đọc màn hình

• Xác nhận rằng các phương án thay thế được cung cấp bởi trình đọc màn hình hoạt động chính xác.

c. Công cụ kiểm tra tự động

• Sử dụng Axe hoặc WAVE để kiểm tra xem các phương án thay thế cho cử chỉ có được cung cấp đúng cách hay không.

Tóm tắt

Hướng dẫn WCAG 2.2 ‘2.5.1 Cử chỉ thao tác con trỏ’ nhằm mục đích đảm bảo rằng tất cả các thao tác đều có thể thực hiện được bằng một con trỏ.

Điểm cần lưu ý khi triển khai

1. Ngoài các cử chỉ đa điểm và dựa trên đường đi, cung cấp thao tác với một con trỏ.
2. Cung cấp phương án thay thế cho thanh trượt và các cử chỉ tùy chỉnh.
3. Xác nhận rằng các thao tác hoạt động nhất quán trên tất cả các thiết bị.

Đ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.