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

Rob Dodson

Alexandra Klepper

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

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

tabindex คืออะไร

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

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

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

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

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

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

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

หลีกเลี่ยง 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 ทั่วไปและระบุคีย์ คอมโพเนนต์ควรรองรับ