โปรแกรมอ่านหน้าจอมีคำสั่งให้ข้ามไปมาระหว่างส่วนหัวหรือไปยังภูมิภาคจุดสังเกตที่เฉพาะเจาะจงได้อย่างรวดเร็ว อันที่จริงแล้วแบบสํารวจผู้ใช้โปรแกรมอ่านหน้าจอพบว่าผู้ใช้มักจะไปยังส่วนต่างๆ ของหน้าที่ไม่คุ้นเคยโดยการสํารวจบรรทัดแรก
การใช้องค์ประกอบส่วนหัวและจุดสังเกตที่ถูกต้องจะช่วยปรับปรุงประสบการณ์การไปยังส่วนต่างๆ ในเว็บไซต์ให้กับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษได้อย่างมาก
ใช้ส่วนหัวเพื่อสรุปหน้าเว็บ
ใช้องค์ประกอบ 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 > ตัวเลือก > การช่วยเหลือพิเศษ) แล้วดูผลการตรวจสอบส่วนหัวไม่ข้ามระดับ
ใช้จุดสังเกตเพื่อช่วยให้การนำทางง่ายขึ้น
องค์ประกอบ 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 และ Wikipedia ล้วนมีลิงก์ข้าม ลองไปที่หน้านั้นแล้วกดแป้น TAB บนแป้นพิมพ์ 2-3 ครั้ง
Lighthouse ช่วยตรวจสอบได้ว่าหน้าเว็บของคุณมีลิงก์ข้ามหรือไม่ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษอีกครั้ง แล้วมองหาผลการตรวจสอบหน้าเว็บมีส่วนหัว ลิงก์การข้าม หรือภูมิภาคของจุดสังเกต