ניווט

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

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

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

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

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

<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>

הימנעות משינוי סדר הכרטיסיות

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

השתמשנו ב-CSS כדי להציג את סרגל הניווט כסרגל צד בדפים שרוחבם גדול מ-1,254px.

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

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

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

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

לכל דף מודול ב-Learn 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, כדי להציג אותם לפני כל פריט ברשימה, החל מהפריט השני.

[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 מסירים את הסמנטיקה מחלק מהרכיבים.

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

הדף הנוכחי, ניווט, לא נכלל בנתיב הגישה.

דף נוכחי

אם הדף הנוכחי נכלל בנתיב הניווט, עדיף שהטקסט לא יהיה קישור, ושהתווים 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>

יכול להיות שרכיבי ה-Breadcrumb לא יהיו זהים לשלבים הליניאריים שהמשתמש ביצע כדי להגיע לדף הנוכחי. אפשר להציג את רשימת השלבים שבוצעו עד עכשיו בתוך תג <nav>, אבל לא כרכיב של נתיב הניווט.

ניווט מקומי

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

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

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

בדרך כלל, הכותרת התחתונה כוללת קישורים לחברה, כמו הצהרות משפטיות, מידע על החברה, דף קריירה וקישורים למקורות חיצוניים רלוונטיים, כמו רשתות חברתיות.

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

בשלב הבא נראה איך מסמנים טבלאות נתונים.

בדיקת ההבנה

בודקים את הידע בניווט.