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

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

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

หากต้องการตรวจสอบว่าเนื้อหานอกหน้าจอซ่อนอยู่หรือไม่ คุณต้องทดสอบเนื้อหานั้นด้วยตนเองโดยใช้โปรแกรมอ่านหน้าจอ - สำหรับผู้ใช้ Mac โปรดดู วิดีโอนี้เกี่ยวกับการใช้ VoiceOver - สำหรับผู้ใช้ PC โปรดดู วิดีโอเกี่ยวกับการใช้ NVDA นี้ - สำหรับผู้ใช้ Chromebook โปรดดูที่ ChromeVox ซึ่งเป็นโปรแกรมอ่านหน้าจอในตัว

ใช้แป้น TAB เพื่อเลื่อนไปตามส่วนต่างๆ ของหน้า โปรแกรมอ่านหน้าจอไม่ควรประกาศเนื้อหาที่ซ่อน

วิธีแก้ไข

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

เช่น

.remove-me {
  visibility: hidden;
}

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

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

แหล่งข้อมูล

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