ส่วนควบคุมแบบอินเทอร์แอกทีฟสามารถโฟกัสแป้นพิมพ์ได้

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

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

หากต้องการทดสอบว่าตัวควบคุมที่กําหนดเองโฟกัสได้และแสดงตัวบอกโฟกัส ให้เริ่มด้วยการกด Tab ไปยังส่วนต่างๆ ของเว็บไซต์ ใช้ TAB (หรือ SHIFT + TAB) เพื่อย้ายไปมาระหว่างตัวควบคุม และใช้แป้นลูกศร รวมถึง ENTER และ SPACE เพื่อควบคุมค่า (ดูพื้นฐานเกี่ยวกับการเข้าถึงด้วยแป้นพิมพ์)

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

วิธีแก้ไข

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

หากต้องการให้โฟกัสตัวควบคุมที่กำหนดเองได้ ให้แทรกองค์ประกอบตัวควบคุมที่กำหนดเองลงในลําดับการกด Tab ตามปกติโดยใช้ tabindex="0" (ดูการควบคุมโฟกัสด้วย tabindex ด้วย) เช่น

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

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

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

ความสำคัญ

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

ดูข้อมูลเพิ่มเติมในวิธีตรวจสอบการช่วยเหลือพิเศษ

แหล่งข้อมูล