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

רוב דודסון

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

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

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

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

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

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

יש להימנע מדילוג על רמות הכותרת

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

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

לדוגמה, באתר זה יש קטע בשם "IN THE NEWS", ואחריו שתי כותרות:

אתר חדשות עם כותרת, תמונה ראשית (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 NY Times ו-ויקיפדיה, מכילים קישורי דילוג. נסו לעבור למסך וללחוץ על TAB במקלדת כמה פעמים.

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