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

Rob Dodson

Alexandra Klepper

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

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

Tabindex คืออะไร

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ใช้ "การเดินทาง tabindex"

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

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

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