การใช้ Tabindex

ลําดับการกด Tab เริ่มต้นที่ได้จากตําแหน่ง DOM ขององค์ประกอบ HTML เชิงความหมายนั้นสะดวก แต่บางครั้งคุณอาจต้องแก้ไขลําดับการกด Tab การย้ายองค์ประกอบใน HTML เป็นวิธีที่เหมาะที่สุด แต่อาจไม่สามารถทำได้ ในกรณีเหล่านี้ คุณสามารถใช้แอตทริบิวต์ HTML tabindex เพื่อตั้งค่าตำแหน่งแท็บขององค์ประกอบอย่างชัดเจน

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.5
  • Safari: 3.1

แหล่งที่มา

tabindex ใช้ได้กับองค์ประกอบใดก็ได้ แม้ว่าจะไม่จําเป็นต้องมีประโยชน์กับองค์ประกอบทุกรายการก็ตาม และจะใช้ค่าจำนวนเต็มได้ การใช้ tabindex จะช่วยให้คุณระบุลําดับที่ชัดเจนสําหรับองค์ประกอบของหน้าเว็บที่โฟกัสได้ แทรกองค์ประกอบที่โฟกัสไม่ได้ลงในลําดับการกด Tab และนําองค์ประกอบออกจากลําดับการกด Tab ได้ เช่น

tabindex="0": แทรกองค์ประกอบลงในลําดับแท็บตามปกติ คุณสามารถโฟกัสองค์ประกอบได้โดยกด Tab และโฟกัสองค์ประกอบได้โดยเรียกใช้เมธอด focus() ขององค์ประกอบ

tabindex="-1": นำองค์ประกอบออกจากลําดับแท็บตามปกติ แต่องค์ประกอบจะยังคงได้รับการโฟกัสได้ด้วยการเรียกใช้เมธอด focus()

tabindex="5": ค่า tabindex ที่มากกว่า 0 จะนําองค์ประกอบนั้นไปไว้ที่ด้านหน้าของลําดับการกด Tab ตามปกติ หากมีองค์ประกอบหลายรายการที่มี tabindex มากกว่า 0 ลําดับการกด Tab จะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และไล่ลำดับขึ้นไป

ไม่สําเร็จ

โดยเฉพาะอย่างยิ่งสำหรับองค์ประกอบที่ไม่ใช่อินพุต เช่น ส่วนหัว รูปภาพ หรือชื่อบทความ หากเป็นไปได้ คุณควรจัดเรียงซอร์สโค้ดเพื่อให้ลําดับ DOM มีลําดับแท็บที่สมเหตุสมผล หากใช้ tabindex ให้จำกัดไว้เฉพาะตัวควบคุมแบบอินเทอร์แอกทีฟที่กําหนดเอง เช่น ปุ่ม แท็บ เมนูแบบเลื่อนลง และช่องข้อความ กล่าวคือ องค์ประกอบที่ผู้ใช้อาจคาดหวังว่าจะให้ป้อนข้อมูล

เพิ่ม tabindex เฉพาะในเนื้อหาแบบอินเทอร์แอกทีฟเท่านั้น แม้ว่าเนื้อหาจะสำคัญ เช่น รูปภาพหลัก ผู้ใช้โปรแกรมอ่านหน้าจอก็เข้าใจเนื้อหาได้โดยไม่ต้องเพิ่มโฟกัส

จัดการโฟกัสที่ระดับหน้า

บางครั้ง tabindex เป็นสิ่งที่จําเป็นต่อประสบการณ์การใช้งานที่ราบรื่น เช่น หากคุณสร้างหน้าเว็บเดียวที่มีประสิทธิภาพซึ่งมีส่วนเนื้อหาที่แตกต่างกัน ซึ่งเนื้อหาบางส่วนอาจไม่แสดงพร้อมกัน ซึ่งอาจหมายความว่าลิงก์การนำทางจะเปลี่ยนเนื้อหาที่มองเห็นได้โดยไม่ต้องรีเฟรชหน้าเว็บ

ในกรณีนี้ ให้ระบุพื้นที่เนื้อหาที่เลือกและตั้งค่า tabindex ของ -1 แล้วเรียกใช้เมธอด focus วิธีนี้ช่วยให้มั่นใจว่าเนื้อหาจะไม่ปรากฏในลำดับแท็บตามปกติ เทคนิคนี้เรียกว่าการจัดการโฟกัส ซึ่งช่วยให้บริบทที่ผู้ใช้รับรู้สอดคล้องกับเนื้อหาภาพในเว็บไซต์

จัดการโฟกัสในคอมโพเนนต์

ในบางกรณี คุณต้องจัดการโฟกัสที่ระดับการควบคุมด้วย เช่น กับคอมโพเนนต์ที่กําหนดเอง

เช่น องค์ประกอบ select สามารถรับโฟกัสพื้นฐานได้ แต่เมื่อโฟกัสแล้ว คุณจะใช้ปุ่มลูกศรเพื่อแสดงตัวเลือกเพิ่มเติมที่เลือกได้ หากคุณสร้างองค์ประกอบ select ที่กำหนดเอง คุณควรจำลองลักษณะการทำงานนั้นเพื่อให้ผู้ใช้แป้นพิมพ์ยังคงโต้ตอบกับการควบคุมได้

การทราบว่าควรใช้ลักษณะการทํางานของแป้นพิมพ์ใดนั้นอาจเป็นเรื่องยาก คำแนะนำแนวทางการเขียนแอปพลิเคชัน Rich Internet ที่เข้าถึงได้ (ARIA) แสดงรายการประเภทคอมโพเนนต์และการดำเนินการบนแป้นพิมพ์ที่คอมโพเนนต์รองรับ

ตัวอย่างเช่น คุณอาจกำลังทํางานกับองค์ประกอบที่กําหนดเองซึ่งคล้ายกับชุดปุ่มตัวเลือก แต่มีรูปลักษณ์และลักษณะการทํางานที่เป็นเอกลักษณ์

<radio-group>
   
<radio-button>Water</radio-button>
   
<radio-button>Coffee</radio-button>
   
<radio-button>Tea</radio-button>
   
<radio-button>Cola</radio-button>
   
<radio-button>Ginger Ale</radio-button>
</radio-group>

หากต้องการตรวจสอบว่าต้องใช้การรองรับแป้นพิมพ์แบบใด ให้ดูคำแนะนำแนวทางการเขียน ARIA ส่วนที่ 2 มีรายการรูปแบบการออกแบบ ซึ่งรวมถึงตารางลักษณะของกลุ่มตัวเลือก ซึ่งเป็นคอมโพเนนต์ที่มีอยู่ซึ่งตรงกับองค์ประกอบใหม่มากที่สุด

ลักษณะการทำงานทั่วไปอย่างหนึ่งของแป้นพิมพ์ที่ควรรองรับคือแป้นลูกศรขึ้น/ลง/ซ้าย/ขวา หากต้องการเพิ่มลักษณะการทำงานนี้ลงในคอมโพเนนต์ใหม่ เราใช้เทคนิคที่เรียกว่า roving tabindex

การทำงานของ Roving tabindex คือการตั้งค่า tabindex เป็น -1 สำหรับองค์ประกอบย่อยทั้งหมด ยกเว้นองค์ประกอบที่ใช้งานอยู่

<radio-group>
 
<radio-button tabindex="0">Water</radio-button>
 
<radio-button tabindex="-1">Coffee</radio-button>
 
<radio-button tabindex="-1">Tea</radio-button>
 
<radio-button tabindex="-1">Cola</radio-button>
 
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

คอมโพเนนต์ใช้ Listener เหตุการณ์แป้นพิมพ์เพื่อระบุแป้นที่ผู้ใช้กด เมื่อเกิดเหตุการณ์นี้ขึ้น ระบบจะตั้งค่า tabindex ของรายการย่อยที่โฟกัสก่อนหน้านี้เป็น -1, ตั้งค่า tabindex ของรายการย่อยที่จะโฟกัสเป็น 0 และเรียกใช้เมธอด focus กับรายการย่อยนั้น

<radio-group>
   
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
   
<radio-button tabindex="-1">Water</radio-button>
   
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
   
<radio-button tabindex="-1">Tea</radio-button>
   
<radio-button tabindex="-1">Cola</radio-button>
   
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

เมื่อผู้ใช้ไปถึงองค์ประกอบย่อยสุดท้าย (หรือแรก ทั้งนี้ขึ้นอยู่กับทิศทางที่ผู้ใช้ย้ายโฟกัส) โฟกัสจะวนกลับไปที่องค์ประกอบย่อยแรก (หรือสุดท้าย)

ลองดูตัวอย่างต่อไปนี้ ตรวจสอบองค์ประกอบใน DevTools เพื่อดูว่า tabindex เลื่อนจากตัวเลือกแบบปุ่มตัวเลือกรายการหนึ่งไปยังอีกรายการหนึ่ง

โมดัลและกับดักของแป้นพิมพ์

เราขอแนะนำให้หลีกเลี่ยงการจัดการโฟกัสด้วยตนเอง เนื่องจากอาจทำให้เกิดสถานการณ์ที่ซับซ้อน เช่น วิดเจ็ตการเติมข้อความอัตโนมัติที่พยายามจัดการโฟกัสและบันทึกลักษณะการทำงานของแท็บ แต่ป้องกันไม่ให้ผู้ใช้ออกจากวิดเจ็ตจนกว่าวิดเจ็ตจะทำงานเสร็จ ลักษณะนี้เรียกว่าการติดกับบนแป้นพิมพ์ ซึ่งอาจทำให้ผู้ใช้หงุดหงิดมาก

ส่วน 2.1.2 ของ WCAG ระบุว่าโฟกัสแป้นพิมพ์ไม่ควรถูกล็อกหรือติดอยู่ที่องค์ประกอบหน้าเว็บหนึ่งๆ ผู้ใช้ควรไปยังส่วนต่างๆ ของหน้าเว็บและออกจากส่วนต่างๆ โดยใช้แป้นพิมพ์เท่านั้น

ข้อยกเว้นของกฎนี้คือโมดอล อย่างไรก็ตาม คุณควรหลีกเลี่ยงการใช้ tabindex เมื่อสร้างโมดอล inert ช่วยให้คุณมั่นใจได้ว่าผู้ใช้จะโต้ตอบกับองค์ประกอบโดยไม่ได้ตั้งใจไม่ได้ (การจงใจวางกับดับนแป้นพิมพ์) ใช้องค์ประกอบ <dialog> ซึ่งไม่มีการใช้งานโดยค่าเริ่มต้นเพื่อสร้างโมดอลสําหรับผู้ใช้ขณะที่บล็อกการคลิกและแท็บนอกโมดอล วิธีนี้ช่วยให้ผู้ใช้มุ่งเน้นที่ตัวเลือกที่จําเป็น