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

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

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

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

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

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

วิธีแก้ไข

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

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

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

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

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

แหล่งข้อมูล

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