กราฟแบบโต้ตอบที่นำทางด้วยแป้นพิมพ์ได้

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

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

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

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

ให้จุดหนึ่งมี tabindex เป็น 0 และจุดที่เหลือเป็น -1 จากนั้นย้ายค่า 0 เมื่อมีการกดปุ่มลูกศร roving tabindex ช่วยให้จำนวนจุดหยุดของ Tab อยู่ในระดับเหมาะสม

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

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

เมื่อโฟกัสย้ายไปยังจุดใหม่ พื้นที่ aria-live สามารถอ่านค่าออกเสียงได้ วิธีนี้มีประโยชน์เมื่อป้ายกำกับแสดงในภาพ แต่ไม่ได้อยู่ใน DOM

ห่อทั้งหมดไว้ใน figure พร้อมชื่อ เพื่อให้ผู้ใช้ค้นหาและข้ามทั้งชุดได้เมื่อสำรวจเสร็จแล้ว

การโต้ตอบเป็นเพียงส่วนเสริม ไม่ใช่สิ่งทดแทน โปรดคง ตารางข้อมูลธรรมดาไว้เสมอ เพื่อให้ผู้ใช้มีทางเลือกง่าย ๆ เมื่อการเลื่อนด้วยปุ่มลูกศรช้าเกินไป

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

ผู้ใช้แป้นพิมพ์ควรเลื่อนไประหว่างจุดข้อมูลจำนวนมากในแผนภูมิอย่างไร

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