ซ่อนเนื้อหานอกหน้าจอจากเทคโนโลยีความช่วยเหลือพิเศษ

ตรวจสอบว่ามีเพียงส่วนที่เกี่ยวข้องของหน้าเว็บเท่านั้นที่แสดงต่อโปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ เช่น เนื้อหาที่อยู่นอกหน้าจอควรซ่อนจากเทคโนโลยีความช่วยเหลือพิเศษ

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

หากต้องการตรวจสอบว่าเนื้อหาที่อยู่นอกหน้าจอถูกซ่อนอยู่ คุณควรทดสอบด้วยโปรแกรมอ่านหน้าจอ

ใช้ปุ่ม TAB เพื่อกด Tab ในหน้าต่างๆ โปรแกรมอ่านหน้าจอไม่ควรอ่านออกเสียงเนื้อหาที่ซ่อนอยู่

วิธีแก้ไข

หากต้องการซ่อนเนื้อหาที่อยู่นอกหน้าจอ ให้นำองค์ประกอบที่มีเนื้อหานั้นออกจากลําดับการกด Tab โดยตั้งค่าเป็น display: none หรือ visibility: hidden

เช่น

.remove-me {
  visibility: hidden;
}

<button class="remove-me">Can't reach me with the TAB key!</button>

โปรดดูหัวข้อตั้งค่าระดับการเข้าถึงเนื้อหาที่อยู่นอกหน้าจออย่างถูกต้องด้วย

แหล่งข้อมูล

ซอร์สโค้ดสําหรับเนื้อหาที่อยู่นอกหน้าจอจะซ่อนจากการตรวจสอบเทคโนโลยีความช่วยเหลือพิเศษ