קוראי מסך כוללים פקודות לקפיצה מהירה בין כותרות או לאזורים ספציפיים של ציוני דרך. למעשה, בסקר בקרב המשתמשים בקורא מסך נמצא שברוב המקרים הם מנווטים בדפים לא מוכרים על ידי עיון בכותרות.
שימוש בכותרות וברכיבי ציון דרך נכונים יכול לשפר באופן משמעותי את חוויית הניווט באתר למשתמשים בטכנולוגיות מסייעות.
שימוש בכותרות כדי להגדיר את הנושאים בדף
משתמשים באלמנטים h1-h6 כדי ליצור מבנה של הדף. המטרה היא ליצור שלד או שלד של הדף, כך שכל מי שמנווט באמצעות כותרות יוכל ליצור תמונה סטטית.
שיטה מקובלת היא להשתמש ברכיב h1 יחיד לכותרת או ללוגו הראשיים בדף, ברכיבי h2 כדי לציין קטעים ראשיים, וברכיבי h3 בקטעי משנה תומכים:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
לא לדלג על רמות של כותרות
מפתחים לעיתים קרובות מדלגים על רמות הכותרות כדי להשתמש בסגנונות ברירת המחדל של הדפדפן שתואמים מאוד לעיצוב שלהם. זוהי דוגמה ל'אנטי-דפוס' כי היא מפירה את מודל המתאר.
במקום להסתמך על גודל הגופן שמוגדר כברירת מחדל בדפדפן לכותרות, כדאי להשתמש ב-CSS משלכם ולא לדלג על רמות.
לדוגמה, באתר הזה יש קטע שנקרא 'חדשות', ואחריו שתי כותרות:
כותרת הקטע, "בחדשות", יכולה להיות h2, והכותרות התומכים יכולות להיות רכיבי h3.
מכיוון שהfont-size של "IN the News" (בחדשות) קטן יותר מהכותרת, יהיה מפתה להפוך את הכותרת של הכתבה הראשונה ל-h2 ולהפוך את הכותרת "IN THE NEWS" ל-h3. אולי זה יתאים לסגנון ברירת המחדל של הדפדפן, אבל זה ישבור את קווי המתאר שמוצגים למשתמש קורא המסך.
אפשר להשתמש ב-Lighthouse כדי לבדוק אם הדף מדלג על רמות של כותרות. מריצים את הביקורת על הנגישות (Lighthouse > Options > Accessibility) ומחפשים את התוצאות של הביקורת Headings don't skip levels.
שימוש בציוני דרך לצורך ניווט
רכיבי HTML5 כמו main, nav ו-aside משמשים כציוני דרך, או אזורים מיוחדים בדף שקורא המסך יכול לקפוץ אליהם.
כדאי להשתמש בתגי ציון דרך כדי להגדיר קטעים עיקריים בדף, במקום להסתמך על תגי div. חשוב לא להוסיף יותר מדי ציוני דרך, כי הרבה מדי ציוני דרך עלולים להיראות עמוסים מדי. לדוגמה, כדאי להשתמש רק ברכיב main אחד במקום ב-3 או ב-4.
ב-Lighthouse מומלץ לבצע ביקורת ידנית באתר כדי לבדוק ש"נעשה שימוש ברכיבי ציון דרך של HTML5 כדי לשפר את הניווט". אתם יכולים להיעזר ברשימת הרכיבים של ציוני הדרך כדי לבדוק את הדף.
עקיפת תוכן שחוזר על עצמו באמצעות קישורי דילוג
בכותרות של הרבה אתרים יש ניווט חוזר, שיכול להיות מעצבן לניווט באמצעות טכנולוגיה מסייעת. אפשר להשתמש בקישור דילוג כדי לאפשר למשתמשים לעקוף את התוכן הזה.
קישור לדילוג הוא עוגן מחוץ למסך שתמיד הוא הפריט הראשון ב-DOM שאפשר להתמקד בו. בדרך כלל הוא מכיל קישור בדף לתוכן הראשי של הדף. מכיוון שזה הרכיב הראשון ב-DOM, נדרשת רק פעולה אחת מהטכנולוגיה המסייעת כדי להתמקד בו ולעקוף את הניווט החוזר.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
אתרים פופולריים רבים, כמו GitHub, The New York Times ו-Wikipedia, מכילים קישורי דילוג. נסו להיכנס אליהם וללחוץ כמה פעמים על מקש TAB במקלדת.
בעזרת Lighthouse תוכלו לבדוק אם הדף מכיל קישור לדילוג. מריצים שוב את הביקורת על נגישות ומחפשים את התוצאות של הביקורת הדף כולל כותרת, קישור לדילוג או קטע שמסומן כ-landmark.