การใช้ Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 มีรายการรูปแบบการออกแบบ รวมถึง ตารางลักษณะเฉพาะสำหรับวิทยุ กลุ่ม คอมโพเนนต์ที่มีอยู่ ซึ่งตรงกับองค์ประกอบใหม่มากที่สุด

ลักษณะการทำงานของแป้นพิมพ์ทั่วไปที่ควรจะเป็น ที่สนับสนุนคือปุ่มลูกศรขึ้น/ลง/ซ้าย/ขวา หากต้องการเพิ่มลักษณะการทำงานนี้ใน เราใช้เทคนิคที่เรียกว่า roving Tabindex

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>

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

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

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

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

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

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