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

Rob Dodson

Alexandra Klepper

Các phần tử HTML chuẩn như <button> hoặc <input> có khả năng hỗ trợ tiếp cận bằng bàn phím được tích hợp sẵn và nên được sử dụng bất cứ khi nào có thể. Tuy nhiên, nếu bạn cần tạo bạn có thể tạo hành vi dự kiến của người dùng bằng cách đang 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 quan trọng, chẳng hạn như hình ảnh chính, người dùng trình đọc màn hình có thể hiểu được thông tin đó mà không cần thêm tiêu điểm.

Chỉ mục thẻ 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 mọi phần tử, mặc dù chỉ nên áp dụng cho phần tử này tương tác và lấy một dải giá trị số nguyên. Bằng 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ự nhấn phím tab. Ví dụ:

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

tabindex="-1": Xoá một phần tử khỏi thứ tự thẻ thông thường, nhưng phần tử này vẫn có thể 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 chỉ mục thẻ lớn hơn 0 được xem là phản mẫu.

Đả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 hữu ích 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, vẫn có một số hoạt động kiểm thử phải được thực hiện theo cách thủ công.

Hãy thử nhấn phím Tab để di chuyển trên trang web của bạn. Bạn có thể liên hệ không tất cả các chế độ điều khiển tương tác trên trang? 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 xây dựng một trang mạnh mẽ với các phần nội dung khác nhau, trong đó một số nội dung bị ẩn ở các điểm khác nhau trong tải trang. Điều này có thể có nghĩa là các đường liên kết điều hướng 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 cho vùng nội dung đó một tabindex của -1 rồ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 độ kiểm soát, chẳng hạn như bằng 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 Các phương pháp tạ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à loại thao tác trên bàn phím mà các 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>

Để lấy tiêu điểm 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 phần tử đó vẫn có thể lấy tiêu điểm bằng cách gọi phương thức focus().

Việc áp dụng tabindex="-1" cho một phần tử sẽ không ảnh hưởng đến các phần tử con; nếu chúng nằm trong thứ tự thẻ một cách tự nhiên hoặc do có giá trị tabindex, chúng sẽ vẫn được sắp xếp trong thứ tự tab. Để xoá một phần tử và tất cả các phần tử con khỏi thứ tự nhấn phím tab, 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 trước thẻ tự nhiên đơn đặt hàng. Nếu có nhiều phần tử có tabindex lớn hơn 0, thẻ này đơn đặt hàng sẽ bắt đầu từ giá trị thấp nhất lớn hơn 0 và tăng dần lên.

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

Với Lighthouse, bạn có thể xác định các phần tử bằng 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 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ể đặt tiêu điểm vào phần này 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 này sẽ đặt tabindex của thành phần con được làm tâm điểm trước đó thành -1, đặt tabindex của thành phần con cần làm tâm điểm thành 0 và gọi focus() phương thức trên đó.

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ợ.