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

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

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

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

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

วิธีแก้ไข

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

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

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

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

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

ความสำคัญ

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

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

แหล่งข้อมูล