HTMLtabindex quyết định element có nằm trong thứ tự Tab hay không.
html
<div tabindex="0">Tab tới được, theo đúng thứ tự DOM</div>
<div tabindex="-1" id="panel">Không tab tới, nhưng focus bằng JS được</div>
<button tabindex="3">Ép lên trước — nên tránh</button>| Giá trị | Vào tab order | element.focus() |
|---|---|---|
0 | có, theo thứ tự DOM | được |
-1 | không | được |
> 0 | có, nhảy lên trước tất cả | được |
Link, button, input, select, textarea đã focus được sẵn — thêm tabindex="0" là thừa.
Dùng -1 cho những chỗ cần đưa focus tới bằng code nhưng không nên có trong luồng Tab:
js
// sau khi chuyển route trong SPA
document.getElementById('page-title').focus() // element đó có tabindex="-1"Lưu ý: tabindex dương làm thứ tự Tab lệch hẳn khỏi thứ tự nhìn thấy.
- Chỉ cần một element
tabindex="1"là toàn bộ trang bị xáo: nó được duyệt trước mọi elementtabindex="0", kể cả những element đứng trên nó. - Muốn đổi thứ tự thì sửa thứ tự DOM.