โปรแกรมอ่านหน้าจอมีคำสั่งให้ข้ามไปมาระหว่างส่วนหัวได้อย่างรวดเร็วหรือไปยัง ภูมิภาคที่สำคัญ ในความเป็นจริงแล้ว แบบสำรวจผู้ใช้โปรแกรมอ่านหน้าจอ พบว่าพวกเขามักจะไปยังหน้าที่ไม่คุ้นเคย ด้วยการสำรวจ ส่วนหัว
ด้วยการใช้องค์ประกอบส่วนหัวและจุดสังเกตที่ถูกต้อง คุณจะสามารถ ปรับปรุงประสบการณ์การนำทางในเว็บไซต์ของคุณสำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ
ใช้ส่วนหัวเพื่อร่างหน้า
ใช้องค์ประกอบ h1-h6 เพื่อสร้างโครงร่างโครงสร้างสำหรับหน้าเว็บ เป้าหมายคือ
สร้างโครงกระดูกหรือโครงหน้าเพื่อให้ผู้ใดก็ตามที่นำทางทำได้
หัวข้ออาจสร้างภาพลักษณ์ในใจได้
แนวทางปฏิบัติทั่วไปคือการใช้ h1 รายการเดียวสำหรับบรรทัดแรกหรือโลโก้หลักใน
หน้าเว็บ องค์ประกอบ h2 ที่จะระบุส่วนหลัก และองค์ประกอบ h3 องค์ประกอบในส่วนย่อยที่รองรับ ได้แก่
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
อย่าข้ามระดับส่วนหัว
นักพัฒนาซอฟต์แวร์มักข้ามระดับส่วนหัวเพื่อใช้รูปแบบเริ่มต้นของเบราว์เซอร์ที่ เข้ากับการออกแบบมากที่สุด ซึ่งถือว่าเป็นรูปแบบที่ต่อต้านเนื่องจากแตก โมเดลโครงร่าง
แทนที่จะใช้ขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์สำหรับส่วนหัว ให้ใช้ CSS เองและไม่ข้ามระดับ
ตัวอย่างเช่น เว็บไซต์นี้มีส่วนที่มีชื่อว่า "IN THE NEWS" ตามด้วย 2 บรรทัดแรก:
หัวข้อ "ในข่าว" อาจเป็น h2 และการสนับสนุน
บรรทัดแรกทั้ง 2 รายการอาจมีองค์ประกอบ h3 รายการ
เนื่องจาก font-size สำหรับ "IN THE NEWS" เล็กกว่าบรรทัดแรก
ควรพยายามทำให้พาดหัวของเรื่องแรกเป็น h2 และพยายาม
"ในข่าว" h3 แม้ว่าวิธีนี้อาจตรงกับการจัดรูปแบบเริ่มต้นของเบราว์เซอร์
จะเป็นการทำลายโครงร่างที่สื่อถึงผู้ใช้โปรแกรมอ่านหน้าจอ
คุณสามารถใช้ Lighthouse เพื่อตรวจสอบว่าหน้าเว็บข้ามส่วนหัวระดับใดบ้าง เรียกใช้ การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > Options > Accessibility) และรูปลักษณ์ สำหรับผลของการตรวจสอบส่วนหัวไม่ข้ามระดับ
ใช้จุดสังเกตเพื่อช่วยในการนำทาง
องค์ประกอบ HTML5 เช่น main, nav และ aside ทำหน้าที่เป็นจุดสังเกต หรือ
พื้นที่พิเศษบนหน้าเว็บที่โปรแกรมอ่านหน้าจอสามารถข้ามได้
ใช้แท็กจุดสังเกตเพื่อกำหนดส่วนสำคัญของหน้าเว็บ แทนการใช้แท็ก
div วินาที ระวังอย่าให้เรือเดินเรือมากเกินไปเพราะอาจทำให้มีจุดสังเกตมากเกินไป
มากเกินไป ตัวอย่างเช่น ให้ยึดองค์ประกอบ main เพียง 1 รายการแทนที่จะใช้ 3 หรือ
4.
Lighthouse แนะนำให้ตรวจสอบเว็บไซต์ด้วยตนเองเพื่อดูว่า "จุดสังเกต HTML5 มาใช้ปรับปรุงการนำทาง" คุณสามารถใช้รายการจุดสังเกตนี้ได้ องค์ประกอบ เพื่อดูหน้าเว็บของคุณ
ข้ามเนื้อหาซ้ำด้วยลิงก์ข้าม
เว็บไซต์จำนวนมากมีการนำทางซ้ำๆ ในส่วนหัวซึ่งอาจน่ารำคาญ เพื่อนำทางด้วยเทคโนโลยีความช่วยเหลือพิเศษ ใช้ลิงก์ข้ามเพื่อให้ผู้ใช้ข้ามเนื้อหานี้
ลิงก์ข้ามคือ Anchor นอกหน้าจอที่เป็นรายการแรกที่โฟกัสได้ 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 ช่วยตรวจสอบว่าหน้าเว็บมีลิงก์ข้ามหรือไม่ เรียกใช้ ตรวจสอบการเข้าถึงอีกครั้งและมองหาผลลัพธ์ของหน้าเว็บ การตรวจสอบส่วนหัว ลิงก์การข้าม หรือภูมิภาคของจุดสังเกต