Cách chỉ định thứ tự tab (tabindex) cho phần tử trong HTML?

Thuộc tính tabindex kiểm soát thứ tự focus khi nhấn phím Tab. Giá trị:

• tabindex="0": Tham gia thứ tự tự nhiên (theo thứ tự DOM).
• tabindex=">0": Thứ tự ưu tiên (số nhỏ trước) — không khuyến khích (gây rối luồng tự nhiên).
• tabindex="-1": Loại khỏi thứ tự Tab, nhưng có thể focus bằng JS (element.focus()). Dùng cho modal, dropdown, skip link.

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <a href="https://example.com/1" tabindex="1">Link 1</a><br>
    <a href="https://example.com/2" tabindex="2">Link 2</a><br>
    <a href="https://example.com/3" tabindex="4">Link 3</a><br>
    <a href="https://example.com/4" tabindex="3">Link 4</a><br>
    <p>Thứ tự Tab: 1 → 2 → 4 → 3 (do tabindex). Dùng Tab để xem.</p>
  </body>
</html>

Khuyến nghị truy cập (Accessibility)

• Tránh tabindex=">0" — hãy sắp xếp DOM theo thứ tự logic.
• Dùng tabindex="-1" cho: modal focus trap, skip to main content, widget nội bộ.
• Phần tử tương tác gốc (<a>, <button>, <input>, <select>, <textarea>) đã có tabindex=0 ngầm.