Các phần tử HTML chuẩn như <button> hoặc <input> được tích hợp miễn phí khả năng hỗ trợ tiếp cận với bàn phím. Tuy nhiên, nếu bạn đang tạo các thành phần tương tác tuỳ chỉnh, hãy sử dụng thuộc tính tabindex để đảm bảo rằng các thành phần này có thể truy cập được bằng bàn phím.
Kiểm tra xem các nút điều khiển của bạn có thể sử dụng bàn phím được không
Một công cụ như Lighthouse rất hiệu quả trong việc phát hiện một số vấn đề về hỗ trợ tiếp cận, nhưng một số chỉ có con người mới có thể kiểm thử.
Hãy thử nhấn phím Tab để di chuyển qua trang web của bạn. Bạn có thể sử dụng tất cả
các điều khiển tương tác trên trang không? Nếu không, bạn có thể cần 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 đó.
Chèn một phần tử vào thứ tự thẻ
Chèn một phần tử vào thứ tự thẻ thông thường 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 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().
Xin lưu ý rằng 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ử này 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ử đó sẽ vẫn ở 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 này mô phỏng hành vi của một thuộc tính inert được đề xuất, giúp ngăn công nghệ hỗ trợ chọn hoặc đọc các phần tử.
Tránh tabindex > 0
Bất kỳ tabindex nào 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à sau đó sẽ tăng lên.
Việc sử dụng tabindex lớn hơn 0 được xem 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 trong thứ tự thẻ, bạn nên di chuyển phần tử đó đến vị trí sớm hơn trong DOM.
Lighthouse giúp bạn dễ dàng xác định các thành phần có tabindex > 0. Chạy bài 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ả của bài kiểm tra "Không có phần tử nào có giá trị [tabindex] lớn hơn 0".
Tạo các thành phần có thể truy cập bằng cách "di chuyển tabindex"
Nếu đang tạo một thành phần phức tạp, ngoài tiêu điểm, bạn có thể cần thêm tính năng hỗ trợ bàn phím bổ sung. Hãy cân nhắc phần tử select tích hợp sẵn. Thẻ này có thể làm tâm điểm và bạn có thể sử dụng các phím mũi tên để hiển thị chức năng bổ sung (các tuỳ chọn có thể chọn).
Để triển khai chức năng tương tự trong các thành phần của riêng bạn, hãy sử dụng kỹ thuật gọi là "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ả 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ấy làm tiêu đ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 phương thức focus() 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>
Truy cập công thức bằng bàn phím
Nếu không chắc về mức độ hỗ trợ của bàn phím mà các thành phần tuỳ chỉnh có thể cần, bạn có thể tham khảo Phương pháp tạo tác giả cho ARIA 1.1. Hướng dẫn hữu ích 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ợ.