tabindexแอตทริบิวต์อย่างชัดเจนกำหนดเพื่อนำทางสำหรับองค์ประกอบที่สามารถโฟกัส (โดยทั่วไปแล้วการเชื่อมโยงและการควบคุมรูปแบบ) ภายในหน้าเว็บ นอกจากนี้ยังสามารถใช้เพื่อกำหนดว่าองค์ประกอบควรโฟกัสได้หรือไม่
[ทั้งสอง] tabindex="0"และtabindex="-1"มีความหมายพิเศษและมีฟังก์ชันการทำงานที่แตกต่างกันใน HTML ค่าของ0บ่งชี้ว่าควรวางองค์ประกอบในลำดับการนำทางเริ่มต้น นี้จะช่วยให้องค์ประกอบที่ไม่สามารถโฟกัสกำเนิด (เช่น<div>, <span>และ<p>) จะได้รับการโฟกัสของแป้นพิมพ์ แน่นอนว่าโดยทั่วไปเราควรใช้ลิงก์และการควบคุมแบบฟอร์มสำหรับองค์ประกอบแบบโต้ตอบทั้งหมด แต่สิ่งนี้จะช่วยให้องค์ประกอบอื่น ๆ สามารถโฟกัสได้และกระตุ้นการโต้ตอบ
tabindex="-1"ค่าเอาองค์ประกอบจากการไหลนำทางเริ่มต้น (เช่นผู้ใช้ไม่สามารถแท็บไป) แต่มันก็ช่วยให้ได้รับการมุ่งเน้นการเขียนโปรแกรม , ความหมายโฟกัสสามารถตั้งค่าได้จากการเชื่อมโยงหรือสคริปต์. ** นี้สามารถมากมีประโยชน์สำหรับองค์ประกอบที่ไม่ควรแท็บ แต่อาจจำเป็นต้องตั้งโฟกัสไว้ที่องค์ประกอบเหล่านั้น
ตัวอย่างที่ดีคือหน้าต่างโต้ตอบโมดอล - เมื่อเปิดขึ้นควรตั้งโฟกัสไปที่กล่องโต้ตอบเพื่อให้โปรแกรมอ่านหน้าจอเริ่มอ่านและแป้นพิมพ์จะเริ่มนำทางภายในกล่องโต้ตอบ เนื่องจากกล่องโต้ตอบ (อาจเป็นเพียง<div>องค์ประกอบ) ไม่tabindex="-1"สามารถโฟกัสได้ตามค่าเริ่มต้นการกำหนดจึงอนุญาตให้ตั้งค่าโฟกัสด้วยสคริปต์เมื่อมีการนำเสนอ
ค่าของ-1ยังสามารถเป็นประโยชน์ในวิดเจ็ตและเมนูที่ซับซ้อนซึ่งใช้ปุ่มลูกศรหรือปุ่มทางลัดอื่น ๆเพื่อให้แน่ใจว่ามีเพียงองค์ประกอบเดียวในวิดเจ็ตเท่านั้นที่สามารถนำทางได้ด้วยปุ่มแท็บ แต่ยังคงอนุญาตให้ตั้งโฟกัสบนส่วนประกอบอื่น ๆ ภายในวิดเจ็ตได้
ที่มา: http://webaim.org/techniques/keyboard/tabindex
นี่คือเหตุผลที่คุณต้องการtabindex="-1"โมดอล<div>เพื่อให้ผู้ใช้สามารถเข้าถึงเมาส์และแป้นพิมพ์ลัดทั่วไปได้ หวังว่าจะช่วยได้