Kiểm soát tiêu điểm bằng chỉ mục thẻ

Rob Dodson

Alexandra Klepper

Các phần tử HTML tiêu chuẩn như <button> hoặc <input> có tích hợp tính năng hỗ trợ tiếp cận bằng bàn phím và bạn nên sử dụng các phần tử này bất cứ khi nào có thể. Tuy nhiên, nếu cần tạo các thành phần tương tác tuỳ chỉnh, bạn có thể tạo hành vi dự kiến của người dùng bằng cách thêm tabindex.

Chỉ thêm tabindex vào nội dung có tính tương tác. Ngay cả khi nội dung là quan trọng, chẳng hạn như hình ảnh chính, người dùng trình đọc màn hình vẫn có thể hiểu được nội dung đó mà không cần thêm tiêu điểm.

Thẻ tabindex là gì?

Trong trường hợp cần sửa đổi thứ tự thẻ mặc định do các phần tử tích hợp cung cấp, bạn có thể sử dụng thuộc tính HTML tabindex để đặt rõ ràng vị trí thẻ của một phần tử.

Bạn có thể áp dụng tabindex cho bất kỳ phần tử nào, mặc dù bạn chỉ nên áp dụng cho các phần tử tương tác và lấy một dải giá trị số nguyên. Với tabindex, bạn có thể chỉ định thứ tự rõ ràng cho các phần tử trang có thể làm tâm điểm, chèn một phần tử không thể làm tâm điểm vào thứ tự thẻ và xoá các phần tử khỏi thứ tự thẻ. Ví dụ:

tabindex="0": Chèn một phần tử vào thứ tự thẻ tự nhiên. Bạn có thể đặt tiêu điểm vào phần tử bằng cách nhấn phím Tab và có thể đặt tiêu điểm vào phần tử bằng cách gọi phương thức focus() của phần tử đó.

tabindex="-1": Xoá một phần tử khỏi thứ tự thẻ tự nhiên, nhưng phần tử đó vẫn có thể được lấy tiêu điểm bằng cách gọi phương thức focus()

tabindex="5": Mọi tabindex lớn hơn 0 sẽ đưa phần tử đó lên đầu thứ tự thẻ tự nhiên. Nếu có nhiều phần tử có tabindex lớn hơn 0, thì thứ tự thẻ bắt đầu từ giá trị thấp nhất lớn hơn 0 và tăng dần. Việc sử dụng tabindex lớn hơn 0 được coi là một mẫu chống.

Đảm bảo có thể sử dụng bàn phím để điều khiển

Một công cụ như Lighthouse rất hiệu quả trong việc tự động phát hiện một số vấn đề về khả năng hỗ trợ tiếp cận. Tuy nhiên, một số hoạt động kiểm thử vẫn phải do con người thực hiện theo cách thủ công.

Hãy thử nhấn phím Tab để di chuyển trong trang web của bạn. Bạn có thể truy cập vào tất cả các chế độ điều khiển tương tác trên trang không? Nếu không, bạn có thể cần sử dụng tabindex để cải thiện khả năng lấy tiêu điểm của các chế độ điều khiển đó.

Quản lý tiêu điểm ở cấp trang

Đôi khi, tabindex giúp tạo ra trải nghiệm người dùng liền mạch. Ví dụ: nếu bạn tạo một trang mạnh mẽ với nhiều phần nội dung, trong đó một số nội dung bị ẩn ở các điểm khác nhau trong quá trình tải trang. Tức là các đường liên kết điều hướng sẽ thay đổi nội dung hiển thị mà không cần làm mới trang.

Trong trường hợp này, hãy xác định vùng nội dung đã chọn và cung cấp tabindex cho -1, đồng thời gọi phương thức focus. Điều này đảm bảo nội dung không xuất hiện theo thứ tự thẻ tự nhiên. Kỹ thuật này, được gọi là quản lý tiêu điểm, giúp đồng bộ hoá ngữ cảnh mà người dùng nhận thấy với nội dung hình ảnh của trang web.

Quản lý tiêu điểm trong các thành phần

Trong một số trường hợp, bạn cũng phải quản lý tiêu điểm ở cấp điều khiển, chẳng hạn như với Phần tử tuỳ chỉnh.

Bạn có thể gặp khó khăn khi biết được hành vi nào của bàn phím cần triển khai. Hướng dẫn Thực hành soạn thảo ứng dụng Internet đa dạng thức có thể truy cập (ARIA) liệt kê các loại thành phần và những loại thao tác trên bàn phím mà những thành phần đó hỗ trợ.

Chèn một phần tử vào thứ tự nhấn phím tab

Chèn một phần tử vào thứ tự thẻ tự nhiên bằng tabindex="0". Ví dụ:

<div tabindex="0">Focus me with the TAB key</div>

Để đặt tiêu điểm vào một phần tử, hãy nhấn phím Tab hoặc gọi phương thức focus() của phần tử đó.

Xoá một phần tử khỏi thứ tự thẻ

Xoá một phần tử bằng tabindex="-1". Ví dụ:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Thao tác này sẽ xoá một phần tử khỏi thứ tự thẻ thông thường, nhưng bạn vẫn có thể lấy tiêu điểm phần tử đó bằng cách gọi phương thức focus().

Việc áp dụng tabindex="-1" cho một phần tử không ảnh hưởng đến các phần tử con của phần tử đó; nếu các phần tử con đó nằm trong thứ tự thẻ theo tự nhiên hoặc do giá trị tabindex, thì các phần tử con đó sẽ vẫn nằm trong thứ tự thẻ. Để xoá một phần tử và tất cả phần tử con của phần tử đó khỏi thứ tự thẻ, hãy cân nhắc sử dụng polyfill inert của WICG. Tiện ích bổ sung này mô phỏng hành vi của một thuộc tính inert được đề xuất, ngăn các công nghệ hỗ trợ chọn hoặc đọc các phần tử.

Tránh tabindex > 0

Mọi tabindex lớn hơn 0 sẽ chuyển phần tử đó lên đầu thứ tự thẻ tự nhiên. Nếu có nhiều phần tử có tabindex lớn hơn 0, thì thứ tự thẻ sẽ bắt đầu từ giá trị thấp nhất lớn hơn 0 và tăng dần.

Việc sử dụng tabindex lớn hơn 0 được coi là phản mẫu vì trình đọc màn hình điều hướng trang theo thứ tự DOM, chứ không phải theo thứ tự thẻ. Nếu cần một phần tử xuất hiện sớm hơn theo thứ tự thẻ, bạn nên chuyển phần tử đó đến vị trí trước đó trong DOM.

Với Lighthouse, bạn có thể xác định các phần tử có tabindex > 0. Chạy quy trình Kiểm tra hỗ trợ tiếp cận (Lighthouse > Options > Accessibility (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận)) và tìm kết quả của quy trình kiểm tra "Không phần tử nào có giá trị [tabindex] lớn hơn 0".

Sử dụng tính năng "roving tabindex"

Nếu đang tạo một thành phần phức tạp, bạn có thể cần thêm tính năng hỗ trợ bàn phím bổ sung ngoài tiêu điểm. Khi có thể, hãy sử dụng phần tử select tích hợp sẵn. Bạn có thể lấy tiêu điểm và cho phép các phím mũi tên hiển thị các tuỳ chọn khác có thể chọn.

Để triển khai các hàm tương tự trong các thành phần của riêng mình, bạn có thể sử dụng một kỹ thuật được gọi là "tabindex di chuyển". Tabindex di chuyển hoạt động bằng cách đặt tabindex thành -1 cho tất cả các thành phần con ngoại trừ thành phần con đang hoạt động. Sau đó, thành phần này sử dụng trình nghe sự kiện bàn phím để xác định phím mà người dùng đã nhấn.

Khi điều này xảy ra, thành phần sẽ đặt tabindex của thành phần con được lấy tiêu điểm trước đó thành -1, đặt tabindex của thành phần con sẽ được lấy tiêu điểm thành 0 và gọi phương thức focus() trên thành phần con đó.

Trước

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Sau

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

Công thức truy cập bằng bàn phím

Nếu không chắc chắn các thành phần tuỳ chỉnh của mình có thể cần mức độ hỗ trợ bàn phím nào, bạn có thể tham khảo Các phương pháp tạo nội dung ARIA 1.1. Hướng dẫn này liệt kê các mẫu giao diện người dùng phổ biến và xác định những phím mà thành phần của bạn nên hỗ trợ.