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

ร็อบ ดอดสัน

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

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

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

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