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

เผยแพร่: 2 พฤษภาคม 2019

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

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

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

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

วิธีแก้ไข

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

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

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

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

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

ความสำคัญ

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

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

แหล่งข้อมูล