จัดการ tabindex แบบเลื่อนตำแหน่งในวิดเจ็ต

ในแถบเครื่องมือหรือกลุ่มปุ่มตัวเลือก การกด Tab ควรไปถึงวิดเจ็ตเพียงครั้งเดียว ไม่ใช่ไปทุกไอเท็ม Roving tabindex คือรูปแบบที่ทำให้ทำเช่นนี้ได้

ในแต่ละครั้งจะมีเพียงหนึ่งไอเท็มที่มี tabindex="0" ไอเท็มอื่นทั้งหมดจะได้รับ tabindex="-1" ดังนั้น Tab จะเข้าสู่กลุ่มที่จุดเดียว

เมื่อโหลดหน้า ให้กำหนด tabindex="0" ให้ไอเท็มแรกหรือไอเท็มที่เลือกอยู่ และตั้งค่าที่เหลือเป็น tabindex="-1" นี่คือสถานะพักของกลุ่ม

เมื่อโฟกัสอยู่ภายในกลุ่ม ผู้ใช้จะเลื่อนไปมาระหว่างไอเท็มด้วย ปุ่มลูกศร ไม่ใช่ Tab โดย Tab ยังคงใช้เพื่อออกจากวิดเจ็ตทั้งชุด

เมื่อกดปุ่มลูกศร ให้ทำสองอย่าง: ตั้งค่าไอเท็มเดิมเป็น -1 และไอเท็มใหม่เป็น 0 จากนั้นเรียกใช้ focus() กับไอเท็มใหม่ 🧭

การคง tabindex="0" ไว้เพียงรายการเดียวทำให้ Tab ไปยังไอเท็มที่ผู้ใช้ใช้ล่าสุดเสมอ ดังนั้นการกลับมายังวิดเจ็ตจึงเป็นธรรมชาติ

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

วิดเจ็ตจำนวนมาก วนการเคลื่อนที่ด้วยปุ่มลูกศร: เมื่อกดปุ่มขวาที่รายการสุดท้าย ระบบจะวนกลับไปยังรายการแรก โปรดตรวจสอบ APG ว่ารูปแบบของคุณควรมีการวนหรือไม่

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

roving tabindex จะย้ายโฟกัสจริงของ DOM ส่วนทางเลือกอย่าง aria-activedescendant จะคงโฟกัสไว้ที่คอนเทนเนอร์ และชี้ไปยังรายการที่กำลังทำงานอยู่แบบเสมือน

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

คุณเข้าใจ roving tabindex แล้ว: รายการหนึ่งมีค่าเป็น 0 ส่วนที่เหลือมีค่าเป็น -1 ปุ่มลูกศรจะย้ายค่า 0 ไปมาระหว่างรายการ และ Tab จะเลื่อนผ่านวิดเจ็ตทั้งหมด 🚀