เหตุใดภูมิภาคถ่ายทอดสดจึงล้มเหลวและวิธีแก้ไข

พื้นที่ถ่ายทอดสดดูเรียบง่ายแต่ล้มเหลวได้บ่อย การรู้จัก ข้อผิดพลาดที่พบบ่อย ช่วยประหยัดเวลาหลายชั่วโมงจากการทดสอบด้วยโปรแกรมอ่านหน้าจอจริงอย่างสับสน 🐛

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

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

การเขียนสตริงเดิมซ้ำสองครั้งมักทำให้เกิด ความเงียบ เพราะโปรแกรมอ่านหน้าจอไม่เห็นการเปลี่ยนแปลง ปัญหานี้เกิดกับจำนวนและสถานะที่ซ้ำกันบ่อย

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

การอัปเดตพื้นที่ด้วยข้อความก้อนใหญ่จะถาโถมใส่ผู้ใช้ พื้นที่ถ่ายทอดสดมีไว้สำหรับ การอัปเดต สั้น ๆ ไม่ใช่เนื้อหาทั้งหน้า

ตั้งค่า aria-atomic เป็น true แล้วโปรแกรมอ่านหน้าจอจะอ่านข้อความทั้งพื้นที่เมื่อมีการเปลี่ยนแปลง ไม่ใช่เพียงส่วนที่อัปเดต เหมาะสำหรับข้อความที่ประกอบด้วยหลายส่วน

แอตทริบิวต์ aria-relevant ควบคุมประเภทการเปลี่ยนแปลงที่จะประกาศ เช่น การเพิ่มหรือการนำออก ค่าเริ่มต้นที่รวมการเพิ่มกับข้อความเหมาะกับกรณีส่วนใหญ่

พื้นที่ที่ซ่อนด้วย display none จะถูกนำออกจากโครงสร้างการเข้าถึงและยังคงเงียบ นี่เป็นหนึ่งในข้อผิดพลาดที่พบบ่อยที่สุด

เครื่องมือตรวจสอบของเบราว์เซอร์ไม่สามารถยืนยันว่าพื้นที่ทำงานได้ คุณควรตรวจสอบด้วย โปรแกรมอ่านหน้าจอ จริง เช่น NVDA หรือ VoiceOver ก่อนเผยแพร่เสมอ

พื้นที่ถ่ายทอดสดเดียวกันอาจให้เสียงแตกต่างกันใน โปรแกรมอ่านหน้าจอ และเบราว์เซอร์ต่าง ๆ ทดสอบสักสองสามชุดแทนการไว้วางใจเพียงชุดเดียว

ตอนนี้คุณแก้ไขปัญหาพื้นที่ถ่ายทอดสดได้แล้ว: แสดงพื้นที่เปล่าก่อน ล้างแล้วกำหนดค่าใหม่เมื่อข้อความซ้ำ หลีกเลี่ยง display none และทดสอบด้วยโปรแกรมอ่านหน้าจอจริงเสมอ ✅