องค์ประกอบ 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>
นอกจากนี้ คุณยังใช้เครื่องมือต่างๆ เช่น ส่วนขยาย Accessibility Insights ของ Microsoft เพื่อแสดงโครงสร้างหน้าเว็บเป็นภาพและจับส่วนที่ไม่ได้อยู่ในจุดสังเกตได้ด้วย
วิธีใช้จุดสังเกตอย่างมีประสิทธิภาพ
- ใช้องค์ประกอบจุดสังเกตเพื่อกำหนดส่วนหลักๆ ของหน้าแทนที่จะใช้องค์ประกอบทั่วไป เช่น
<div>หรือ<span> - ใช้จุดสังเกตเพื่อสื่อถึงโครงสร้างของหน้า
เช่น เอลิเมนต์
<main>ควรมีเนื้อหาทั้งหมดที่เกี่ยวข้องกับแนวคิดหลักของหน้าโดยตรง จึงควรมีเพียง 1 รายการต่อหน้า ดูสรุปองค์ประกอบการแบ่งส่วนเนื้อหาของ MDN เพื่อดูวิธีใช้จุดสังเกตแต่ละรายการ - ใช้จุดสังเกตอย่างรอบคอบ การมีจุดสังเกตมากเกินไปอาจทำให้ผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษไปยังส่วนต่างๆ ยากขึ้น เนื่องจากทำให้ผู้ใช้ข้ามไปยังเนื้อหาที่ต้องการได้ยาก
ดูข้อมูลเพิ่มเติมได้ในโพสต์ส่วนหัวและจุดสังเกต