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

Rob Dodson

Alexandra Klepper

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

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

tabindex คืออะไร

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

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

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

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

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

การทราบว่าควรใช้ลักษณะการทำงานของแป้นพิมพ์แบบใดอาจเป็นเรื่องยาก คู่มือแนวทางปฏิบัติในการเขียน Accessible Rich Internet Applications (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" กับองค์ประกอบหนึ่งๆ จะไม่มีผลกับองค์ประกอบย่อย หากองค์ประกอบย่อยอยู่ในลำดับการกดแป้น Tab ตามปกติหรือเนื่องจากค่า tabindex องค์ประกอบย่อยจะยังคงอยู่ในลำดับการกดแป้น Tab หากต้องการนำองค์ประกอบและองค์ประกอบย่อยทั้งหมดออกจากลำดับการไปยังแท็บ ให้ลองใช้inert Polyfill ของ WICG Polyfill จะจำลองลักษณะการทำงานของแอตทริบิวต์ inert ที่เสนอ ซึ่งจะป้องกันไม่ให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบ

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

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

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

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

ใช้ "tabindex แบบเคลื่อนที่"

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

หากต้องการใช้ฟังก์ชันที่คล้ายกันในคอมโพเนนต์ของคุณเอง คุณสามารถใช้เทคนิคที่เรียกว่า "roving 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 ที่พบบ่อยและระบุคีย์ที่คอมโพเนนต์ควรรองรับ