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