องค์ประกอบ HTML5 เช่น main, nav และ aside ทำหน้าที่เป็นจุดสังเกต หรือภูมิภาคพิเศษในหน้าเว็บที่โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ จะข้ามได้
การใช้องค์ประกอบจุดสังเกตช่วยให้คุณปรับปรุงประสบการณ์การนำทางในเว็บไซต์สำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษได้อย่างมาก
ดูข้อมูลเพิ่มเติมในจุดสังเกต HTML 5 และ ARIA ของ Deque University
วิธีตรวจสอบจุดสังเกตด้วยตนเอง
ใช้รายการองค์ประกอบจุดสังเกตของ W3C เพื่อตรวจสอบว่าส่วนหลักแต่ละส่วนของหน้านั้นอยู่ในองค์ประกอบจุดสังเกต เช่น
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
นอกจากนี้ คุณยังใช้เครื่องมือต่างๆ ได้ เช่น ส่วนขยายข้อมูลเชิงลึกเกี่ยวกับการช่วยเหลือพิเศษของ Microsoft เพื่อแสดงภาพโครงสร้างหน้าเว็บและจับส่วนที่ไม่มีอยู่ในจุดสังเกต ดังนี้
วิธีใช้จุดสังเกตอย่างมีประสิทธิภาพ
- ใช้องค์ประกอบจุดสังเกตเพื่อกำหนดส่วนหลักๆ ของหน้าเว็บแทนการใช้องค์ประกอบทั่วไป เช่น
<div>หรือ<span> - ใช้จุดสังเกตในการถ่ายทอดโครงสร้างของหน้าเว็บ
ตัวอย่างเช่น องค์ประกอบ
<main>ควรมีเนื้อหาทั้งหมดที่เกี่ยวข้องกับแนวคิดหลักของหน้าโดยตรง จึงควรมีเพียงรายการเดียวต่อหน้า ดูสรุปองค์ประกอบการแบ่งเนื้อหาของ MDN เพื่อดูวิธีใช้จุดสังเกตแต่ละรายการ - ใช้จุดสังเกตอย่างรอบคอบ การมีจุดสังเกตมากเกินไปอาจทำให้ผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษไปยังส่วนต่างๆ ได้ยากขึ้น เนื่องจากจะทำให้ผู้ใช้ไม่สามารถข้ามไปยังเนื้อหาที่ต้องการได้โดยง่าย
ดูข้อมูลเพิ่มเติมที่โพสต์หัวข้อและจุดสังเกต