ตามที่คุณได้เรียนรู้ในลิงก์ องค์ประกอบ <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>
ส่วนหัวหลักตามด้วยแท็กไลน์ ซึ่งเป็นคำอธิบายสั้นๆ เกี่ยวกับเนื้อหาของบทแนะนำนี้ ส่วนการนำทางของสารบัญจะอยู่ก่อนหรือหลังส่วนหัวในฐานของโค้ดจะขึ้นอยู่กับความกว้างของเบราว์เซอร์
![ในหน้าจอแคบ สารบัญจะซ่อนอยู่หลังปุ่มในหน้านี้ที่สลับการแสดงการนำทาง](https://web.developers.google.cn/static/learn/html/navigation/image/on-narrow-screens-table-c83e6648833a5.png?authuser=5&hl=th)
![ในโหมดหน้าจอกว้าง สารบัญจะปรากฏอยู่เสมอ โดยลิงก์ไปยังส่วนปัจจุบันจะถูกไฮไลต์เป็นสีน้ำเงิน](https://web.developers.google.cn/static/learn/html/navigation/image/on-wide-screens-table-fd8614138c606.png?authuser=5&hl=th)
หากเบราว์เซอร์ของคุณกว้างกว่า 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>
ในหน้าเดียวสามารถมีองค์ประกอบการนำทางได้หลายรายการใช่ไหม