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