Thứ tự thẻ mặc định được cung cấp bởi vị trí DOM của các phần tử HTML ngữ nghĩa là
thuận tiện, nhưng có thể đôi khi bạn cần phải sửa đổi thứ tự tab. Di chuyển
các phần tử trong HTML là lựa chọn lý tưởng, nhưng có thể không khả thi. Trong những trường hợp này, bạn
có thể dùng thuộc tính HTML tabindex để đặt thẻ của một phần tử một cách rõ ràng
vị trí.
Có thể áp dụng tabindex cho mọi phần tử, mặc dù không nhất thiết
hữu ích trên mọi phần tử và nhận một khoảng các 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ả.
Điều này đặc biệt đúng với các phần tử không đầu vào như tiêu đề, hình ảnh hoặc bài viết
tựa đề. Khi có thể, tốt nhất là bạn nên sắp xếp mã nguồn để trình tự DOM cung cấp
thứ tự tab logic. Nếu bạn sử dụng tabindex, hãy chỉ định tính năng tương tác tuỳ chỉnh
các thành phần điều khiển như nút, thẻ, trình đơn thả xuống và trường văn bản; tức là các phần tử
người dùng có thể muốn cung cấp đầu vào.
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, thì 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.
Quản lý tiêu điểm ở cấp trang
Đôi khi, tabindex là cần thiết để mang lại 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, nhưng
tất cả nội dung đều hiển thị đồng thời. Điều này có thể là về đườ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 thành phần tuỳ chỉnh.
Ví dụ: phần tử select có thể nhận được tiêu điểm cơ bản, nhưng một khi
tại đó, bạn có thể sử dụng các phím mũi tên để hiện thêm các tuỳ chọn có thể chọn.
Nếu tạo một phần tử select tuỳ chỉnh, bạn cần sao chép phần tử đó
để người dùng bàn phím vẫn có thể tương tác với chế độ điều khiển của bạn.
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ợ.
Có thể bạn đang xử lý Phần tử tuỳ chỉnh giống như một tập hợp các nút chọn, nhưng với kiểu dáng độc đáo và hành vi.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Để xác định xem họ cần hỗ trợ bàn phím nào, hãy kiểm tra Phương pháp ghi nhận quyền tác giả của ARIA hướng dẫn. Phần 2 chứa danh sách các mẫu thiết kế, bao gồm bảng đặc điểm cho radio nhóm, thành phần hiện có phù hợp nhất với phần tử mới của bạn.
Một trong những hành vi bàn phím phổ biến cần được được hỗ trợ là các phím mũi tên lên/xuống/trái/phải. Để thêm hành vi này vào phương thức mới chúng tôi sẽ sử dụng kỹ thuật có tên là di chuyển chỉ mục thẻ.
Chỉ mục thẻ lưu trữ hoạt động bằng cách đặt tabindex thành -1 cho tất cả phần tử con, ngoại trừ
một tài khoản hiện đang hoạt động.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Thành phần này sử dụng trình nghe sự kiện bàn phím để xác định phím nào
thao tác nhấn của người dùng; khi điều này xảy ra, lệnh này sẽ đặt
tabindex 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 hàm
tập trung vào nó.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Khi người dùng đến trang cuối cùng (hoặc đầu tiên, tuỳ thuộc vào hướng họ đang di chuyển) di chuyển tiêu điểm con, tiêu điểm lặp lại quanh vị trí đầu tiên (hoặc cuối cùng) trẻ.
Hãy thử ví dụ sau đây. Kiểm tra phần tử trong Công cụ cho nhà phát triển để quan sát chỉ mục thẻ di chuyển từ đài phát này sang đài phát tiếp theo.
Mô-đun và bẫy bàn phím
Tốt nhất là bạn nên tránh quản lý tiêu điểm theo cách thủ công vì việc này có thể dẫn đến các tình huống phức tạp. Ví dụ: một tiện ích tự động hoàn thành cố gắng quản lý tiêu điểm và ảnh chụp hành vi của thẻ nhưng ngăn người dùng rời khỏi thẻ cho đến khi hoàn tất. Đây được gọi là bẫy bàn phím và có thể gây khó chịu cho người dùng.
Mục 2.1.2 của WCAG nêu rõ rằng không bao giờ được khoá tiêu điểm bàn phím hoặc bị mắc kẹt ở một phần tử trang cụ thể. Người dùng phải di chuyển được đến và đi từ tất cả các phần tử trang mà chỉ cần sử dụng .
Trường hợp ngoại lệ của quy tắc này là phương thức. Tuy nhiên, bạn vẫn nên tránh sử dụng
tabindex khi tạo một cửa sổ phụ. Với inert, bạn có thể
đảm bảo người dùng không thể vô tình tương tác với một phần tử (một phần tử có chủ đích
bẫy bàn phím). Sử dụng <dialog>
là phần tử trơ theo mặc định, để tạo một phương thức cho người dùng trong khi chặn
số nhấp chuột và thẻ nằm ngoài cửa sổ phụ. Điều này cho phép người dùng tập trung vào một
lựa chọn bắt buộc.