องค์ประกอบ HTML มาตรฐาน เช่น <button> หรือ <input> มีการช่วยเหลือพิเศษด้วยแป้นพิมพ์ในตัวฟรี อย่างไรก็ตาม หากคุณกำลังสร้างคอมโพเนนต์แบบอินเทอร์แอกทีฟที่กำหนดเอง ให้ใช้แอตทริบิวต์ tabindex เพื่อให้แน่ใจว่าเข้าถึงด้วยแป้นพิมพ์ได้
ตรวจสอบว่าการควบคุมของคุณเข้าถึงได้ด้วยแป้นพิมพ์หรือไม่
เครื่องมืออย่าง Lighthouse เก่งมากในการตรวจจับปัญหาด้านการช่วยเหลือพิเศษบางอย่าง แต่บางอย่างก็ทดสอบได้ด้วยมนุษย์เท่านั้น
ลองกดปุ่ม Tab เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ คุณสามารถเข้าถึงส่วนควบคุม
แบบอินเทอร์แอกทีฟทั้งหมดในหน้าเว็บได้ไหม หากไม่มี คุณอาจต้องใช้ tabindex เพื่อปรับปรุงความสามารถในการโฟกัสของการควบคุมเหล่านั้น
แทรกองค์ประกอบในลำดับแท็บ
แทรกองค์ประกอบในลำดับแท็บปกติโดยใช้ tabindex="0" เช่น
<div tabindex="0">Focus me with the TAB key</div>
หากต้องการโฟกัสองค์ประกอบ ให้กดแป้น Tab หรือเรียกใช้เมธอด focus() ขององค์ประกอบ
นำองค์ประกอบออกจากลำดับแท็บ
นำองค์ประกอบออกโดยใช้ tabindex="-1" เช่น
<button tabindex="-1">Can't reach me with the TAB key!</button>
ซึ่งจะนำองค์ประกอบออกจากลำดับแท็บตามปกติ แต่องค์ประกอบจะยังคงโฟกัสได้ด้วยการเรียกใช้เมธอด focus()
โปรดทราบว่าการใช้ tabindex="-1" กับองค์ประกอบจะไม่ส่งผลต่อองค์ประกอบย่อย
หากองค์ประกอบอยู่ในลำดับแท็บตามปกติหรือเนื่องจากค่า tabindex องค์ประกอบจะยังคงอยู่ในลำดับแท็บ
หากต้องการนำองค์ประกอบและองค์ประกอบย่อยทั้งหมดออกจากลำดับแท็บ ให้พิจารณาใช้ Polyfill inert ของ WICG
Polyfill จะจำลองลักษณะการทำงานของแอตทริบิวต์ inert ที่เสนอ ซึ่งทำให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบไม่ได้
หลีกเลี่ยงtabindex > 0
tabindex ที่มากกว่า 0 จะข้ามองค์ประกอบไปด้านหน้าของลำดับแท็บตามปกติ หากมีหลายองค์ประกอบที่มี tabindex มากกว่า 0 ลำดับของแท็บจะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และค่อยๆ เลื่อนขึ้น
การใช้ tabindex ที่มากกว่า 0 ถือเป็นรูปแบบการป้องกันเนื่องจากโปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของหน้าตามลำดับ DOM ไม่ใช่ลำดับแท็บ หากต้องการให้องค์ประกอบเร็วยิ่งขึ้นในลำดับแท็บ ควรย้ายองค์ประกอบไปยังตำแหน่งก่อนหน้าใน DOM
Lighthouse ช่วยให้ระบุองค์ประกอบได้อย่างง่ายดายด้วยค่า tabindex > 0 เรียกใช้การตรวจสอบการเข้าถึง (Lighthouse > Options > Accessibility) และมองหาผลลัพธ์ของการตรวจสอบ "ไม่มีองค์ประกอบที่มีค่า [tabindex] มากกว่า 0"
สร้างคอมโพเนนต์การช่วยเหลือพิเศษด้วย "Roving tabindex"
หากคุณกำลังสร้างคอมโพเนนต์ที่ซับซ้อน คุณอาจต้องเพิ่มการรองรับแป้นพิมพ์เพิ่มเติมนอกเหนือจากการโฟกัส พิจารณาองค์ประกอบ select ในตัว โดยจะโฟกัสได้และใช้ปุ่มลูกศรเพื่อแสดงฟังก์ชันเพิ่มเติม (ตัวเลือกที่เลือกได้)
หากต้องการใช้ฟังก์ชันการทำงานที่คล้ายกันในคอมโพเนนต์ของคุณเอง ให้ใช้เทคนิคที่เรียกว่า "Roving tabindex" โดยแท็บ Roving จะทํางานโดยตั้งค่า tabindex เป็น -1 สําหรับรายการย่อยทั้งหมด ยกเว้นรายการที่ใช้งานอยู่ในปัจจุบัน จากนั้นคอมโพเนนต์จะใช้ Listener เหตุการณ์ของแป้นพิมพ์เพื่อระบุว่าผู้ใช้ได้กดแป้นใดไปแล้ว
เมื่อเกิดกรณีนี้ขึ้น คอมโพเนนต์จะตั้งค่า tabindex ของบุตรหลานที่โฟกัสก่อนหน้าเป็น -1 ตั้งค่า tabindex ของรายการย่อยที่ต้องโฟกัสเป็น 0 และเรียกใช้เมธอด focus()
ก่อน
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
หลัง
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
สูตรอาหารการเข้าถึงด้วยแป้นพิมพ์
หากไม่แน่ใจว่าต้องใช้แป้นพิมพ์ในระดับใดที่รองรับคอมโพเนนต์ที่กำหนดเอง คุณอาจดูแนวทางปฏิบัติในการเขียน ARIA 1.1 ได้ คู่มือที่มีประโยชน์นี้จะแสดงรูปแบบ UI ทั่วไปและระบุคีย์ที่คอมโพเนนต์ควรรองรับ