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