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 mang 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ì?

Đôi khi, bạn cần sửa đổi thứ tự thẻ mặc định do công cụ tích hợp sẵn cung cấp bạn có thể dùng thuộc tính HTML tabindex để đặt giá trị vị trí tab của 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ử đó sẽ bị xoá vẫn có thể lấy tiêu điểm bằng cách gọi phương thức focus()

tabindex="5": Chỉ mục thẻ nào lớn hơn 0 sẽ đưa phần tử đó lên trước của thứ tự tab thông thường. Trường hợp có nhiều phần tử có chỉ mục thẻ lớn hơn 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à đang hoạt động hiệu quả. Việc sử dụng chỉ mục thẻ lớn hơn 0 được xem là phản mẫu.

Đảm bảo người dùng có thể truy cập vào các chế độ điều khiển bằng bàn phím

Một công cụ như Lighthouse rất hiệu quả trong việc tự động phát hiện một số tính năng hỗ trợ tiếp cận tuy nhiên, một số thử nghiệm 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ể 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 phải sử dụng tabindex để cải thiện khả năng tập trung của các chế độ kiểm soát đó.

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ể đồng nghĩa với việ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à đặt thuộc tính tabindex cho vùng nội dung đó -1 và gọi phương thức focus. Việc này giúp đảm bảo nội dung không xuất hiện trong thứ tự tab thông thường. Kỹ thuật này, được gọi là quản lý tiêu điểm, giúp bối cảnh mà người dùng nhận thấy được đồng bộ với nội dung hình ảnh của trang web.

Quản lý tiêu điểm trong 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.

Nếu biết được hành vi bàn phím nào cần triển khai thì bạn có thể gặp khó khăn. Chiến lược phát hành đĩa đơn Ghi nhận ứng dụng Internet đa dạng thức (ARIA) có thể truy cập Các phương pháp hướng dẫn liệt kê các loại thành phần và những loại thao tác bàn phím mà các thành phần này 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 cách sử dụ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. Polyfill mô phỏng hành vi của thuộc tính inert được đề xuất, để ngăn 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ẻ, bạn phải di chuyển phần tử đó đến một vị trí trước đó trong DOM.

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

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ể phải thêm bàn phím bổ sung hỗ trợ ngoài trọng tâm. Khi có thể, hãy sử dụng phần tử select tích hợp sẵn. Bây giờ có thể lấy tiêu điểm và cho phép các phím mũi tên hiện thêm lựa chọn 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 kỹ thuật đã biết là "đang di chuyển tabindex". Chỉ mục thẻ lưu trữ hoạt động bằng cách đặt tabindex thành -1 cho tất cả trẻ em ngoại trừ trẻ hiện đang hoạt động. Sau đó, thành phần này sử dụng bàn phím trình nghe sự kiện để 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 bạn không chắc chắn mức độ hỗ trợ bàn phím của các thành phần tuỳ chỉnh có thể bạn có thể tham khảo Phương pháp ghi nhận quyền tác giả của 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 khoá thành phần nào sẽ hỗ trợ.