ผู้ใช้หลายคนใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของแอปพลิเคชัน ตั้งแต่ผู้ใช้ที่มีความบกพร่องทางการเคลื่อนไหวชั่วคราวและถาวร ไปจนถึงผู้ใช้ที่ใช้แป้นพิมพ์ลัดเพื่อให้ทำงานได้อย่างมีประสิทธิภาพมากขึ้น ลำดับแท็บที่สมเหตุสมผลเป็นส่วนสำคัญในการสร้างประสบการณ์การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ที่ราบรื่น
วิธีทดสอบด้วยตนเอง
หากต้องการตรวจสอบว่าลำดับแท็บของแอปพลิเคชันของคุณเป็นไปตามตรรกะหรือไม่ ให้ลองแตะแท็บต่างๆ ในหน้าเว็บ ลำดับที่โฟกัสองค์ประกอบควรเป็นไปตามลำดับ DOM โดยทั่วไปแล้ว โฟกัสควรเป็นไปตามลำดับการอ่าน โดยเลื่อนจากซ้ายไปขวา จากด้านบนลงด้านล่างของหน้าเว็บ
ดูข้อมูลเพิ่มเติมในพื้นฐานเกี่ยวกับการเข้าถึงด้วยแป้นพิมพ์
คุณสามารถเข้าถึงส่วนควบคุมแบบอินเทอร์แอกทีฟทั้งหมดในหน้านี้ได้ไหม
หากไม่ คุณอาจต้องใช้ tabindex เพื่อปรับปรุงความสามารถในการโฟกัสของตัวควบคุมเหล่านั้น
หลักการทั่วไปคือตัวควบคุมที่ผู้ใช้โต้ตอบหรือป้อนข้อมูลได้ควรโฟกัสได้และแสดงตัวบ่งชี้โฟกัส
หากผู้ใช้แป้นพิมพ์ไม่เห็นสิ่งที่โฟกัส ก็จะไม่สามารถโต้ตอบกับหน้านั้นได้
วิธีแก้ไข
หากลําดับโฟกัสดูไม่ถูกต้อง คุณควรจัดเรียงองค์ประกอบใน DOM ใหม่เพื่อให้ลําดับแท็บดูเป็นธรรมชาติมากขึ้น
หากคุณไม่สามารถเข้าถึงส่วนควบคุมแบบอินเทอร์แอกทีฟทั้งหมดในหน้าเว็บ
สิ่งที่ต้องแก้ไขอย่างแรกคือการแทนที่การควบคุมที่กำหนดเองด้วยทางเลือก HTML มาตรฐาน
ตัวอย่างเช่น
แทนที่ <div> ซึ่งทำหน้าที่เป็นปุ่มด้วย <button>
การใช้องค์ประกอบ HTML ในตัวจะช่วยปรับปรุงการเข้าถึงเว็บไซต์ได้อย่างมาก และช่วยลดภาระงานของคุณได้เป็นอย่างมาก
ถ้าคุณกำลังสร้างคอมโพเนนต์แบบอินเทอร์แอกทีฟที่กำหนดเอง โดยไม่มี HTML มาตรฐานที่เทียบเท่ากัน
ใช้แอตทริบิวต์ tabindex เพื่อให้แน่ใจว่าเข้าถึงแป้นพิมพ์ได้
เช่น
<div tabindex="0">Focus me with the TAB key</div>
ดูข้อมูลเพิ่มเติมในควบคุมโฟกัสด้วย tabindex