ใช้แอตทริบิวต์ tabindex ใน HTML เพื่อตั้งค่าลำดับแท็บขององค์ประกอบ ให้คุณควบคุมลำดับการใช้ปุ่ม TAB บนคีย์บอร์ดได้
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อสร้างลำดับแท็บขององค์ประกอบใน 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/verbal_ability/index.htm" tabindex="4">Verbal Ability</a> <br>
<a href="https://www.tutorialspoint.com/quantitative_aptitude/index.htm" tabindex="3">Quantitative Aptitude</a> <br>
<p>เราเปลี่ยนลำดับแท็บข้างต้น ลองกด TAB บนคีย์บอร์ดเพื่อดูการเปลี่ยนแปลง</p>
</body>
</html>
ค่าของ tabindex:
- ลบ (เช่น -1) - องค์ประกอบเข้าถึงได้ด้วยโปรแกรม (JavaScript focus()) แต่ข้ามใน Tab order
- 0 - องค์ประกอบอยู่ใน Tab order ตามลำดับใน DOM (ค่าเริ่มต้น)
- บวก (1, 2, 3...) - องค์ประกอบอยู่ใน Tab order ตามตัวเลข (น้อยกว่าก่อน) แล้วค่อยตาม DOM order
แนวทางปฏิบัติ: หลีกเลี่ยง tabindex บวก มากกว่า 0 ให้เรียง DOM ให้ถูกต้องตามลำดับอ่าน/โฟกัสที่เป็นเหตุเป็นผล แทน
