การนำทาง

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

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

โปรดตรวจสอบให้แน่ใจเสมอว่าผู้ใช้ไปยังหน้าเว็บใดๆ บนเว็บไซต์ที่มีจำนวนคลิกน้อยที่สุด ในขณะเดียวกันก็ดูให้แน่ใจว่าการนำทางนั้นใช้งานง่ายและไม่มากเกินไป แต่ไม่มีข้อกำหนดเฉพาะสำหรับองค์ประกอบการนำทาง MachineLearningWorkshop.com ซึ่งเป็นเว็บไซต์แบบหน้าเดียวที่มีแถบนำทางภายในด้านขวาบน ซึ่งมักเป็นจุดที่เว็บไซต์ที่มีหลายหน้ามักจะแสดงการนําทางทั่วโลก

หากคุณกำลังดูหน้านี้บน web.dev คุณจะเห็นฟีเจอร์การนำทางบางรายการ คุณจะเห็นเบรดครัมบ์เหนือชื่อ สารบัญ "ในหน้านี้" หลังชื่อเรื่อง และสารบัญ "เรียนรู้ HTML" อาจแสดงเสมอหรือมองเห็นได้โดยคลิกปุ่มเมนู ทั้งนี้ขึ้นอยู่กับความกว้างของหน้าจอ องค์ประกอบแรกของหน้าคือลิงก์ที่ซ่อนไปยัง #main ซึ่งจะช่วยให้คุณข้ามทั้งแถบด้านข้างและลิงก์เบรดครัมบ์ได้

ลิงก์ "ข้ามไปที่เนื้อหา"

องค์ประกอบแรกบนหน้าเว็บคือลิงก์ภายใน ดังนี้

<a href="#main" class="skip-link button">Skip to main</a>

ซึ่งเมื่อคลิก หรือเมื่อมีโฟกัสและผู้ใช้กด Enter จะเป็นการเลื่อนหน้าเว็บและโฟกัสไปที่เนื้อหาหลัก ซึ่งได้แก่ จุดสังเกต <main> ที่มี id เป็น main

<main id="main">

คุณอาจไม่เคยเห็นลิงก์ในเว็บไซต์นี้ แม้ว่าจะอ่านเนื้อหาก่อนหน้านี้ทั้งหมดแล้ว และจะแสดงก็ต่อเมื่อมีโฟกัส:

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

นักออกแบบส่วนใหญ่ไม่ชอบลักษณะที่ปรากฏที่มีลิงก์ที่ด้านบนของหน้า คุณสามารถซ่อนลิงก์ไม่ให้เห็นได้ แต่อย่าลืมว่าเมื่อลิงก์ถูกโฟกัสแล้ว ซึ่งจะเกิดขึ้นเมื่อผู้ใช้แป้นพิมพ์กดแท็บผ่านลิงก์บนหน้านั้น ผู้ใช้ทุกคนจะต้องมองเห็นลิงก์ได้ ซ่อนเฉพาะเนื้อหาในสถานะที่ไม่ได้โฟกัสและไม่มีการใช้งานโดยใช้ตัวเลือกที่คล้ายกับ .visually-hidden:not(:focus):not(:active)

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

สารบัญ

ลิงก์ข้ามไปยังเนื้อหาจะเลื่อนเนื้อหาหลักเข้ามาในมุมมอง องค์ประกอบแรกคือส่วนหัว <h1> ที่มีชื่อของส่วนนี้ ในกรณีนี้คือ <h1>Marking up navigation</h1> ส่วนหัวหลักตามด้วยแท็กไลน์ ซึ่งเป็นคำอธิบายสั้นๆ เกี่ยวกับเนื้อหาของบทแนะนำนี้ ส่วนการนำทางของสารบัญจะอยู่ก่อนหรือหลังส่วนหัวในฐานของโค้ดจะขึ้นอยู่กับความกว้างของเบราว์เซอร์

ในหน้าจอแคบ สารบัญจะซ่อนอยู่หลังปุ่มในหน้านี้ที่สลับการแสดงการนำทาง

สารบัญจะปรากฎบนหน้าจอกว้างเสมอ พร้อมไฮไลต์ลิงก์ไปยังส่วนปัจจุบันด้วยสีน้ำเงิน

หากเบราว์เซอร์ของคุณกว้างกว่า 80em สารบัญจะอยู่ก่อนส่วนหัวในมาร์กอัปและคล้ายกับข้อความต่อไปนี้ (มีการนำชื่อคลาสออกเพื่อลดความซับซ้อนของมาร์กอัป)

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <li>
        <a href="#skip">Skip to content link</a>
      </li>
      <li>
        <a href="#toc">Table of contents</a>
      </li>
      <li>
        <a href="#bc">Page breadcrumbs</a>
      </li>
      <li>
        <a href="#ln">Local navigation</a>
      </li>
      <li>
        <a href="#global">Global navigation</a>
      </li>
    </ul>
  </div>
</nav>

<nav> เป็นองค์ประกอบที่ดีที่สุดที่ใช้สำหรับไปยังส่วนต่างๆ ของการนำทาง โดยจะแจ้งโปรแกรมอ่านหน้าจอและเครื่องมือค้นหาโดยอัตโนมัติว่าส่วนนั้นมีบทบาทเป็น navigation ซึ่งเป็นบทบาทจุดสังเกต

การใส่แอตทริบิวต์ aria-label จะมีคำอธิบายสั้นๆ เกี่ยวกับวัตถุประสงค์ของการนำทาง ในกรณีนี้ เนื่องจากค่าของแอตทริบิวต์ซ้ำซ้อนกับข้อความที่แสดงในหน้า จึงควรใช้ aria-labelledby เพื่ออ้างอิงข้อความที่มองเห็นได้

เราสามารถเปลี่ยน <div> ที่ไม่ใช่ความหมายเป็นย่อหน้า <p> จากนั้นเพิ่ม id เพื่อให้อ้างอิงได้ จากนั้นเราจะใช้ aria-labelledby

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>

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

การนำทางนี้คือสารบัญ หากต้องการใช้aria-label ให้ระบุข้อมูลดังกล่าวแทนการแสดงข้อความที่มองเห็นได้ซ้ำๆ

<nav aria-label="Table of Contents">
  <p>On this page</p>

เมื่อตั้งชื่อที่เข้าถึงได้ในองค์ประกอบ อย่าใส่ชื่อองค์ประกอบ โปรแกรมอ่านหน้าจอจะให้ข้อมูลดังกล่าวแก่ผู้ใช้ ตัวอย่างเช่น เมื่อใช้องค์ประกอบ <nav> อย่าใส่ "การนําทาง" เพราะข้อมูลนี้จะรวมอยู่ในองค์ประกอบที่ใช้ความหมาย

ตัวลิงก์เองจะแสดงในรายการที่ไม่เรียงลำดับ แม้ว่าไม่จำเป็นต้องซ้อนอยู่ในลิสต์ แต่การใช้ลิสต์จะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอรู้จำนวนรายการในลิสต์ได้ ดังนั้นลิงก์ต่างๆ จึงเป็นแต่ละรายการในการนำทาง

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

หากเบราว์เซอร์ของคุณมีความกว้างน้อยกว่า 80em วิดเจ็ต "ในหน้านี้" จะอยู่ด้านล่างหัวข้อและแท็กไลน์ ซึ่งทำได้โดยการรวมคอมโพเนนต์การนำทางของตารางเนื้อหา 2 รายการ และซ่อนองค์ประกอบการนำทางรายการใดรายการหนึ่งด้วย CSS display: none; โดยอิงตามคิวรี่สื่อ

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

เบรดครัมบ์ของหน้าเว็บ

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

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

หากเว็บไซต์มีโครงสร้างไดเรกทอรีแบบลำดับชั้นที่เรียบง่ายเหมือนกับใน web.dev การนำทางเบรดครัมบ์มักจะประกอบด้วยลิงก์ไปยังหน้าแรกหรือชื่อโฮสต์ที่มีลิงก์ไปยังไฟล์ดัชนีของแต่ละไดเรกทอรีในชื่อพาธของ URL การรวมหน้าปัจจุบันนั้นไม่บังคับและต้องมีความสนใจเป็นพิเศษ

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

ส่วนต่างๆ ของเบรดครัมบ์จะแสดงเส้นทางจากหน้าปัจจุบันกลับไปยังหน้าแรก โดยแสดงแต่ละระดับระหว่างช่วงต่างๆ

หน้าโมดูล "เรียนรู้ HTML ทุกหน้า" จะมีการนำทางเบรดครัมบ์เดียวกัน ซึ่งจะแสดงลำดับชั้นของบทเรียน HTML ในส่วน learn ของ web.dev โค้ดจะคล้ายกับโค้ดต่อไปนี้ โดยจะนำคลาสและ SVG รายละเอียดออกเพื่อความชัดเจน

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

การแสดงเส้นทางนี้เป็นไปตามแนวทางปฏิบัติแนะนำ โดยใช้องค์ประกอบ <nav> ซึ่งเป็นบทบาทจุดสังเกต ดังนั้นเทคโนโลยีความช่วยเหลือพิเศษจึงนำเสนอเบรดครัมบ์เป็นองค์ประกอบการนำทางในหน้า ชื่อ "เบรดครัมบ์" ที่เข้าถึงได้ซึ่งมีพร้อมกับ aria-label แตกต่างจากจุดสังเกตการนำทางอื่นๆ ในเอกสารปัจจุบัน

ระหว่างลิงก์จะมีตัวคั่นเนื้อหาที่ CSS สร้างขึ้น ตัวคั่นจะมาก่อนแต่ละรายการในลิสต์ที่เริ่มต้นด้วย <li> ที่ 2

[aria-label^="breadcrumb" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

โปรแกรมอ่านหน้าจอจะไม่ "เห็น" เครื่องมือดังกล่าว แนวทางปฏิบัติแนะนำคือควรซ่อนตัวคั่นระหว่างลิงก์แสดงเส้นทางจากโปรแกรมอ่านหน้าจอ และยังต้องตัดกับพื้นหลังมากพอเหมือนกับข้อความปกติ

เวอร์ชันนี้ใช้ลิสต์และรายการที่ไม่เรียงลำดับ แนะนำให้ใช้รายการแบบเรียงลำดับ เนื่องจากมีการแจกแจงรายการตามลำดับ และรายการ: มีการเพิ่ม role="list" กลับเข้ามาเนื่องจากค่าพร็อพเพอร์ตี้การแสดง CSS บางค่านำอรรถศาสตร์ออกจากองค์ประกอบบางรายการ

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

องค์ประกอบสุดท้ายคือองค์ประกอบ <share-action> ที่กําหนดเอง องค์ประกอบที่กำหนดเองจะกล่าวถึงในส่วนที่ 15 แม้ว่าองค์ประกอบที่กำหนดเองนี้จะไม่ได้เป็นส่วนหนึ่งของเบรดครัมบ์ แต่จะรวมองค์ประกอบที่ไม่เกี่ยวข้องใน <nav> ได้ ตราบใดที่การรวมนั้นสอดคล้องกันในทุกหน้า

หน้าปัจจุบัน

หน้านี้ หน้าปัจจุบัน "การนำทาง" ไม่ได้รวมอยู่ในเบรดครัมบ์ เมื่อหน้าปัจจุบันรวมอยู่ในเบรดครัมบ์ ข้อความไม่ควรเป็นลิงก์ และควรรวม aria-current="page" ไว้ในรายการของหน้าเว็บปัจจุบัน เมื่อไม่ได้รวมอยู่ คุณควรระบุว่าส่วนหัวที่ตามมาเป็นหน้าปัจจุบันที่มีไอคอนหรือสัญลักษณ์อื่น

หากการออกแบบเปลี่ยนไป คุณสามารถใช้เบรดครัมบ์เวอร์ชันอื่นได้

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

เบรดครัมบ์ไม่ได้มีไว้สำหรับขั้นตอนเชิงเส้น เช่น รายการเส้นทางที่ผู้ใช้ติดตามเพื่อไปยังหน้าปัจจุบันหรือรายการขั้นตอนที่ทำต่อจนถึงจุดนี้ในสูตรอาหารอาจซ้อนกันภายใน <nav> แต่ไม่ควรติดป้ายกำกับเป็นเบรดครัมบ์

การนำทางในพื้นที่

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

หากคุณกำลังเข้าชมเว็บไซต์นี้บนแท็บเล็ตหรืออุปกรณ์เคลื่อนที่ หรือมีหน้าจอที่แคบกว่า เมื่อโหลดหน้านี้ แถบด้านข้างจะซ่อนอยู่ คุณทําให้ปรากฏในเมนูแฮมเบอร์เกอร์ในแถบนำทางด้านบนได้ (ใช่ ส่วนหัวเป็นองค์ประกอบ <web-header> ที่กําหนดเองซึ่งมีการตั้งค่า role="navigation")

ความแตกต่างหลักระหว่างการนำทางในเครื่องแบบถาวรในหน้าจอแบบกว้างกับการนำทางในเครื่องบนหน้าจอที่แคบซึ่งสามารถทำให้ปรากฏและหายไปได้คือการแสดงปุ่มปิดในเวอร์ชันที่สามารถซ่อนได้ ไอคอนนี้จะซ่อนในหน้าจอแบบกว้างด้วย display: none;

ลิงก์ไปยังเอกสารหัวข้อ 010 นี้มีลักษณะแตกต่างจากลิงก์อื่นๆ ในการนำทางในเครื่องเล็กน้อย เพื่อบอกให้ผู้ใช้ทราบว่านี่คือหน้าปัจจุบัน ความแตกต่างด้านภาพนี้สร้างขึ้นด้วย CSS หน้าปัจจุบันยังระบุด้วยแอตทริบิวต์ aria-current="page" ด้วย ข้อมูลนี้บอกให้เทคโนโลยีความช่วยเหลือพิเศษทราบว่าเป็นลิงก์ไปยังหน้าปัจจุบัน HTML ของรายการในรายการนี้ภายในการนำทางในเครื่องนี้คล้ายกับ:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

หากนี่ไม่ใช่ครั้งแรกที่คุณไปที่หน้านี้ เครื่องหมายถูกจะไม่ปรากฏ ถ้าคุณเคยเข้าชมหน้าเว็บนี้มาก่อน ระบบจะตั้งค่า data-complete แอตทริบิวต์ที่กำหนดเองเป็น true และเครื่องหมายถูกจะปรากฏขึ้น เครื่องหมายถูกจะรวมอยู่ในแต่ละลิงก์ แต่ CSS ซ่อนช่องทำเครื่องหมายจากผู้ใช้ที่ยังไม่เคยมาที่หน้านี้มาก่อนโดยใช้ display: none โดยอิงตามการไม่มีแอตทริบิวต์และค่า data-complete="true" ดังนี้

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

เมื่อตั้งค่า display เป็นอย่างอื่นที่ไม่ใช่ none role จะแจ้งให้เทคโนโลยีความช่วยเหลือพิเศษทราบว่า SVG แทรกในบรรทัดเป็นรูปภาพ และ aria-label จะทำหน้าที่เป็นแอตทริบิวต์ alt ใน <img>

การนำทางทั้งหมด

การนำทางส่วนกลางคือส่วนการนำทางที่นำไปสู่หน้าระดับบนสุดของเว็บไซต์ซึ่งเหมือนกันในทุกหน้าของเว็บไซต์ การนำทางทั่วโลกของเว็บไซต์อาจประกอบด้วยแท็บที่เปิดรายการลิงก์ที่ฝังไว้ซึ่งลิงก์ไปยังส่วนย่อยทั้งหมดของเว็บไซต์หรือเมนูอื่นๆ โดยอาจรวมถึงส่วนที่มีชื่อ ปุ่ม และวิดเจ็ต Search ทั้งนี้ ฟีเจอร์เพิ่มเติมเหล่านี้ยังไม่เป็นข้อกำหนด สิ่งที่จำเป็นต้องมีคือการนำทางจะปรากฏในทุกหน้าและเหมือนกันในทุกหน้า และแน่นอนว่าจะมี aria-current="page" บนลิงก์ไปยังหน้าปัจจุบัน

การนำทางทั่วโลกช่วยให้สามารถเดินทางไปยังที่ใดก็ได้ของแอปพลิเคชันหรือเว็บไซต์ที่สอดคล้องกัน Google ไม่มีการนำทางทั่วโลก ที่ด้านบนสุดของหน้า ซึ่ง Yahoo! แม้ว่าพร็อพเพอร์ตี้หลักของ Yahoo! ทั้งหมดจะมีสไตล์ที่แตกต่างกัน แต่เนื้อหาสำหรับส่วนต่างๆ ส่วนใหญ่จะเหมือนกัน

เนื้อหาของส่วนหัวการนำทางทั่วโลกของข่าวและกีฬานั้นเหมือนกัน แต่ไอคอนที่แสดงให้เห็นว่าผู้ใช้กำลังเล่นกีฬามีความแตกต่างที่ไม่เพียงพอที่จะเข้าถึงได้ แม้แต่ผู้เข้าชมที่ไม่มีสายตาเลือนรางก็ตาม ทั้ง 2 ส่วนมีการนำทางส่วนกลางพร้อมการนำทางเฉพาะส่วนที่ด้านล่าง

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

ส่วนท้ายของหน้านี้มีองค์ประกอบ <nav> เพิ่มเติม 3 รายการ ได้แก่ การนำทางที่ส่วนท้าย สำหรับนักพัฒนาซอฟต์แวร์ของ Google รวมถึงข้อกำหนดและนโยบาย โดยแต่ละรายการจะเป็นลิงก์ การนำทางที่ส่วนท้ายจะมีวิธีมีส่วนร่วมกับ web.dev ใน GitHub, เนื้อหาด้านการศึกษาอื่นๆ จาก Google ภายนอก web.dev และลิงก์ "วิธีเชื่อมต่อ" ภายนอก

การไปยังส่วนต่างๆ ทั้ง 3 รายการใน <footer> เป็นองค์ประกอบ <nav> ที่มีaria-labelชื่อที่เข้าถึงได้สำหรับบทบาทจุดสังเกตเหล่านี้ การนำทางทั้งหมดที่เราเห็นเป็นลิงก์ที่ฝังอยู่ในรายการภายในการนำทาง เราได้รวมสิ่งที่คุณจำเป็นต้องทราบไว้เพื่อสร้างการนำทางของคุณเอง ถัดไป เราจะมาดูการมาร์กอัปตารางข้อมูล

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้ของคุณเกี่ยวกับการนำทาง

องค์ประกอบใดใช้เพื่อมาร์กอัปการนำทางหลักของเว็บไซต์

<navigation>

โปรดลองอีกครั้ง

<breadcrumb>

โปรดลองอีกครั้ง

<nav>

ถูกต้องแล้ว!

ในหน้าเดียวสามารถมีองค์ประกอบการนำทางได้หลายรายการใช่ไหม

เท็จ

โปรดลองอีกครั้ง

จริง

ถูกต้องแล้ว!