ส่วนหัวและจุดสังเกต

โปรแกรมอ่านหน้าจอมีคำสั่งให้ข้ามไปมาระหว่างส่วนหัวได้อย่างรวดเร็วหรือไปยัง ภูมิภาคที่สำคัญ ในความเป็นจริงแล้ว แบบสำรวจผู้ใช้โปรแกรมอ่านหน้าจอ พบว่าพวกเขามักจะไปยังหน้าที่ไม่คุ้นเคย ด้วยการสำรวจ ส่วนหัว

ด้วยการใช้องค์ประกอบส่วนหัวและจุดสังเกตที่ถูกต้อง คุณจะสามารถ ปรับปรุงประสบการณ์การนำทางในเว็บไซต์ของคุณสำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ

ใช้ส่วนหัวเพื่อร่างหน้า

ใช้องค์ประกอบ 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 ช่วยตรวจสอบว่าหน้าเว็บมีลิงก์ข้ามหรือไม่ เรียกใช้ ตรวจสอบการเข้าถึงอีกครั้งและมองหาผลลัพธ์ของหน้าเว็บ การตรวจสอบส่วนหัว ลิงก์การข้าม หรือภูมิภาคของจุดสังเกต