ใช้องค์ประกอบจุดสังเกตของ HTML5 เพื่อปรับปรุงการนำทาง

องค์ประกอบ HTML5 เช่น main, nav และ aside ทำหน้าที่เป็นจุดสังเกต หรือภูมิภาคพิเศษบนหน้า โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลืออื่นๆ สามารถกระโดดได้ เมื่อใช้องค์ประกอบจุดสังเกต จะช่วยให้คุณปรับปรุงประสบการณ์ การนำทางบนเว็บไซต์ได้อย่างมาก สำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ ดูข้อมูลเพิ่มเติมใน Deque University จุดสังเกตของ HTML 5 และ ARIA

วิธีตรวจสอบจุดสังเกตด้วยตนเอง

ใช้รายการองค์ประกอบจุดสังเกตของ 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>

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

ภาพหน้าจอของ web.dev ที่ไฮไลต์จุดสังเกตด้วยส่วนขยายข้อมูลเชิงลึกเกี่ยวกับการช่วยเหลือพิเศษ

วิธีใช้จุดสังเกตอย่างมีประสิทธิภาพ

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

ดูโพสต์หัวข้อและจุดสังเกต เพื่อดูข้อมูลเพิ่มเติม

แหล่งข้อมูล