ตรวจโครงร่างหน้าด้วยการฟัง

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

ลืมสีและแบบอักษรไปก่อน โครงร่างที่สะอาดควรอ่านเป็นรายการซ้อนกันของชื่อส่วนต่าง ๆ อย่างสมเหตุสมผล แม้ไม่มี CSS เลย

ดึงเฉพาะ หัวข้อของคุณออกมาตามลำดับ หากรายการนี้เพียงอย่างเดียวสรุปหน้าได้ โครงสร้างของคุณก็ทำหน้าที่ได้ดี

ขั้นแรก ยืนยันว่ามี h1 เพียงหนึ่งรายการที่ใช้บอกชื่อหน้า h1 ที่หายไปหรือซ้ำกันเป็นข้อบกพร่องของโครงร่างที่พบบ่อยที่สุด

ไล่ดูระดับต่าง ๆ และมองหา การข้ามระดับ เช่น h2 กระโดดไป h4 การลดระดับแต่ละครั้งควรลดลงทีละหนึ่งระดับพอดี

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

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

เปิด รายการหัวข้อใน NVDA หรือ VoiceOver การได้ยินหน้าเว็บของตัวเองถูกอ่านออกเสียงจะเผยความสับสนที่ไม่มีแผนภาพใดทำได้ 🔊

หัวข้อว่างที่มีเพียงไอคอนจะถูกอ่านว่าไม่มีเนื้อหาและทำให้รายการรก ใส่ข้อความจริงที่มีความหมายให้กับทุกหัวข้อ

หัวข้อกำกวมอย่าง “เพิ่มเติม” ไม่ผ่านการทดสอบด้วยการฟัง เมื่ออยู่นอกบริบท แต่ละหัวข้อก็ควรบอกผู้ใช้ได้ว่าส่วนนั้นครอบคลุมเรื่องใด

ตรวจสอบ โครงร่างอย่างรวดเร็วในทุกหน้าก่อนนำไปใช้งาน การตรวจเพียงสองนาทีช่วยจับข้อผิดพลาดของโครงสร้างที่ทำให้ผู้ใช้หงุดหงิดทุกวัน

ขณะตรวจสอบ สิ่งใดบ่งชี้ว่าโครงร่างหัวข้อเสียหาย

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