โปรแกรมอ่านหน้าจอมีคำสั่งสำหรับข้ามไปยังส่วนหัวหรือภูมิภาคที่เป็นจุดสังเกตเฉพาะอย่างรวดเร็ว ในความเป็นจริงแล้ว การสำรวจผู้ใช้โปรแกรมอ่านหน้าจอพบว่าผู้ใช้มักไปยังหน้าเว็บที่ไม่คุ้นเคยด้วยการสำรวจ ส่วนหัว
การใช้องค์ประกอบส่วนหัวและองค์ประกอบ Landmark ที่ถูกต้องจะช่วยปรับปรุงประสบการณ์การนำทางในเว็บไซต์สำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษได้อย่างมาก
ใช้ส่วนหัวเพื่อสรุปหน้าเว็บ
ใช้องค์ประกอบ 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 แม้ว่าการดำเนินการดังกล่าวอาจตรงกับการจัดรูปแบบเริ่มต้นของเบราว์เซอร์
แต่จะทำให้เส้นขอบที่ส่งไปยังผู้ใช้โปรแกรมอ่านหน้าจอใช้งานไม่ได้
แม้จะดูขัดกับสิ่งที่ควรจะเป็น แต่ไม่เป็นไรหากมองเห็นว่าองค์ประกอบ
h3 และ h4 มีขนาดใหญ่กว่าองค์ประกอบ h2 หรือ h1
สิ่งที่สำคัญคือโครงร่างที่สื่อถึงโดยองค์ประกอบและการจัดลำดับองค์ประกอบ
คุณใช้ Lighthouse เพื่อตรวจสอบว่าหน้าเว็บข้ามระดับส่วนหัวหรือไม่ เรียกใช้ การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > ตัวเลือก > การช่วยเหลือพิเศษ) และดู ผลลัพธ์ของการตรวจสอบหัวเรื่องไม่ข้ามระดับ
ใช้จุดสังเกตเพื่อช่วยในการนำทาง
องค์ประกอบ HTML5 เช่น main, nav และ aside ทำหน้าที่เป็นจุดสังเกตหรือ
ภูมิภาคพิเศษในหน้าเว็บที่โปรแกรมอ่านหน้าจอสามารถข้ามไปได้
ใช้แท็ก Landmark เพื่อกำหนดส่วนหลักๆ ของหน้าเว็บแทนการใช้ divs โปรดระวังอย่าใช้มากเกินไป เพราะการมีจุดสังเกตมากเกินไปอาจทำให้ผู้ใช้สับสนได้
เช่น ใช้เฉพาะองค์ประกอบ main เพียง 1 รายการแทนที่จะใช้ 3 หรือ 4 รายการ
Lighthouse ขอแนะนำให้ตรวจสอบเว็บไซต์ด้วยตนเองเพื่อให้แน่ใจว่า "ใช้องค์ประกอบ HTML5 Landmark เพื่อปรับปรุงการนำทาง" คุณใช้รายการองค์ประกอบ จุดสังเกต นี้เพื่อตรวจสอบหน้าเว็บได้
ข้ามเนื้อหาที่ซ้ำกันด้วยลิงก์ข้าม
เว็บไซต์จำนวนมากมีการนำทางที่ซ้ำกันในส่วนหัว ซึ่งอาจสร้างความรำคาญเมื่อนำทางด้วยเทคโนโลยีความช่วยเหลือพิเศษ ใช้ลิงก์ข้ามเพื่อให้ผู้ใช้ข้ามเนื้อหานี้ได้
ลิงก์ข้ามคือจุดยึดนอกหน้าจอซึ่งเป็นรายการแรกที่โฟกัสได้ใน 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 ช่วยคุณตรวจสอบได้ว่าหน้าเว็บมีลิงก์ข้ามหรือไม่ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษอีกครั้ง แล้วดูผลการตรวจสอบหน้าเว็บมีส่วนหัว ลิงก์การข้าม หรือภูมิภาคของจุดสังเกต