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

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

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