การนำทาง

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

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

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

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

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

เว็บไซต์บางแห่งมีลิงก์ "ข้ามไปยังเนื้อหา" ซึ่งมักจะเป็นองค์ประกอบแรกในลําดับโฟกัส ซึ่งอาจมีลักษณะดังนี้

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

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

<main id="main">

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

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

ซ่อนเฉพาะเนื้อหาในสถานะที่ไม่ได้โฟกัสและไม่ได้ใช้งานโดยใช้ตัวเลือกที่คล้ายกับ .visually-hidden:not(:focus):not(:active)

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

สารบัญ

องค์ประกอบแรกของเนื้อหาหลักคือส่วนหัว <h1> ที่มีชื่อหน้าเว็บนี้ว่า <h1>Navigation</h1> ตามด้วยคำอธิบายสั้นๆ เกี่ยวกับเนื้อหาในบทแนะนำนี้

ในหน้าจอขนาดเล็ก สารบัญจะปรากฏหลังส่วนหัว ในหน้าจอขนาดใหญ่ แถบจะแสดงในแถบด้านข้างที่ชิดขวา

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

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

การใช้ id อาจมีลักษณะดังนี้

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

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

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

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

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

หลีกเลี่ยงการเปลี่ยนลําดับแท็บ

สารบัญอาจปรากฏหลังส่วนหัว ในหน้าจอขนาดเล็ก หรือในแถบด้านข้างที่ชิดขวา การใส่ชุดการนําทางที่เหมือนกัน 2 ชุดเพื่อแสดงเพียงชุดเดียวถือเป็นรูปแบบที่ไม่ถูกต้อง

เราใช้ CSS เพื่อแสดงการนําทางเป็นแถบด้านข้างในหน้าเว็บที่กว้างกว่า 1254 พิกเซล

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

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

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

โค้ดควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

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

แต่ละลิงก์จะมีตัวคั่นเนื้อหาคั่นอยู่ ตัวคั่นเหล่านี้สามารถสร้างด้วย CSS เพื่อแสดงก่อนแต่ละรายการ โดยเริ่มด้วยรายการที่ 2

[aria-label^="breadcrumbs" 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 บางค่านำความหมายออกจากองค์ประกอบบางอย่าง

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

หน้าปัจจุบัน "การนําทาง" จะไม่รวมอยู่ในเบรดครัมบ์

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

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

หากคุณเข้าชมเว็บไซต์นี้บนอุปกรณ์เคลื่อนที่หรือมีหน้าจอที่แคบกว่า ระบบจะซ่อนแถบด้านข้างไว้เมื่อคุณโหลดหน้านี้ คุณสามารถเข้าถึงได้ด้วย menu ในการนําทางด้านบน

ความแตกต่างหลักระหว่างการนำทางในพื้นที่แบบถาวรในหน้าจอกว้างกับการนำทางในพื้นที่ในหน้าจอที่แคบกว่าคือลูกศรที่นำกลับไปยังการนำทางด้านบนหลัก จากนั้นปิดการนำทาง

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

นอกจากนี้ คุณยังระบุหน้าปัจจุบันได้ด้วยแอตทริบิวต์ aria-current="page" ซึ่งจะแจ้งให้เทคโนโลยีความช่วยเหลือพิเศษทราบว่าลิงก์นั้นไปยังหน้าปัจจุบัน

ตามหลักการแล้ว HTML ของรายการนี้ภายในการนำทางภายในเครื่องจะมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

การนำทางส่วนกลาง

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

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

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

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

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

ส่วนท้ายของหน้านี้มีองค์ประกอบการนําทาง 2 ชุด ได้แก่ ชุดการนําทาง 3 คอลัมน์ของ web.dev ที่เกี่ยวข้อง และการนําทางเกี่ยวกับข้อกําหนดและความเป็นส่วนตัวของ Google ที่แยกต่างหาก การนำทางที่ส่วนท้ายจะประกอบด้วยวิธีมีส่วนร่วมใน web.dev, เนื้อหาที่เกี่ยวข้องซึ่งทีม web.dev ให้บริการ และลิงก์โซเชียลมีเดียภายนอก

ต่อไป เราจะมาดูการมาร์กอัปตารางข้อมูล

ทดสอบความเข้าใจ

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