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