Cách tạo thứ tự tab (tabindex) cho phần tử trong HTML

Thuộc tính tabindex kiểm soát thứ tự nhận focus khi người dùng nhấn phím Tab. Giúp cải thiện accessibility (khả năng tiếp cận) cho người dùng bàn phím.

Ví dụ minh họa

Thứ tự tab: Current Affairs (1) → Coding Ground (2) → Quantitative Aptitude (3) → Verbal Ability (4) – khác thứ tự HTML:

<!DOCTYPE html>
<html>
<body>
  <a href="https://www.tutorialspoint.com/current_affairs/index.htm" tabindex="1">Current Affairs</a><br>
  <a href="https://www.tutorialspoint.com/codingground.htm" tabindex="2">Coding Ground</a><br>
  <a href="https://www.tutorialspoint.com/quantitative_aptitude/index.htm" tabindex="3">Quantitative Aptitude</a><br>
  <a href="https://www.tutorialspoint.com/verbal_ability/index.htm" tabindex="4">Verbal Ability</a><br>
  <p>Thử nhấn Tab trên bàn phím để xem thứ tự focus thay đổi.</p>
</body>
</html>

Giá trị tabindex

Best practice Accessibility

• Ưu tiên thứ tự DOM logic – không cần tabindex>0.
• Dùng semantic HTML: <button>, <a href>, <input> tự động có tab order.
• tabindex=-1 cho container modal khi mở – focus vào container, trap focus bên trong.
• Test bằng cách chỉ dùng bàn phím (Tab, Shift+Tab, Enter, Space, Esc).