หน้าเว็บมีลําดับแท็บที่สมเหตุสมผล

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

วิธีทดสอบด้วยตนเอง

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

ดูข้อมูลเพิ่มเติมในพื้นฐานเกี่ยวกับการเข้าถึงด้วยแป้นพิมพ์

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

วิธีแก้ไข

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

หากเข้าถึงตัวควบคุมแบบอินเทอร์แอกทีฟทั้งหมดในหน้าไม่ได้ วิธีแก้ปัญหาแรกคือการแทนที่ตัวควบคุมที่กำหนดเองด้วยทางเลือก HTML มาตรฐาน เช่น แทนที่ <div> ที่ทํางานเหมือนปุ่มด้วย <button> การใช้องค์ประกอบ HTML ในตัวจะช่วยปรับปรุงการเข้าถึงเว็บไซต์ได้อย่างมาก และช่วยลดภาระงานของคุณได้เป็นอย่างมาก

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

<div tabindex="0">Focus me with the TAB key</div>

ดูข้อมูลเพิ่มเติมในควบคุมโฟกัสด้วย tabindex

แหล่งข้อมูล

ซอร์สโค้ดสําหรับการตรวจสอบหน้าเว็บมีลําดับแท็บที่สมเหตุสมผล