ניווט

כמו שלמדתם בקטע קישורים, הרכיב <a> עם המאפיין href יוצר קישורים שהמשתמשים יכולים ללחוץ עליהם באמצעות לחיצה או הקשה. ברשימות, למדתם איך ליצור רשימות של תוכן. בקטע הזה נסביר איך לקבץ יחד רשימות של קישורים כדי ליצור ניווט.

יש כמה סוגי ניווט ומספר דרכים להציג אותם. שמות עוגנים בתוך טקסט שמקשרים לדפים אחרים באותו אתר נחשבים לניווט מקומי. ניווט מקומי שמורכב מסדרה של קישורים שמציגים את ההיררכיה של הדף הנוכחי ביחס למבנה האתר, או הדפים שמהם הגיע המשתמש כדי להגיע לדף הנוכחי, נקרא נתיב ניווט. תוכן העניינים של דף הוא סוג נוסף של ניווט מקומי. דף שמכיל קישורים היררכיים לכל דף באתר נקרא 'מפת אתר'. קטע הניווט שמוביל לדפים ברמה העליונה של האתר, שנמצא בכל דף, נקרא ניווט גלובלי. ניתן להציג ניווט גלובלי במספר דרכים, כולל סרגלי ניווט, תפריטים נפתחים ותפריטים נשלפים. אותו אתר עשוי להציג את הניווט הגלובלי שלו באופן שונה, בהתאם לגודל אזור התצוגה.

ודאו שהמשתמשים יכולים לנווט לכל דף באתר שלכם עם מספר הקליקים הנמוך ביותר, ושימו לב שהניווט אינטואיטיבי ולא מכביד. עם זאת, אין דרישות ספציפיות לרכיבי ניווט. 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).

טקסט הקישור יהיה 'דלג לראשי'. זהו השם הנגיש של הקישור. זהו אתר טכני, והמשתמשים ככל הנראה יודעים מה המשמעות של "ראשי". כמו כל הטקסט של הקישור, השם הנגיש צריך לציין בבירור לאן הקישור מוביל את המשתמש. יעד הקישור צריך להיות תחילת התוכן הראשי של הדף. כדי לבדוק זאת, כשהדף נטען, מקישים על הקישור 'דילוג לראשי'. לאחר מכן מקישים על Enter כדי לוודא שהסמל 'ידלג' לתוכן הראשי.

תוכן העניינים

הקישור 'דילוג לתוכן' גולל את התוכן הראשי והופך אותו לתצוגה. הרכיב הראשון הוא הכותרת <h1> עם הכותרת של הקטע הזה. במקרה הזה, <h1>Marking up navigation</h1>. אחרי הכותרת הראשית מופיעה התיאור הקצר – תיאור קצר של התוכן במדריך. השאלה אם הניווט בתוכן העניינים מופיעה לפני או אחרי הכותרת ב-codebase, תלוי ברוחב הדפדפן.

אם הדפדפן רחב יותר מ-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, הווידג'ט 'בדף הזה' מופיע מתחת לכותרת ולשורת התיוג. כדי לעשות זאת, אנחנו כוללים שני רכיבי ניווט של תוכן עניינים ומסתירים אחד מהם באמצעות display: none; ב-CSS על סמך שאילתת מדיה.

הכללת שני ווידג'טים זהים להצגה של אחד מהם בלבד נוגדת את הדפוס. הבייטים הנוספים הם זניחים. הסתרת תוכן HTML מכל המשתמשים על ידי שימוש ב-display: none CSS היא הולמת. הבעיה היא שבמסכים רחבים, תוכן העניינים מופיע לפני #main, ובמסכים צרים יותר תוכן העניינים נמצא בתוך ה- #main. כדי לדלג לתוכן באמצעות המקלדת, המערכת מדלגת על טבלת התוכן במסך רחב. המשתמשים רגילים לתוכן רספונסיבי ולשינוי המיקום כשהם מחליפים מכשיר או מגדילים את הגופן, אבל הם לא מצפים שסדר הכרטיסיות ישתנה כשהם ישתנו. פריסות הדפים צריכות להיות נגישות, ניתנות לחיזוי ועקביות בכל האתר. במקרה הזה, לא ניתן לחזות את המיקום של תוכן העניינים.

נתיבי ניווט בדף

נתיבי ניווט מספקים ניווט משני שעוזר למשתמשים להבין היכן הם נמצאים באתר. בדרך כלל הן מציגות את היררכיית כתובות ה-URL של המסמך הנוכחי ואת המיקום של הדף הנוכחי במבנה האתר. מבנה האתר מנקודת המבט של המשתמש עשוי להיות שונה ממבנה הקובץ בשרת. זה בסדר. המשתמש לא צריך לדעת איך מארגנים את הקבצים, אבל צריכה להיות לו יכולת לנווט בתוכן.

נתיבי ניווט עוזרים למשתמשים לנווט באתר ולהבין את הארגון שלו, ומאפשרים להם לנווט במהירות לכל קטע אם הוא מגיע לקטעי אב, בלי שיצטרכו לחזור אחורה בכל דף קודם שביקרו בו כדי להגיע לדף הנוכחי בעזרת הפונקציונליות של back.

אם לאתר יש מבנה היררכי פשוט של ספרייה, בדומה ל-web.dev, הניווט בנתיבי הניווט יכלול בדרך כלל קישור לדף הבית, או לשם המארח, עם קישור לקובץ האינדקס של כל ספרייה בשם הנתיב של כתובת האתר. הוספת הדף הנוכחי היא אופציונלית ודורשת קצת תשומת לב נוספת.

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> השני.

[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', ביחד עם כותרת החיפוש והכותרת של Google+ Local, הם הקישורים לניווט במיקום.

אם נכנסת לאתר הזה דרך טאבלט או מכשיר נייד, או אם המסך שלך צר יותר, כשטוענים את הדף, סרגל הצד מוסתר. אפשר להגדיר אותו כגלוי דרך תפריט ההמבורגר בסרגל הניווט העליון (כן, הכותרת היא רכיב <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! יש סגנונות שונים, התוכן של רוב הקטעים זהה.

התוכן של כותרות הניווט הגלובליות של החדשות ושל הספורט זהה, אך הסמל שמראה שהמשתמש עסוק כעת בספורט אינו מספיק ניגודיות כדי לאפשר גישה; גם עבור מבקרים עם ליקויי ראייה. בשני הקטעים יש ניווט גלובלי ומתחתיו ניווט מקומי ספציפי לקטע.

בדומה לניווטים גלובליים, הכותרות התחתונות צריכות להיות זהות בכל הדפים. אבל זהו הדבר היחיד שדמיון. ניווט גלובלי מאפשר ניווט לכל חלקי האתר מנקודת מבט של המוצר. לרכיבי ניווט בכותרת תחתונה אין דרישות ספציפיות. באופן כללי, הכותרת התחתונה כוללת קישורים ארגוניים, כמו הצהרות משפטיות, על החברה וקריירה, והיא יכולה להפנות למקורות חיצוניים, כמו סמלים של מדיה חברתית.

הכותרת התחתונה של הדף מכילה שלושה רכיבים נוספים של <nav>: הניווט בכותרת התחתונה, המפתחים של Google והתנאים והמדיניות, כשכל אחד מהם הוא קישור. הניווט בכותרת התחתונה כולל הוראות לתרום ל-web.dev ב-GitHub, תוכן חינוכי נוסף שמסופק על ידי Google מחוץ ל-web.dev וקישורים חיצוניים ל "איך להתחבר".

שלושת רכיבי הניווט האלה ב-<footer> הם רכיבי <nav> עם aria-labelשמספקים שם נגיש לתפקידים האלה לציון הדרך. כל הניווטים שראינו היו קישורים שהוצבו ברשימות בתוך ניווט. אספנו את כל מה שאתה צריך לדעת כדי ליצור ניווטים משלך. בשלב הבא נראה סימון של טבלאות נתונים.

בדיקת ההבנה

בחינת הידע שלכם בנושא ניווט.