องค์ประกอบ HTML มาตรฐาน เช่น <button> หรือ <input> มีการช่วยเหลือพิเศษด้วยแป้นพิมพ์ในตัว และควรใช้เมื่อเป็นไปได้ แต่หากต้องการสร้างองค์ประกอบแบบอินเทอร์แอกทีฟที่กำหนดเอง คุณจะสร้างพฤติกรรมของผู้ใช้ตามที่คาดไว้ได้โดยการเพิ่ม tabindex
เพิ่ม tabindex ไปยังเนื้อหาแบบอินเทอร์แอกทีฟเท่านั้น แม้จะเป็นเนื้อหาที่สำคัญ เช่น รูปภาพหลัก ผู้ใช้โปรแกรมอ่านหน้าจอก็เข้าใจได้โดยไม่ต้องเพิ่มโฟกัส
Tabindex คืออะไร
ในกรณีที่จำเป็นต้องแก้ไขลำดับแท็บเริ่มต้นที่มาจากองค์ประกอบที่มีในตัว คุณสามารถใช้แอตทริบิวต์ HTML tabindex เพื่อตั้งค่าตำแหน่งแท็บขององค์ประกอบได้อย่างชัดเจน
tabindex จะใช้กับองค์ประกอบใดก็ได้ แต่ควรใช้เฉพาะกับองค์ประกอบแบบอินเทอร์แอกทีฟเท่านั้น และจะรับค่าเป็นช่วงของจำนวนเต็ม คุณสามารถใช้ tabindex เพื่อระบุลำดับที่ชัดเจนสำหรับองค์ประกอบของหน้าที่โฟกัสได้ แทรกองค์ประกอบที่โฟกัสไม่ได้ในลำดับแท็บ และนำองค์ประกอบออกจากลำดับแท็บ เช่น
tabindex="0": แทรกองค์ประกอบในลำดับแท็บตามปกติ โฟกัสองค์ประกอบได้โดยกด Tab และโฟกัสองค์ประกอบได้โดยเรียกใช้เมธอด focus()
tabindex="-1": นำองค์ประกอบออกจากลำดับแท็บตามปกติ แต่จะยังคงโฟกัสองค์ประกอบได้โดยเรียกใช้เมธอด focus()
tabindex="5": ดัชนีแท็บที่มากกว่า 0 จะนำองค์ประกอบนั้นไปไว้หน้าลำดับแท็บตามปกติ หากมีหลายองค์ประกอบที่มี Tabindex มากกว่า 0 ลำดับของแท็บจะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และเลื่อนขึ้น การใช้ Tabindex ที่มากกว่า 0 จะถือว่าเป็นรูปแบบต่อต้าน
ตรวจสอบว่าเข้าถึงตัวควบคุมได้ด้วยแป้นพิมพ์
เครื่องมืออย่าง Lighthouse เป็นเครื่องมือที่ยอดเยี่ยมในการตรวจหาปัญหาด้านการช่วยเหลือพิเศษโดยอัตโนมัติ อย่างไรก็ตาม มนุษย์ยังต้องทำการทดสอบด้วยตนเอง
ลองกดแป้น Tab เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ คุณสามารถเข้าถึงส่วนควบคุม
แบบอินเทอร์แอกทีฟทั้งหมดบนหน้าไหม หากไม่ คุณอาจต้องใช้ tabindex เพื่อปรับปรุงความสามารถในการโฟกัสของตัวควบคุมเหล่านั้น
จัดการโฟกัสที่ระดับหน้าเว็บ
บางครั้ง tabindex ก็ช่วยสร้างประสบการณ์ของผู้ใช้ที่ราบรื่น ตัวอย่างเช่น หากคุณสร้างหน้าเว็บเดียวที่มีประสิทธิภาพโดยมีส่วนเนื้อหาแตกต่างกัน เนื้อหาบางส่วนถูกซ่อนไว้ ณ จุดต่างๆ ในการโหลดหน้าเว็บ ซึ่งอาจหมายความว่าลิงก์การนำทางจะเปลี่ยนเนื้อหาที่มองเห็นได้ โดยไม่ต้องรีเฟรชหน้าเว็บ
ในกรณีนี้ ให้ระบุพื้นที่เนื้อหาที่เลือกและกำหนดพื้นที่ tabindex เป็น -1 แล้วเรียกใช้เมธอด focus ซึ่งจะทำให้เนื้อหาไม่ปรากฏใน
ลำดับแท็บตามปกติ เทคนิคนี้เรียกว่าโฟกัสการจัดการ โดยช่วยให้บริบทที่รับรู้ของผู้ใช้ซิงค์กับเนื้อหาภาพของเว็บไซต์อยู่เสมอ
จัดการโฟกัสในคอมโพเนนต์
ในบางกรณี คุณต้องจัดการโฟกัสที่ระดับการควบคุมด้วย เช่น ด้วยองค์ประกอบที่กำหนดเอง
การรู้ลักษณะการทำงานของแป้นพิมพ์ที่อาจเป็นเรื่องยาก คู่มือ Accessible Rich Internet Applications (ARIA) Authoring Practices แสดงประเภทของคอมโพเนนต์และประเภทการทำงานของแป้นพิมพ์ที่รองรับ
แทรกองค์ประกอบลงในลำดับแท็บ
แทรกองค์ประกอบลงในลำดับแท็บตามปกติโดยใช้ 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 ของ WICG inert
โพลีฟิลจะจำลองลักษณะการทำงานของแอตทริบิวต์ inert ที่เสนอ
ซึ่งป้องกันไม่ให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบได้
หลีกเลี่ยง tabindex > 0
tabindex ที่มากกว่า 0 จะข้ามองค์ประกอบไปอยู่หน้าลำดับแท็บตามปกติ หากมีองค์ประกอบหลายรายการที่มี tabindex มากกว่า 0 ลำดับแท็บจะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และค่อยๆ เลื่อนขึ้น
การใช้ tabindex ที่มากกว่า 0 จะถือว่าเป็นรูปแบบต่อต้านเนื่องจากโปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของหน้าเว็บตามลำดับ DOM ไม่ใช่ลำดับแท็บ หากคุณต้องการให้องค์ประกอบมาก่อนในลำดับแท็บ ควรย้ายไปยังตำแหน่งก่อนหน้าใน DOM
Lighthouse จะช่วยให้คุณระบุองค์ประกอบที่มี tabindex > 0 ได้ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > Options > Accessibility) และมองหาผลลัพธ์ของการตรวจสอบ "ไม่มีองค์ประกอบที่มีค่า [tabindex] มากกว่า 0"
ใช้ "การเดินทาง tabindex"
หากสร้างคอมโพเนนต์ที่ซับซ้อน คุณอาจต้องเพิ่มการรองรับแป้นพิมพ์เพิ่มเติมนอกเหนือจากการโฟกัส หากทำได้ ให้ใช้องค์ประกอบ select ในตัว โฟกัสได้และทำให้แป้นลูกศรแสดงตัวเลือกเพิ่มเติมที่เลือกได้
หากต้องการใช้ฟังก์ชันที่คล้ายกันในคอมโพเนนต์ของคุณเอง คุณอาจใช้เทคนิคชื่อ "สำรวจ tabindex" Roving Tabindex ทำงานโดยการตั้งค่า 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 ทั่วไปและระบุคีย์ที่คอมโพเนนต์ควรรองรับ