Về hướng dẫn WCAG 2.2 “1.4.13 Nội dung khi di chuột hoặc lấy nét” Mức AA
Mở đầu
Trong “1.4.13 Nội dung khi di chuột hoặc lấy nét” của WCAG 2.2, yêu cầu rằng khi nội dung bổ sung xuất hiện do di chuột hoặc lấy nét từ bàn phím, nội dung đó phải có thể thao tác được và có thể kiểm soát một cách thích hợp.
1. Tổng quan về yêu cầu
Nội dung bổ sung (ví dụ: hộp công cụ, pop-up) phải đáp ứng các điều kiện sau:
a. Có thể di chuột qua（Hoverable）
- Khi nội dung được hiển thị, nó không được biến mất khi di chuyển con trỏ chuột.
b. Có thể xóa（Dismissible）
- Người dùng có thể dễ dàng xóa nội dung bổ sung (như đóng bằng phím Esc hoặc nhấp chuột).
c. Bền vững（Persistent）
- Nội dung không được biến mất cho đến khi người dùng thao tác.
2. Phương pháp triển khai
a. Tạo hộp công cụ và pop-up
Ví dụ về HTML và CSS
HTML
<div class="tooltip-container">
<button id="infoButton">Xem chi tiết</button>
<div class="tooltip" role="tooltip" aria-hidden="true" id="tooltipContent">
Thông tin bổ sung sẽ hiển thị ở đây
</div>
</div>
CSS
.tooltip {
display: none;
position: absolute;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.tooltip-container:hover .tooltip,
.tooltip-container:focus-within .tooltip {
display: block;
}
b. Làm cho nội dung có thể thao tác bằng bàn phím
Triển khai lấy nét và xóa bằng JavaScript
JavaScript
const infoButton = document.getElementById('infoButton');
const tooltipContent = document.getElementById('tooltipContent');
infoButton.addEventListener('focus', () => {
tooltipContent.style.display = 'block';
tooltipContent.setAttribute('aria-hidden', 'false');
});
infoButton.addEventListener('blur', () => {
tooltipContent.style.display = 'none';
tooltipContent.setAttribute('aria-hidden', 'true');
});
c. Cung cấp chức năng đóng hộp công cụ và pop-up
Đóng bằng phím Esc
JavaScript
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
tooltipContent.style.display = 'none';
tooltipContent.setAttribute('aria-hidden', 'true');
}
});
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Nội dung biến mất khi di chuột ra ngoài hoặc mất focus
Ví dụ thất bại
<div class="tooltip-container">
<button>Xem chi tiết</button>
<div class="tooltip">Thông tin bổ sung</div>
</div>
Vấn đề
- Người dùng không thể thao tác với nội dung và nội dung biến mất khi mất focus.
Ví dụ cải thiện
- Có thể di chuột qua và hiển thị nội dung cho đến khi người dùng xóa.
b. Không có chức năng xóa
Ví dụ thất bại
- Chức năng đóng bằng phím Esc hoặc nhấp chuột chưa được triển khai.
Ví dụ cải thiện
- Thêm cơ chế đóng bằng phím Esc hoặc nhấp chuột ngoài.
4. Lợi ích của khả năng tiếp cận
a. Lưu ý đến người khuyết tật thị giác và vận động
- Có thể thao tác chỉ bằng bàn phím
- Người dùng gặp khó khăn với việc điều khiển chuột cũng sẽ dễ dàng sử dụng hơn
b. Cải thiện khả năng thao tác trực quan
- Trải nghiệm người dùng được cải thiện vì nội dung không biến mất đột ngột.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem nội dung có hiển thị khi di chuột qua không.
- Kiểm tra xem nội dung có thể thao tác bằng bàn phím (phím Tab hoặc Shift+Tab) không.
- Kiểm tra xem có thể xóa nội dung bằng phím Esc không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra khả năng tiếp cận của hộp công cụ và pop-up.
Tóm tắt
1.4.13 Nội dung khi di chuột hoặc lấy nét" của WCAG 2.2 yêu cầu nội dung bổ sung phải thân thiện với người dùng cả về mặt thị giác và khả năng thao tác.
Điểm cần chú ý khi triển khai
- Cung cấp hiển thị có thể di chuột qua và duy trì lâu dài.
- Thêm chức năng xóa nội dung.
- Tăng cường khả năng tiếp cận bằng cách sử dụng thao tác bàn phím và thuộc tính ARIA.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng 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.