หน้านี้ได้รับการแปลโดย Cloud Translation API

ควบคุมโฟกัสด้วย Tabindex

Rob Dodson

Alexandra Klepper

องค์ประกอบ HTML มาตรฐาน เช่น <button> หรือ <input> มีการช่วยเหลือพิเศษด้วยแป้นพิมพ์ในตัว และควรใช้เมื่อเป็นไปได้ แต่หากต้องการสร้างองค์ประกอบแบบอินเทอร์แอกทีฟที่กำหนดเอง คุณจะสร้างพฤติกรรมของผู้ใช้ตามที่คาดไว้ได้โดยการเพิ่ม tabindex

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

แหล่งที่มา

เคล็ดลับ: ดูข้อมูลเพิ่มเติมเกี่ยวกับโฟกัสแป้นพิมพ์ในหลักสูตร

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

tabindex คืออะไร

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

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

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

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

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

ตรวจสอบว่าเข้าถึงตัวควบคุมด้วยแป้นพิมพ์ได้

เครื่องมืออย่าง Lighthouse เป็นเครื่องมือที่ดีมากในการตรวจหาปัญหาการช่วยเหลือพิเศษโดยอัตโนมัติ อย่างไรก็ตาม มนุษย์ยังต้องทำการทดสอบด้วยตนเอง

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

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

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

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

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

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

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

แทรกองค์ประกอบลงในลำดับแท็บ

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

ข้อควรระวัง: inert polyfill อยู่ในขั้นทดลองและอาจไม่ทำงานตามที่คาดไว้ในบางกรณี โปรดทดสอบอย่างละเอียดก่อนนำไปใช้ในเวอร์ชันที่ใช้งานจริง

หลีกเลี่ยง `tabindex > 0`

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

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

Lighthouse ช่วยให้คุณระบุองค์ประกอบที่มี tabindex > 0 ได้ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > ตัวเลือก > การช่วยเหลือพิเศษ) แล้วมองหาผลการตรวจสอบ "ไม่มีองค์ประกอบที่มีค่า [tabindex] มากกว่า 0"

ใช้ "`tabindex` ที่ใช้กับอุปกรณ์เคลื่อนที่"

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

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

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