תיעוד HTML עם דוגמאות להרצה: Nav

Q: האם הקישורים בתוך nav צריכים להיות ברשימה?

זה הדפוס הנפוץ, והוא טוב: של פריטי מאפשר לקוראי מסך להכריז כמה קישורים יש בתפריט. גם קישורים פשוטים ישירות בתוך תקינים, למשל לשניים או שלושה קישורים בשורה.

Q: האם כל קבוצת קישורים צריכה אלמנט nav?

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

Q: איך יוצרים סרגל ניווט אופקי?

שימו את הקישורים ב- בתוך , ואז תנו לרשימה display: flex; list-style: none; padding: 0; ו-gap. Flexbox מסדר את הפריטים בשורה.

Q: איך מציגים את העמוד הנוכחי בסרגל ניווט?

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

סרגל ניווט עם nav

עטפו את התפריט ב-<nav> ושימו את הקישורים ברשימה. Flexbox הופך את הרשימה לסרגל אופקי:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none ו-padding: 0 מסירים את התבליטים ואת ההזחה. display: block על כל קישור מאפשר ל-padding שלו לתפוס מקום אמיתי בסרגל, כך שכל התיבה עם הריפוד היא אזור הלחיצה. מחקו את השורה display: flex ואותו תפריט הופך לרשימה אנכית, וכך נראה תפריט בסרגל צד.

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

סימון העמוד הנוכחי

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

העבירו את aria-current="page" לקישור אחר וההדגשה עוברת איתו. עיצוב לפי המאפיין במקום לפי class כמו .active שומר על המראה ועל הנגישות מסונכרנים: אי אפשר שיהיה אחד בלי השני.

כמה nav באותו עמוד: תוויות ופירורי לחם

בעמוד יכולים להיות תפריט ראשי, פירורי לחם ותוכן עניינים, כל אחד ב-<nav> משלו. תנו לכל אחד aria-label, כדי שקורא מסך יכריז "Breadcrumb navigation" במקום שלוש רשומות "navigation" זהות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

פירורי לחם משתמשים ברשימה ממוספרת <ol> כי הסדר חשוב. הלוכסנים מגיעים מ-::before ב-CSS, כך שקוראי מסך לא מקריאים "slash" בין כל פריט. הפריט האחרון הוא העמוד הנוכחי ואינו קישור.

תוכן עניינים

רשימה של קישורים לחלקים באותו עמוד היא גם ניווט. קישורי #id קופצים לאלמנט עם ה-id הזה; נסו אותם בתצוגה המקדימה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

כאן התווית מגיעה מכותרת גלויה עם aria-labelledby, וזה עדיף על aria-label כשהכותרת כבר מופיעה על המסך.

כפתור תפריט למובייל

במסכים צרים, תפריטים בדרך כלל מסתתרים מאחורי כפתור. השתמשו ב-<button> אמיתי עם aria-expanded, והשאירו את הקישורים בתוך <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded אומר לקורא מסך אם התפריט פתוח, והמאפיין hidden מסיר את הרשימה גם מהמסך וגם מעץ הנגישות כל עוד היא סגורה. במסכים רחבים הייתם מציגים את הרשימה עם media query ומסתירים את הכפתור.

טעויות נפוצות

לעטוף כל קבוצת קישורים ב-<nav>. השתמשו בו לתפריט הראשי, לפירורי לחם, לעימוד ולתוכן עניינים. קישורים בתוך טקסט אינם בלוקים של ניווט.
כפתור תפריט שעשוי מ-<div>. אי אפשר להעביר אליו פוקוס או ללחוץ עליו במקלדת. השתמשו ב-<button>.
כמה nav בלי תוויות. הוסיפו aria-label או aria-labelledby לכל אחד כדי שאפשר יהיה להבחין ביניהם.
רק לצבוע את הקישור הנוכחי. הוסיפו aria-current="page"; צבע לבדו לא מוכרז וייתכן שלא כולם יראו אותו.
קישורים עם href="#" בפרודקשן. בדמו זה בסדר, אבל פריטי תפריט אמיתיים צריכים כתובות URL אמיתיות כדי שיעבדו כשפותחים אותם בלשונית חדשה. העמוד על קישורים מסביר איך ערכי href עובדים.

שאלות נפוצות

מהי התגית nav ב-HTML?

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

האם הקישורים בתוך nav צריכים להיות ברשימה?

זה הדפוס הנפוץ, והוא טוב: <ul> של פריטי <li> מאפשר לקוראי מסך להכריז כמה קישורים יש בתפריט. גם קישורים פשוטים ישירות בתוך <nav> תקינים, למשל לשניים או שלושה קישורים בשורה.

האם כל קבוצת קישורים צריכה אלמנט nav?

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

איך יוצרים סרגל ניווט אופקי?

שימו את הקישורים ב-<ul> בתוך <nav>, ואז תנו לרשימה display: flex; list-style: none; padding: 0; ו-gap. Flexbox מסדר את הפריטים בשורה.

איך מציגים את העמוד הנוכחי בסרגל ניווט?

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

האם בעמוד יכול להיות יותר מ-nav אחד?

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

מושגים קשורים