מבנה כותרות נגיש
משתמשי קוראי מסך מדלגים בין כותרות כמו שאתם מרפרפים בעיניים. לכן כותרות צריכות להיות כותרות אמיתיות (H1 עד H6), במבנה הגיוני, עם שם שמתאר את מה שבא אחריהן. בישראל זה חשוב במיוחד: ת"י 5568 הפך את סעיף 2.4.10, "כותרות מקטעים", לחובה ברמה AA, למרות שב-WCAG הוא ברמה AAA.
נבדק מול המקורות:
בקצרה
- H1 אחד שמתאר את העמוד.
- לא מדלגים רמות: אחרי H2 בא H3, לא H4.
- כותרת לפי תפקיד, לא לפי גודל. את הגודל קובעים ב-CSS.
- 2.4.10 נדרש בת"י 5568, ו-1.3.1 ו-2.4.6 נדרשים בכל מקרה.
דוגמה למבנה טוב
בקורא מסך, רשימת הכותרות של העמוד הזה היא בעצם תוכן עניינים. אם היא מבולגנת, גם הניווט מבולגן.
<h1>הזמנת תור לרופא שיניים</h1>
<h2>השירותים שלנו</h2>
<h3>טיפולי שורש</h3>
<h3>הלבנה</h3>
<h2>שעות פתיחה</h2>
<h2>יצירת קשר</h2>טעויות נפוצות
- כותרת שהיא רק טקסט מודגש וגדול, בלי תגית כותרת.
- תגית כותרת לטקסט שהוא לא כותרת, רק כי רצו אותיות גדולות.
- לוגו כ-H1 בכל עמוד, במקום כותרת העמוד.
- דילוג מ-H2 ל-H4 בגלל העיצוב של התבנית.
- כותרות כלליות כמו "עוד" או "מידע" שלא אומרות מה יש בחלק.
בבוני אתרים
ב-Wix, בוורדפרס ובאלמנטור בוחרים את רמת הכותרת בנפרד מהעיצוב. אם התבנית קובעת גודל מוזר לרמה מסוימת, משנים את העיצוב של הרמה, לא את הרמה עצמה.
שאלות נפוצות
מותר יותר מ-H1 אחד בעמוד?
HTML מאפשר, אבל להנגשה ולסדר ברור עדיף H1 אחד שמתאר את העמוד, וכל השאר H2 ומטה.
למה 2.4.10 חובה בישראל?
ת"י 5568 שינה את רמת הסעיף מ-AAA ל-AA, כך שכותרות לחלקי תוכן נדרשות בישראל.
איך בודקים מבנה כותרות?
בקורא מסך (Insert+F7 ב-NVDA) או בתוסף דפדפן שמציג את רשימת הכותרות. גם הבודק באתר מזהה דילוג רמות.
מקורות
המידע בדף מבוסס על: ת"י 5568 חלק 1, ספטמבר 2023 (gov.il) (נפתח בחלון חדש) · WCAG 2.0 (W3C, 2008) (נפתח בחלון חדש) · W3C WAI: Headings (tutorial) (נפתח בחלון חדש)