רכיבי HTML5 כמו main, nav ו-aside פועלים כציוני דרך
או האזורים המיוחדים בדף
קוראי מסך וטכנולוגיות מסייעות אחרות יכולים לדלג ישירות.
על ידי שימוש באלמנטים של ציון דרך,
תוכלו לשפר באופן משמעותי את חוויית הניווט באתר
למשתמשים בטכנולוגיה מסייעת.
למידע נוסף ב-Deque University
ציוני דרך של HTML 5 ו-ARIA.
איך לבדוק ציוני דרך באופן ידני
שימוש ברשימת האלמנטים המרכזיים של 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 כדי להמחיש את מבנה הדף ולראות קטעים שלא נכללים בציוני הדרך:
איך להשתמש ביעילות בציוני דרך
- שימוש ברכיבים של ציוני דרך כדי להגדיר חלקים עיקריים בדף
במקום להסתמך על אלמנטים כלליים כמו
<div>או<span>. - יש להשתמש בציוני דרך כדי להעביר את מבנה הדף.
לדוגמה, הרכיב
<main>צריך לכלול את כל התוכן שקשור באופן ישיר לרעיון המרכזי של הדף, כך שבכל דף אמור להיות רק רכיב אחד. כדאי לעיין בסיכום של MDN בנושא רכיבי תוכן ללמוד איך להשתמש בכל ציון דרך. - חשוב להפעיל שיקול דעת כשמשתמשים בציוני דרך. למעשה, יותר מדי ציוני דרך יכולים להקשות יותר על הניווט למשתמשים ב'טכנולוגיה מסייעת', וכך מונע מהם לדלג בקלות לקטע תוכן רצוי.
עיין בפוסט כותרות וציוני דרך אפשר לקבל מידע נוסף.