Mở đầu
Một trong những yếu tố cơ bản của khả năng truy cập web là “thứ tự tập trung”. Điều này đề cập đến việc các yếu tố tương tác (liên kết, nút, trường biểu mẫu, v.v.) được tập trung theo một thứ tự logic và trực quan khi người dùng chỉ sử dụng bàn phím để thao tác trên trang web. Thứ tự tập trung là một yếu tố quan trọng ảnh hưởng lớn đến trải nghiệm sử dụng của người dùng có khuyết tật hoặc không thể sử dụng chuột. Bài viết này sẽ giải thích tầm quan trọng của thứ tự tập trung và cách tối ưu hóa nó.
Thứ tự tập trung là gì?
“Thứ tự tập trung” có nghĩa là khi người dùng nhấn phím Tab để điều hướng, yếu tố tương tác nào sẽ được tập trung và thứ tự đó được xác định như thế nào. Ví dụ, các trường nhập liệu trong biểu mẫu, liên kết, nút, v.v., là các yếu tố mà người dùng có thể thao tác và sẽ được tập trung theo thứ tự thông qua thao tác bàn phím.
Nếu thứ tự tập trung được thiết lập đúng, người dùng có thể tiến hành thao tác một cách trực quan. Tuy nhiên, nếu sự di chuyển của thứ tự không logic, người dùng có thể dễ bị lúng túng, dẫn đến sai sót trong thao tác và cảm giác bực bội. Đặc biệt, đối với người dùng khiếm thị hoặc những người chỉ sử dụng bàn phím để thao tác, việc có một thứ tự thích hợp là chìa khóa để cung cấp trải nghiệm web thoải mái.
Tầm quan trọng của “thứ tự tập trung”
Thứ tự tập trung rất quan trọng đối với tất cả người dùng, đặc biệt là những người phụ thuộc vào khả năng truy cập, vì những lý do sau:
- Điều hướng hiệu quả: Bằng cách di chuyển theo thứ tự đúng, người dùng có thể điều hướng trong trang một cách hiệu quả. Ngược lại, nếu thứ tự tập trung bị lộn xộn, người dùng sẽ mất thời gian để đến được thông tin mong muốn và gây ra cảm giác căng thẳng.
- Cải thiện trải nghiệm người dùng: Khi có một thứ tự tập trung hợp lý, việc truy cập vào các trường nhập liệu hoặc nút quan trọng sẽ trở nên trôi chảy, từ đó cải thiện trải nghiệm người dùng.
- Tuân thủ các tiêu chuẩn khả năng truy cập: Thứ tự tập trung là một yếu tố quan trọng được bao gồm trong Hướng dẫn về khả năng truy cập nội dung web (WCAG), và nếu không được thiết kế đúng cách, trang web sẽ không đáp ứng các tiêu chuẩn khả năng truy cập.
Vai trò của thứ tự tập trung đối với người khiếm thị
Người dùng khiếm thị sử dụng trình đọc màn hình để đọc nội dung web, và điều này phụ thuộc lớn vào thứ tự tập trung. Trình đọc màn hình sẽ đọc các yếu tố có thể tập trung trên trang theo thứ tự, vì vậy nếu thứ tự này không chính xác, người dùng sẽ gặp khó khăn trong việc hiểu cấu trúc của trang. Hơn nữa, việc thực hiện thao tác theo thứ tự sai có thể dẫn đến sai sót trong việc nhập liệu vào biểu mẫu hoặc bỏ lỡ thông tin quan trọng.
Các phương pháp tối ưu hóa thứ tự tập trung
Để đảm bảo thứ tự tập trung hợp lý, có một số hướng dẫn cơ bản cần tuân thủ. Bằng cách làm theo những hướng dẫn này, người dùng có thể điều hướng trong trang mà không bị lúng túng.
1. Tận dụng thứ tự tự nhiên của HTML
Thông thường, trình duyệt sẽ di chuyển sự tập trung theo thứ tự mà các phần tử HTML được mô tả. Điều này được gọi là ‘thứ tự mã nguồn’, và với HTML được thiết kế hợp lý, thứ tự tập trung trực quan có thể được thực hiện mà không cần tùy chỉnh đặc biệt.
Ví dụ cụ thể:
html
<header>
<nav>...</nav>
</header>
<main>
<h1>Tiêu đề trang</h1>
<p>Nội dung chính</p>
<a href="...">Liên kết</a>
</main>
<footer>
<p>Thông tin chân trang</p>
</footer>
Trong ví dụ trên, sự tập trung sẽ di chuyển theo thứ tự: điều hướng → nội dung chính → chân trang. Đây là thứ tự tự nhiên và cũng rất trực quan đối với người dùng.
2. Sử dụng thuộc tính tabindex một cách thích hợp
Khi thứ tự mặc định của HTML không đủ hoặc khi bạn muốn ép buộc một yếu tố cụ thể nhận sự tập trung, bạn có thể sử dụng thuộc tính tabindex. Thuộc tính này được sử dụng để chỉ định một cách rõ ràng thứ tự cho các yếu tố có thể tập trung. Tuy nhiên, nếu lạm dụng nó, thứ tự tập trung có thể trở nên hỗn loạn, vì vậy cần phải cẩn trọng.
tabindex=“0”: Biến yếu tố đó thành một yếu tố có thể tập trung trong khi vẫn tuân theo thứ tự tập trung thông thường. tabindex=“-1”: Không nhận sự tập trung từ bàn phím, nhưng có thể được cấp sự tập trung theo cách lập trình bằng JavaScript. Giá trị dương (ví dụ: tabindex=‘1’): Tùy chỉnh thứ tự tập trung và đặt ưu tiên, nhưng có thể làm phá vỡ thứ tự tự nhiên, vì vậy chỉ nên sử dụng khi cần thiết.
Ví dụ cụ thể:
html
<a href="..." tabindex="1">Liên kết được tập trung đầu tiên</a>
<a href="...">Liên kết được tập trung tiếp theo</a>
<button tabindex="0">Nút được tập trung theo thứ tự thông thường</button>
3. Tính nhất quán giữa bố cục trực quan và thứ tự tập trung
Điều quan trọng là bố cục trực quan của trang và thứ tự tập trung bằng bàn phím phải nhất quán càng nhiều càng tốt. Nếu về mặt thị giác, người dùng di chuyển từ trái sang phải, từ trên xuống dưới, nhưng thứ tự tập trung không theo cách này, người dùng sẽ dễ bị nhầm lẫn.
Ví dụ: Nếu các trường nhập liệu trong biểu mẫu được sắp xếp theo thứ tự ‘Tên → Địa chỉ email → Số điện thoại’ về mặt trực quan, thì thứ tự tập trung cũng nên được thiết lập tương tự.
4. Kiểm soát sự tập trung bằng JavaScript
Khi nội dung động hoặc cửa sổ mô-đun được hiển thị, có thể cần sử dụng JavaScript để kiểm soát sự tập trung. Ví dụ, khi một mô-đun được mở, tự động chuyển sự tập trung đến yếu tố có thể tập trung đầu tiên bên trong nó, và khi đóng, trả lại vị trí ban đầu có thể là một giải pháp hiệu quả.
Ví dụ cụ thể:
javascript
document.getElementById('modal').focus();
Rủi ro khi thứ tự tập trung không phù hợp
Nếu thứ tự tập trung không được đảm bảo, người dùng có thể gặp phải các vấn đề sau:
Nhầm lẫn trong thao tác: Khi sự tập trung di chuyển theo thứ tự không hợp lý, người dùng có thể mất đi dòng chảy thao tác và dẫn đến việc thực hiện sai thao tác hoặc bỏ lỡ thông tin quan trọng. Vi phạm khả năng truy cập: Trong WCAG 2.1 có hướng dẫn về thứ tự tập trung (Hướng dẫn 2.4.3), và nếu vi phạm điều này, sẽ bị coi là không đủ khả năng truy cập. Sự suy giảm trải nghiệm người dùng: Đặc biệt đối với những người dùng phụ thuộc vào bàn phím, nếu sự thoải mái trong thao tác bị ảnh hưởng, ấn tượng và độ tin cậy của toàn bộ trang web sẽ giảm đi.
Tóm tắt Thứ tự tập trung trong khả năng truy cập web là một yếu tố quan trọng giúp người dùng thao tác hiệu quả trên trang chỉ bằng bàn phím. Bằng cách duy trì thứ tự tự nhiên của HTML và sử dụng hợp lý thuộc tính tabindex cũng như JavaScript, chúng ta có thể cung cấp trải nghiệm điều hướng dễ sử dụng cho người dùng. Tối ưu hóa thứ tự tập trung sẽ giúp xây dựng một trang web thoải mái và dễ truy cập hơn cho tất cả người dùng.
Điểm quan trọng
Tận dụng thứ tự tự nhiên của HTML và duy trì thứ tự tập trung phù hợp với bố cục trực quan. Sử dụng thuộc tính tabindex và JavaScript để kiểm soát sự tập trung khi cần thiết. Cung cấp thứ tự tập trung hợp lý và trực quan cho người dùng thao tác bằng bàn phím và người sử dụng trình đọc màn hình. Tối ưu hóa thứ tự tập trung là điều cơ bản trong khả năng truy cập và là một yếu tố lớn giúp cải thiện tính dễ sử dụng của toàn bộ trang web.
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.