ניווט

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

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

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

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

"דילוג לתוכן" קישור [link]

הרכיב הראשון בדף הוא קישור פנימי:

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

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

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

ניווט כללי

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

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

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

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

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

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

בדיקת ההבנה

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