หน้านี้ได้รับการแปลโดย 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": ค่า tabindex ที่มากกว่า 0 จะนําองค์ประกอบนั้นไปไว้ที่ด้านหน้าของลําดับการกด Tab ตามปกติ หากมีองค์ประกอบหลายรายการที่มี 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 ที่ใช้กันโดยทั่วไปและระบุคีย์ที่คอมโพเนนต์ควรรองรับ