HTML tabindex global attribute

Try it

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

Thuộc tính nhận một số nguyên làm giá trị, với các kết quả khác nhau tùy thuộc vào giá trị của số nguyên:

• Giá trị âm (giá trị âm cụ thể thực sự không quan trọng, thường là tabindex="-1") có nghĩa là phần tử không thể tiếp cận được thông qua điều hướng bàn phím tuần tự.

  Note: tabindex="-1" có thể hữu ích cho các phần tử không nên được điều hướng trực tiếp bằng phím Tab, nhưng cần có focus bàn phím được đặt cho chúng. Ví dụ bao gồm cửa sổ modal ngoài màn hình cần được focus khi xuất hiện, hoặc thông báo lỗi gửi biểu mẫu cần được focus ngay khi biểu mẫu lỗi được gửi.

• tabindex="0" có nghĩa là phần tử nên có thể focus trong điều hướng bàn phím tuần tự, sau các giá trị tabindex dương. Thứ tự điều hướng focus của các phần tử này được xác định theo thứ tự trong mã nguồn tài liệu.

• Giá trị dương có nghĩa là phần tử nên có thể focus trong điều hướng bàn phím tuần tự, với thứ tự được xác định bởi giá trị của số. Nghĩa là tabindex="4" được focus trước tabindex="5" và tabindex="0", nhưng sau tabindex="3". Nếu nhiều phần tử có cùng giá trị tabindex dương, thứ tự tương đối của chúng theo vị trí trong mã nguồn tài liệu. Giá trị tối đa cho tabindex là 32767.

• Nếu thuộc tính tabindex được bao gồm mà không có giá trị, thì việc phần tử có thể focus hay không được xác định bởi tác nhân người dùng.

  Warning: Bạn chỉ nên sử dụng 0 và -1 làm giá trị tabindex. Tránh sử dụng giá trị tabindex lớn hơn 0 và các thuộc tính CSS có thể thay đổi thứ tự của các phần tử HTML có thể focus (Sắp xếp các flex item). Làm như vậy sẽ khó khăn cho những người dùng dựa vào bàn phím để điều hướng hoặc công nghệ hỗ trợ trong việc điều hướng và vận hành nội dung trang. Thay vào đó, hãy viết tài liệu với các phần tử theo thứ tự logic.

Một số phần tử HTML có thể focus có giá trị tabindex mặc định là 0 được đặt bởi tác nhân người dùng. Các phần tử này là <a> hoặc <area> với thuộc tính href, <button>, <frame> Deprecated , <iframe>, <input>, <object>, <select>, <textarea>, và phần tử SVG <a>, hoặc phần tử <summary> cung cấp tóm tắt cho phần tử <details>. Các nhà phát triển không nên thêm thuộc tính tabindex vào các phần tử này trừ khi nó thay đổi hành vi mặc định (ví dụ: bao gồm giá trị âm sẽ xóa phần tử khỏi thứ tự điều hướng focus).

Vấn đề về khả năng tiếp cận

Tránh sử dụng thuộc tính tabindex kết hợp với nội dung không tương tác để làm cho thứ gì đó được thiết kế để tương tác có thể focus bằng bàn phím. Một ví dụ là sử dụng phần tử <div> để mô tả một nút, thay vì sử dụng phần tử <button>.

Các thành phần tương tác được tạo bằng các phần tử không tương tác không được liệt kê trong cây khả năng tiếp cận. Điều này ngăn công nghệ hỗ trợ điều hướng đến và thao tác với các thành phần đó. Nội dung nên được mô tả theo ngữ nghĩa bằng cách sử dụng các phần tử tương tác (<a>, <button>, <details>, <input>, <select>, <textarea>, v.v.) thay thế. Các phần tử này có các vai trò và trạng thái tích hợp sẵn để truyền đạt trạng thái đến khả năng tiếp cận mà nếu không sẽ phải được quản lý bởi ARIA.

• Using the tabindex attribute | Vispero

Đặc tả

Tương thích trình duyệt

Xem thêm

• Tất cả thuộc tính toàn cục
• HTMLElement.tabIndex phản ánh thuộc tính này
• Vấn đề khả năng tiếp cận với tabindex: xem Don't Use Tabindex Greater than 0 của Adrian Roselli
• Reading order