Hướng dẫn WCAG 2.2 ‘2.4.3 Thứ tự tiêu điểm’ Mức A
Mở đầu
Tiêu chí ‘2.4.3 Thứ tự tiêu điểm’ trong WCAG 2.2 yêu cầu các trang web phải có thể thao tác theo đúng thứ tự và thứ tự đó phải giữ được ý nghĩa và tính khả dụng. Điều này giúp người dùng sử dụng bàn phím hoặc phần mềm đọc màn hình có thể thao tác hiệu quả với các yếu tố trong trang.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Các thành phần có thể nhận tiêu điểm (ví dụ: nút bấm, liên kết, các yếu tố biểu mẫu, v.v.) phải nhận tiêu điểm theo một thứ tự giữ được ý nghĩa và tính khả dụng trong trang.
- Thứ tự tiêu điểm phải phù hợp với thứ tự hiển thị trực quan và dòng chảy nội dung.
2. Phương pháp triển khai
a. Đảm bảo thứ tự trong DOM (Mô hình đối tượng tài liệu) phù hợp với thứ tự hiển thị trực quan.
Sử dụng cấu trúc HTML phù hợp
HTML
<header>
<nav>
<ul>
<li><a href="#home">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>
<section id="home">
<h1>Trang chủ</h1>
<p>Chào mừng bạn!</p>
</section>
<section id="about">
<h1>Giới thiệu công ty</h1>
<p>Về chúng tôi</p>
</section>
<section id="contact">
<h1>Liên hệ</h1>
<form>
<label for="name">Tên của bạn:</label>
<input type="text" id="name">
<button type="submit">Gửi</button>
</form>
</section>
</main>
Trong ví dụ này, thứ tự tiêu điểm tuân theo dòng chảy của HTML và phù hợp với thứ tự hiển thị trực quan.
b. Sử dụng tabindex một cách chính xác
Ưu tiên thứ tự tiêu điểm tự nhiên
Khi sử dụng tabindex, hãy tuân thủ các quy tắc sau:
- 0: Tuân theo thứ tự tự nhiên
- Giá trị dương: Chỉ định một thứ tự cụ thể, nhưng tránh lạm dụng.
HTML
<div>
<button tabindex="1">Nút ưu tiên</button>
<button tabindex="0">Nút thông thường</button>
<button tabindex="-1">Nút không có tiêu điểm</button>
</div>
Lưu ý
- Việc sử dụng quá nhiều giá trị dương cho tabindex có thể làm tăng sự phức tạp trong việc quản lý và có nguy cơ làm thứ tự tiêu điểm trở nên không tự nhiên.
c. Kiểm soát tiêu điểm trong hộp thoại modal
Khi sử dụng hộp thoại modal, cần quản lý tiêu điểm một cách chính xác để người dùng không bị nhầm lẫn.
Ví dụ về triển khai modal
HTML
<button id="openModal">Mở modal</button>
<dialog id="modal" aria-labelledby="modalTitle">
<h2 id="modalTitle">Tiêu đề modal</h2>
<p>Đây là modal</p>
<button id="closeModal">Đóng</button>
</dialog>
JavaScript
const modal = document.getElementById('modal');
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
openModal.addEventListener('click', () => {
modal.showModal();
closeModal.focus(); // Chuyển tiêu điểm đến các yếu tố trong modal
});
closeModal.addEventListener('click', () => {
modal.close();
openModal.focus(); // Chuyển tiêu điểm trở lại nút gốc
});
d. Điều chỉnh tiêu điểm động
Đối với nội dung được tạo động, cần đảm bảo rằng tiêu điểm di chuyển theo đúng thứ tự.
Ví dụ: Chèn phần tử mới bằng JavaScript
JavaScript
const button = document.createElement('button');
button.textContent = 'Nút mới';
document.body.appendChild(button);
button.focus(); // Đặt tiêu điểm cho phần tử mới
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Thứ tự hiển thị trực quan và thứ tự tiêu điểm không khớp
Ví dụ thất bại
<div>
<button>Nút 2</button>
<button>Nút 1</button> <!-- Về mặt thị giác là thứ hai, nhưng tiêu điểm lại đến trước-->
</div>
Ví dụ cải thiện
- Điều chỉnh cấu trúc HTML để phù hợp với thứ tự hiển thị trực quan
b. Lạm dụng tabindex
Ví dụ thất bại
<button tabindex="3">Nút 3</button>
<button tabindex="1">Nút 1</button>
<button tabindex="2">Nút 2</button>
Ví dụ cải thiện
- Để giữ thứ tự tiêu điểm tự nhiên, sử dụng tabindex=“0”
4. Lợi ích của khả năng tiếp cận
a. Cải thiện khả năng thao tác của người dùng
- Nếu thứ tự tiêu điểm hợp lý, người dùng bàn phím có thể thao tác hiệu quả
b. Ngăn ngừa thao tác sai
- Bằng cách không để tiêu điểm di chuyển theo thứ tự không phù hợp, rủi ro người dùng thực hiện các thao tác không mong muốn được giảm thiểu.
c. Chú ý đến người dùng sử dụng phần mềm đọc màn hình
- Nếu thứ tự hợp lý, người dùng phần mềm đọc màn hình có thể hiểu chính xác nội dung.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra thứ tự di chuyển tiêu điểm bằng cách sử dụng phím Tab.
- Kiểm tra xem có phù hợp với thứ tự hiển thị trực quan hay không.
b. Kiểm tra bằng phần mềm đọc màn hình
- Kiểm tra thứ tự tiêu điểm bằng phần mềm đọc màn hình và xác nhận xem nội dung có được đọc đúng cách hay không.
c. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem thứ tự tiêu điểm có phù hợp hay không.
Tóm tắt
Tiêu chí “2.4.3 Thứ tự tiêu điểm” trong WCAG 2.2 yêu cầu các yếu tố có thể nhận tiêu điểm trong trang phải tuân theo một thứ tự hợp lý và trực quan.
Điểm cần chú ý khi triển khai
- Điều chỉnh cấu trúc HTML để phù hợp với thứ tự hiển thị trực quan.
- Sử dụng tabindex một cách chính xác và tránh thứ tự tiêu điểm không tự nhiên.
- Quản lý tiêu điểm chặt chẽ trong các modal và nội dung động.
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.