כותרות וציוני דרך

Rob Dodson

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

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

שימוש בכותרות כדי להגדיר את הנושאים בדף

משתמשים באלמנטים h1-h6 כדי ליצור מבנה של הדף. המטרה היא ליצור שלד או תמיכה לדף, כדי שכל מי שמנווט לפי כותרות יוכל ליצור תמונה מנטלית.

שיטה נפוצה היא להשתמש ב-h1 אחד לכותרת הראשית או ללוגו בדף, ברכיבי h2 כדי לסמן קטעים ראשיים וברכיבי h3 בקטעים משניים תומכים:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

לא לדלג על רמות של כותרות

מפתחים לעיתים קרובות מדלגים על רמות הכותרות כדי להשתמש בסגנונות ברירת המחדל של הדפדפן שתואמים מאוד לעיצוב שלהם. זוהי דוגמה ל'אנטי-דפוס' כי היא מפירה את מודל המתאר.

במקום להסתמך על גודל הגופן שמוגדר כברירת מחדל בדפדפן לכותרות, כדאי להשתמש ב-CSS משלכם ולא לדלג על רמות.

לדוגמה, באתר הזה יש קטע שנקרא 'חדשות', ואחריו שתי כותרות:

אתר חדשות עם כותרת, תמונה ראשית (Hero) וקטעים משניים.

כותרת הקטע 'חדשות' יכולה להיות אלמנט h2, והכותרות התומכות יכולות להיות אלמנטים h3.

מכיוון שה-font-size של 'בחדשות' קטן מהכותרת, יכול להיות שתתפתתו להגדיר את הכותרת של הכתבה הראשונה כ-h2 ולהגדיר את 'בחדשות' כ-h3. אולי זה יתאים לסגנון ברירת המחדל של הדפדפן, אבל זה יהרוס את קווי המתאר שמוצגים למשתמש קורא המסך.

אתם יכולים להשתמש ב-Lighthouse כדי לבדוק אם הדף מדלג על רמות כותרות. מריצים את הביקורת על הנגישות (Lighthouse‏ > אפשרויות > נגישות) ומחפשים את התוצאות של הביקורת כותרות לא מדלגות על רמות.

שימוש בסמנים לניווט

רכיבי 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.