רכיבי HTML5 מפורסמים משמשים לשיפור הניווט

רכיבי HTML5 כמו main,‏ nav ו-aside משמשים כסמנים או כאזורים מיוחדים בדף, שאליהם קוראי מסך וטכנולוגיות מסייעות אחרות יכולים לעבור. שימוש ברכיבי ציון דרך יכול לשפר באופן משמעותי את חוויית הניווט באתר למשתמשים בטכנולוגיות מסייעות. מידע נוסף זמין במאמר HTML 5 ו-ARIA Landmarks ב-Deque University.

איך בודקים באופן ידני את נקודות העניין

אפשר להיעזר ברשימת הרכיבים של W3C לרכיבי ציון כדי לוודא שכל קטע ראשי בדף מכיל רכיב ציון. לדוגמה:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

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

צילום מסך של web.dev עם ציוני דרך מודגשים על ידי התוסף Accessibility Insights

איך משתמשים ביעדים ידועים בצורה יעילה

  • כדאי להשתמש ברכיבי ציון דרך כדי להגדיר קטעים עיקריים בדף, במקום להסתמך על רכיבים כלליים כמו <div> או <span>.
  • כדאי להשתמש בנקודות ציון כדי להעביר את המבנה של הדף. לדוגמה, אלמנט <main> צריך לכלול את כל התוכן שקשור ישירות לרעיון הראשי של הדף, ולכן צריך להיות רק אלמנט אחד לכל דף. בסיכום של MDN על רכיבי חלוקה של תוכן מוסבר איך משתמשים בכל אחת מנקודות הציון.
  • השתמשו בנקודות ציון בצורה מושכלת. יותר מדי ציוני דרך עלולים להקשות יותר על המשתמשים בטכנולוגיות מסייעות לנווט, כי הם לא יכולים לדלג בקלות לחלק הרצוי בתוכן.

מידע נוסף זמין במאמר כותרות ונקודות ציון.

משאבים