การนำทางระหว่างแท็บด้วยปุ่มลูกศร

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

การกด Tab ควรไปยังชุดแท็บเพียงครั้งเดียว ไม่ควรหยุดที่แท็บทุกแท็บ ทั้ง tablist ควรทำงานเป็นจุดหยุดเดียวในลำดับของหน้า

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

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

หากแท็บเรียงในแนวตั้ง ให้ใช้ ลูกศรขึ้นและลง แทน และกำหนด aria-orientation="vertical" เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกทราบรูปแบบการจัดวาง

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

เพิ่มทางลัดสองรายการ: Home จะย้ายโฟกัสไปยังแท็บแรก และ End จะย้ายไปยังแท็บสุดท้าย ชุดแท็บที่มีจำนวนมากจะนำทางได้เร็วขึ้นมาก

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

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

เมื่อใช้ การเปิดใช้งานด้วยตนเอง ปุ่มลูกศรจะย้ายเฉพาะโฟกัส ผู้ใช้ต้องกด Enter หรือ Space เพื่อเลือก โปรดใช้วิธีนี้เมื่อการแสดงแผงมีต้นทุนสูง

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

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

คุณได้เรียนรู้ว่าแท็บใช้ ดัชนีแท็บแบบเลื่อนไปร่วมกับปุ่มลูกศร รวมถึง Home และ End เลือกการเปิดใช้งานแบบอัตโนมัติหรือด้วยตนเองตามต้นทุนของแผง