Các phần tử HTML chuẩn như <button> hoặc <input> có 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 cần tạo các phần tử 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 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 vẫn có thể hiểu được nội dung đó mà không cần thêm tiêu điểm.
Chỉ mục thẻ là gì?
Khi 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õ 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 các phần tử tương tác và nhận một loạt 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ể lấy tiêu điểm phần tử bằng cách nhấn phím Tab. Bạn có thể lấy tiêu điểm phần tử này bằng cách gọi phương thức focus().
tabindex="-1": 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 phần tử đó làm tâm điểm bằng cách gọi phương thức focus()
tabindex="5": Bất kỳ chỉ mục thẻ nào lớn hơn 0 sẽ đưa phần tử đó lên trước thứ tự thẻ thông thường. Nếu có nhiều phần tử có chỉ mục thẻ 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 lên. Việc sử dụng chỉ mục thẻ lớn hơn 0 bị coi 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ố 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
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ể phải 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 nhiều phần nội dung, trong đó một số nội dung bị ẩn tại 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ẻ thông thường. Kỹ thuật này được gọi là quản lý tiêu điểm, giúp giữ cho ngữ cảnh mà người dùng nhận thấy đồ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 điều khiển, chẳng hạn như với 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. 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 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 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ử sẽ không ảnh hưởng đến các phần tử con; nếu các phần tử đó nằm trong thứ tự thẻ một cách tự nhiên hoặc do giá trị tabindex, thì các phần tử đó vẫn sẽ nằm trong thứ tự thẻ.
Để xoá một phần tử và tất cả các phần tử con khỏi thứ tự thẻ, 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 không cho 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ự thẻ thông thường. 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 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 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 công cụ Kiểm tra khả năng hỗ trợ tiếp cận (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận) rồi tìm kết quả của bài kiểm tra "Không có 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. Tệp này có thể làm tâm điểm và cho phép các phím mũi tên hiện thêm các tuỳ chọn có thể chọn khác.
Để 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 có tên là "roving tabindex". Chỉ mục thẻ lưu trữ hoạt động bằng cách đặt tabindex thành -1 cho tất cả thành phần con, ngoại trừ phần tử 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ấy tiêu điểm trước đó thành -1, đặt tabindex của thành phần con được lấy làm tâm điểm thành 0 và gọi phương thức focus() trên thành phầ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 mức độ hỗ trợ bàn phím nào có thể cần cho các thành phần tuỳ chỉnh của mình, bạn có thể tham khảo Phương pháp ghi nhận tác giả 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á mà thành phần của bạn nên hỗ trợ.