Sử dụng chỉ mục thẻ

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Thứ tự nhấn phím Tab mặc định do vị trí DOM của các phần tử HTML ngữ nghĩa cung cấp rất thuận tiện, nhưng có thể có những lúc bạn cần sửa đổi thứ tự nhấn phím Tab. Di chuyển các phần tử trong HTML là lý tưởng, nhưng có thể không khả thi. Trong những trường hợp này, bạn có thể sử dụng thuộc tính HTML tabindex để đặt rõ ràng vị trí của thẻ cho một phần tử.

Bạn có thể áp dụng tabindex cho mọi phần tử, mặc dù không nhất thiết phải hữu ích trên mọi phần tử và lấy một dải giá trị số nguyên. Với tabindex, bạn có thể chỉ định một thứ tự rõ ràng cho các phần tử trang có thể lấy tiêu điểm, chèn một phần tử không thể lấy tiêu điểm vào thứ tự nhấn phím Tab 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. Bạn có thể lấy tiêu điểm cho phần tử bằng cách nhấn Tab và có thể lấy tiêu điểm cho phần tử bằng cách gọi phương thức focus() của phần tử đó.

tabindex="-1": Xoá một phần tử khỏi thứ tự thẻ tự nhiên, nhưng phần tử đó vẫn có thể được 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 đều đưa phần tử đó lên đầu thứ tự thẻ tự nhiên. 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.

Điều này đặc biệt đúng đối với các phần tử không phải là phần tử đầu vào, chẳng hạn như tiêu đề, hình ảnh hoặc tiêu đề bài viết. Nếu có thể, bạn nên sắp xếp mã nguồn sao cho trình tự DOM cung cấp thứ tự thẻ logic. Nếu bạn sử dụng tabindex, hãy hạn chế sử dụng cho các chế độ kiểm soát tuỳ chỉnh có tính tương tác như nút, thẻ, trình đơn thả xuống và trường văn bản; tức là những phần tử mà người dùng có thể mong đợi sẽ cung cấp dữ liệu đầu vào.

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 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 liền mạch cho người dùng. Ví dụ: nếu bạn tạo một trang đơn mạnh mẽ với nhiều phần nội dung, trong đó không phải tất cả nội dung đều hiển thị đồng thời. Điều này có nghĩa 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à đặt tabindex là -1, đồng thời gọi phương thức focus của vùng nội dung đó. Đ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ữ cảnh mà người dùng cảm nhận được đồng bộ hoá với nội dung trực quan 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 độ thành phần điều khiển, chẳng hạn như với các thành phần tuỳ chỉnh.

Ví dụ: phần tử select có thể nhận tiêu điểm cơ bản, nhưng sau đó, bạn có thể dùng các phím mũi tên để hiển thị các lựa chọn có thể chọn khác. Nếu tạo một phần tử select tuỳ chỉnh, bạn cần sao chép hành vi đó để 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.

Bạn có thể gặp khó khăn khi xác định 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 viết ứng dụng Internet phong phú hỗ trợ tiếp cận (ARIA) liệt kê các loại thành phần và những loại thao tác bàn phím mà chúng hỗ trợ.

Có thể bạn đang làm việc trên Custom Elements (Phần tử tuỳ chỉnh) trông giống như một nhóm nút chọn, nhưng có giao diện và hành vi riêng biệt.

<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 loại bàn phím mà họ cần hỗ trợ, hãy xem hướng dẫn về Các phương pháp tạo ARIA. Mục 2 chứa danh sách các mẫu thiết kế, bao gồm bảng đặc điểm cho các nhóm nút chọn, 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 thường gặp của bàn phím cần đượ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 thành phần mới, chúng ta sử dụng một kỹ thuật gọi là chỉ mục tab di động.

Chỉ mục thẻ di động 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 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 một 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 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 sẽ được lấy tiêu điểm thành 0 và gọi phương thức lấy tiêu điểm trên thành phần con đó.

<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 chuyển đến phần tử con cuối cùng (hoặc đầu tiên, tuỳ thuộc vào hướng mà họ đang di chuyển tiêu điểm), tiêu điểm sẽ quay lại phần tử con đầu tiên (hoặc cuối cùng).

Hãy thử ví dụ sau. Kiểm tra phần tử trong Công cụ cho nhà phát triển để quan sát tabindex di chuyển từ một nút chọn này sang nút chọn khác.

Phương thức 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ì điều này có thể dẫn đến những 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à ghi lại hành vi của phím tab, nhưng ngăn người dùng rời khỏi tiện ích này cho đến khi hoàn tất. Đây được gọi là bẫy bàn phím và có thể khiến người dùng rất khó chịu.

Mục 2.1.2 của WCAG quy định rằng tiêu điểm bàn phím không bao giờ được khoá hoặc bị mắc kẹt ở một phần tử cụ thể trên trang. Người dùng chỉ cần dùng bàn phím là có thể di chuyển đến và đi từ mọi phần tử trên trang.

Trường hợp ngoại lệ đối với quy tắc này là phương thức xuất hiện. Tuy nhiên, bạn vẫn nên tránh sử dụng tabindex khi tạo một phương thức. Với inert, bạn có thể đảm bảo rằng người dùng không vô tình tương tác với một phần tử (một bẫy bàn phím có chủ ý). Sử dụng phần tử <dialog> (theo mặc định là phần tử trơ) để tạo một phương thức cho người dùng trong khi chặn các lượt nhấp và thẻ bên ngoài phương thức. Điều này giúp người dùng tập trung vào một lựa chọn bắt buộc.