การใช้ 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": tabindex ที่มากกว่า 0 จะนำองค์ประกอบนั้นมาไว้ด้านหน้า ของลำดับการกด Tab ตามธรรมชาติ หากมีองค์ประกอบหลายรายการที่มี tabindex มากกว่า 0 ลำดับการกด Tab จะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และเพิ่มขึ้นเรื่อยๆ

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

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

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

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

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

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

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

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

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

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

<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

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>

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