การใช้ Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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> ซึ่งไม่มีการใช้งานโดยค่าเริ่มต้นเพื่อสร้างโมดอลสําหรับผู้ใช้ขณะที่บล็อกการคลิกและแท็บนอกโมดอล วิธีนี้ช่วยให้ผู้ใช้มุ่งเน้นที่ตัวเลือกที่จําเป็น