ส่วนหัวและจุดสังเกต

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

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

ใช้ส่วนหัวเพื่อสรุปหน้าเว็บ

ใช้องค์ประกอบ h1-h6 เพื่อสร้างเค้าโครงโครงสร้างของหน้า เป้าหมายคือการสร้างโครงกระดูกหรือโครงหน้ากระดาษเพื่อให้ใครก็ตามที่ไปยังส่วนต่างๆ ตามหัวเรื่องสามารถทำให้เกิดภาพจำได้

แนวทางปฏิบัติทั่วไปคือการใช้ h1 เดียวสำหรับบรรทัดแรกหรือโลโก้หลักในหน้าเว็บ ใช้องค์ประกอบ h2 เพื่อกำหนดส่วนหลัก และใช้องค์ประกอบ h3 รายการในส่วนย่อยที่รองรับ ดังนี้

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

อย่าข้ามระดับหัวเรื่อง

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

ใช้ CSS ของคุณเองแทนที่จะใช้ขนาดแบบอักษรเริ่มต้นของเบราว์เซอร์สำหรับส่วนหัว และอย่าข้ามระดับ

เช่น เว็บไซต์นี้มีหัวข้อ "ข่าวเด่น" ตามด้วยบรรทัดแรก 2 รายการดังนี้

เว็บไซต์ข่าวที่มีพาดหัว รูปภาพหลัก และส่วนย่อย

ส่วนหัวของหัวข้อ "ข่าว" อาจเป็น h2 และพาดหัวสนับสนุนทั้งสองอาจเป็นองค์ประกอบ h3

เนื่องจาก font-size สำหรับ "ข่าวเด่น" มีขนาดเล็กกว่าบรรทัดแรก คุณจึงอาจต้องการทำให้บรรทัดแรกของเรื่องแรกเป็น h2 และทำให้ "ข่าวเด่น" เป็น h3 แม้ว่าการจัดรูปแบบดังกล่าวอาจตรงกับการจัดรูปแบบเริ่มต้นของเบราว์เซอร์ แต่จะทำให้โครงร่างที่แสดงต่อผู้ใช้โปรแกรมอ่านหน้าจอเสียหาย

คุณสามารถใช้ Lighthouse เพื่อตรวจสอบว่าหน้าเว็บข้ามระดับส่วนหัวหรือไม่ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > Options > Accessibility) และดูผลลัพธ์ของการตรวจสอบหัวข้อไม่ข้ามระดับ

ใช้จุดสังเกตเพื่อช่วยให้การนำทางง่ายขึ้น

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

ใช้แท็กจุดสังเกตเพื่อกำหนดส่วนหลักๆ ของหน้าแทนที่จะใช้ div แต่อย่าใส่มากเกินไปเนื่องจากการมีจุดสังเกตมากเกินไปอาจทำให้ผู้ใช้สับสน เช่น ใช้องค์ประกอบ main เพียงรายการเดียวแทน 3 หรือ 4 รายการ

Lighthouse แนะนำให้ตรวจสอบเว็บไซต์ด้วยตนเองเพื่อดูว่า "มีการใช้องค์ประกอบจุดสังเกต HTML5 เพื่อปรับปรุงการนําทาง" คุณใช้รายการองค์ประกอบจุดสังเกตนี้เพื่อตรวจสอบหน้าเว็บได้

เว็บไซต์จำนวนมากมีการนำทางที่ซ้ำกันในส่วนหัว ซึ่งอาจทำให้การไปยังส่วนต่างๆ ด้วยเทคโนโลยีความช่วยเหลือพิเศษน่ารำคาญ ใช้ลิงก์ข้ามเพื่อให้ผู้ใช้ข้ามเนื้อหานี้

ลิงก์ข้ามคือจุดยึดนอกหน้าจอที่เป็นรายการแรกที่โฟกัสได้ใน DOM เสมอ โดยปกติแล้วจะมีลิงก์ในหน้าเว็บไปยังเนื้อหาหลักของหน้า เนื่องจากเป็นองค์ประกอบแรกใน DOM จึงใช้การดําเนินการเพียงครั้งเดียวจากเทคโนโลยีความช่วยเหลือพิเศษเพื่อโฟกัสองค์ประกอบดังกล่าวและข้ามไปยังส่วนต่างๆ ซ้ำๆ

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>
/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

เว็บไซต์ยอดนิยมหลายแห่ง เช่น GitHub, The NY Times และ Wikipedia ล้วนมีลิงก์ข้าม ลองไปที่ลิงก์ดังกล่าวและกดแป้น TAB บนแป้นพิมพ์ 2-3 ครั้ง

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