Về hướng dẫn WCAG 2.2 “2.4.1 Bỏ qua các khối lặp lại” Mức A
Mở đầu
Hướng dẫn WCAG 2.2 “2.4.1 Bỏ qua các khối lặp lại” yêu cầu cung cấp cơ chế để bỏ qua nội dung lặp lại trên nhiều trang web (ví dụ: menu điều hướng). Tiêu chuẩn này nhằm giúp người dùng sử dụng bàn phím hoặc trình đọc màn hình giảm thiểu các thao tác lặp lại không cần thiết và tiếp cận nội dung chính một cách hiệu quả.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Cung cấp cơ chế bỏ qua các yếu tố lặp lại trên trang
- Ví dụ: Các phần lặp lại trên toàn bộ trang web như tiêu đề, menu điều hướng, chân trang, v.v.
2. Phương pháp triển khai
a. Thêm liên kết “Bỏ qua nội dung chính”
Ví dụ: Liên kết bỏ qua nội dung chính
HTML
<a href="#mainContent" class="skip-link">Bỏ qua đến nội dung chính</a>
<header>
<nav>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/about">Giới thiệu công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<main id="mainContent">
<h1>Nội dung chính</h1>
<p>Nội dung chính sẽ được hiển thị ở đây</p>
</main>
CSS
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 1000;
}
.skip-link:focus {
top: 0; /* Hiển thị khi có tiêu điểm */
}
b. Sử dụng ARIA landmarks
Sử dụng vai trò landmark để làm rõ các phần chính trong trang.
Ví dụ: ARIA landmarks
HTML
<header role="banner">
<nav role="navigation">
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/about">Giới thiệu công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<main role="main">
<h1>Nội dung chính</h1>
<p>Nội dung chính sẽ được hiển thị ở đây</p>
</main>
<footer role="contentinfo">
<p>© 2024 Tên công ty</p>
</footer>
c. Sử dụng menu có thể thu gọn
Ví dụ: Menu điều hướng có thể thu gọn
HTML
<button id="toggleMenu">Hiển thị/Ẩn điều hướng</button>
<nav id="mainNav" hidden>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/about">Giới thiệu công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
<main>
<h1>Nội dung chính</h1>
</main>
JavaScript
const toggleMenu = document.getElementById('toggleMenu');
const mainNav = document.getElementById('mainNav');
toggleMenu.addEventListener('click', () => {
const isHidden = mainNav.hasAttribute('hidden');
if (isHidden) {
mainNav.removeAttribute('hidden');
} else {
mainNav.setAttribute('hidden', true);
}
});
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Không có liên kết bỏ qua
Ví dụ thất bại
<header>
<nav>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/about">Giới thiệu công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<main>
<h1>Nội dung chính</h1>
</main>
Ví dụ cải thiện
- Cung cấp liên kết giúp người dùng bỏ qua menu điều hướng và di chuyển trực tiếp đến nội dung.
b. Liên kết bỏ qua bị ẩn
Ví dụ thất bại
- Liên kết “Bỏ qua đến nội dung chính” bị ẩn và không thể nhận tiêu điểm.
Ví dụ cải thiện
- Cài đặt để liên kết hiển thị khi nhận tiêu điểm (focus) bằng CSS.
4. Lợi ích của khả năng tiếp cận
a. Cải thiện hiệu quả thao tác
- Người dùng bàn phím và người dùng trình đọc màn hình có thể bỏ qua các yếu tố lặp lại và tiếp cận nội dung một cách hiệu quả.
b. Quan tâm đến người khiếm thị
- Cung cấp phương tiện giúp người dùng trình đọc màn hình tiếp cận thông tin quan trọng một cách nhanh chóng.
c. Cũng hữu ích cho người dùng thông thường
- Chức năng bỏ qua điều hướng không cần thiết có thể hữu ích ngay cả trên màn hình nhỏ hoặc khi sử dụng thao tác cảm ứng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem liên kết bỏ qua có hoạt động chính xác khi sử dụng phím Tab trên bàn phím hay không.
- Kiểm tra xem liên kết bỏ qua có được trình đọc màn hình đọc chính xác hay không khi sử dụng trình đọc màn hình.
b. Công cụ kiểm tra tự động
- Kiểm tra việc triển khai liên kết bỏ qua và các landmark bằng các công cụ kiểm tra khả năng truy cập như Axe hoặc WAVE.
Tóm tắt
Hướng dẫn WCAG 2.2 “2.4.1 Bỏ qua các khối lặp lại” nhằm mục đích cung cấp cơ chế giúp người dùng truy cập nội dung một cách hiệu quả.
Điểm cần chú ý khi triển khai
- Cung cấp liên kết “Bỏ qua đến nội dung chính”
- Sử dụng ARIA landmarks để nhận diện các phần (section) trong trang
- Sử dụng menu thu gọn khi cần thiết
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.