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

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

איך בודקים ציוני דרך באופן ידני

כדאי להשתמש ברשימת האלמנטים של ציון הדרך של 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 עם ציוני דרך מודגשים על ידי התוסף &#39;תובנות נגישות&#39;

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

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

למידע נוסף, עיינו בפוסט כותרות וציוני דרך.

מקורות מידע