การนำทาง

ตามที่คุณได้เรียนรู้เกี่ยวกับลิงก์ องค์ประกอบ <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> แล้วตามด้วยส่วนหัวหลักตามด้วยแท็กไลน์ ซึ่งเป็นคำอธิบายเนื้อหาสั้นๆ ของเนื้อหา Google Analytics การที่การนำทางสารบัญอยู่ก่อนหรือหลังส่วนหัวในฐานของโค้ดจะขึ้นอยู่กับความกว้างของเบราว์เซอร์

วันที่

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

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

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

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

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

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

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

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

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

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

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

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

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

ทดสอบความรู้ด้านการนำทาง