แก้ไขลำดับ DOM ด้วย Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

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

การรู้ลักษณะการทำงานของแป้นพิมพ์ที่อาจเป็นเรื่องยาก คู่มือ Accessible Rich Internet Applications (ARIA) Authoring Practices แสดงประเภทของคอมโพเนนต์และประเภทการทำงานของแป้นพิมพ์ที่รองรับ

บางทีคุณอาจกำลังใช้องค์ประกอบที่กำหนดเองซึ่งดูคล้ายกับปุ่มตัวเลือกชุดหนึ่ง แต่มีรูปแบบและลักษณะการทำงานที่ไม่เหมือนใคร

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

หากต้องการดูว่าต้องใช้การรองรับแป้นพิมพ์ใด โปรดดูคู่มือแนวทางปฏิบัติการเขียน ARIA ส่วนที่ 2 มีรายการรูปแบบการออกแบบ รวมทั้งตารางลักษณะเฉพาะสำหรับกลุ่มตัวเลือก ซึ่งเป็นองค์ประกอบที่มีอยู่ซึ่งตรงกับองค์ประกอบใหม่ของคุณมากที่สุด

ลักษณะการทํางานทั่วไปอย่างหนึ่งของแป้นพิมพ์ที่ควรรองรับคือแป้นลูกศรขึ้น/ลง/ซ้าย/ขวา ในการเพิ่มพฤติกรรมนี้ในคอมโพเนนต์ใหม่ ��ราใช้เทคนิคที่เรียกว่า rovingtabindex

Roving Tabindex ทำงานโดยการตั้งค่า tabindex เป็น -1 สำหรับผู้เผยแพร่โฆษณาย่อยทั้งหมด ยกเว้นรายการที่ใช้งานอยู่ในขณะนี้

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

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

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

เมื่อผู้ใช้เลื่อนไปยังจุดย่อยสุดท้าย (หรือรายการแรก ขึ้นอยู่กับทิศทางที่พวกเขาย้ายโฟกัส) โฟกัสจะย้อนกลับไปที่ส่วนย่อยแรก (หรือสุดท้าย)

ลองดูตัวอย่างต่อไปนี้ ตรวจสอบองค์ประกอบใน DevTools เพื่อสังเกตว่า Tabindex เคลื่อนที่จากวิทยุหนึ่งไปยังวิทยุถัดไป

โมดัลและดักแป้นพิมพ์

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

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

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