היררכיית כותרות באתר היא הסדר הלוגי של תגיות הכותרת בעמוד: כותרת H1 אחת לנושא העמוד, H2 לכל פרק, H3 לתת-פרק בתוך H2, וכן הלאה, בלי לדלג על רמות. מי שמשתמש בתוכנה להקראת מסך קופץ בין הכותרות כדי להבין את העמוד, בדיוק כמו שאתם סורקים אותו בעיניים. כשההיררכיה שבורה, העמוד הופך לגוש טקסט אחד.
אחת הטעויות שאני רואה הכי הרבה בבדיקות היא כותרות שנבחרו לפי הגודל. "ה-H4 נראה יפה יותר, אז נשים אותו". זה נראה טוב על המסך, אבל למי שלא רואה את המסך זה בלגן.
כותרת היא לא עיצוב. היא מבנה.
למה היררכיית כותרות באתר חשובה לנגישות?
משתמשים בתוכנות להקראת מסך, כמו NVDA או VoiceOver, יכולים להציג רשימה של כל הכותרות בעמוד ולקפוץ ישר לפרק שמעניין אותם. זו אחת הדרכים הנפוצות ביותר לנווט באתר. אם הכותרות לא מסומנות כראוי, או שהסדר שלהן לא הגיוני, הם צריכים להקשיב לכל העמוד מההתחלה.
ב-WCAG זה מופיע בשני מקומות: קריטריון 1.3.1 (מידע ויחסים) דורש שמבנה שרואים בעיניים יהיה מסומן גם בקוד, וקריטריון 2.4.6 (כותרות ותוויות) דורש שהכותרות יתארו את התוכן שאחריהן. שניהם ברמה שת"י 5568 מחייב.
איך בונים היררכיית כותרות נכונה
| רמה | מתי משתמשים | דוגמה במאמר הזה |
|---|---|---|
| H1 | פעם אחת בעמוד, לנושא העמוד. בדרך כלל זו כותרת המאמר | היררכיית כותרות באתר: איך בונים מבנה נגיש |
| H2 | לכל פרק מרכזי | למה היררכיית כותרות חשובה לנגישות? |
| H3 | לתת-פרק בתוך H2 | טעות 1: כותרת לפי גודל |
| H4-H6 | רק אם באמת יש עוד רמת עומק. במאמר רגיל כמעט לא צריך | אין |
שלושה כללים פשוטים:
- H1 אחד בעמוד. ברוב תבניות הוורדפרס כותרת המאמר כבר מוגדרת H1. לכן בגוף המאמר מתחילים מ-H2.
- לא מדלגים על רמות. אחרי H2 בא H3, לא H4. מותר לחזור למעלה, מ-H4 ל-H2, כשמתחיל פרק חדש.
- כל כותרת מתארת את מה שאחריה. "מידע נוסף" או "פרק 2" לא אומרים כלום למי שמדלג בין כותרות.
הטעויות הנפוצות
טעות 1: בוחרים כותרת לפי הגודל
רוצים טקסט גדול? משנים את הגודל בעיצוב, לא את רמת הכותרת. רמת הכותרת נקבעת לפי המקום שלה במבנה.
טעות 2: טקסט מודגש במקום כותרת
שורה מודגשת וגדולה נראית כמו כותרת, אבל תוכנה להקראת מסך לא יודעת את זה. אם זה פותח פרק חדש, זו צריכה להיות כותרת אמיתית.
טעות 3: כותרות בשביל עיצוב
המצב ההפוך: משתמשים בתגית כותרת לטקסט שהוא לא כותרת, כמו סיסמה, ציטוט או מספר טלפון בפוטר, רק כי הוא יוצא גדול. זה מוסיף לרשימת הכותרות פריטים שאין מאחוריהם תוכן.
לא בטוחים שמבנה הכותרות באתר תקין?
השאירו פרטים ונבדוק את התבניות והתוכן מול ת"י 5568.
איך בודקים את היררכיית הכותרות בעמוד
- מתקינים תוסף דפדפן שמציג את מבנה הכותרות, כמו HeadingsMap, או משתמשים בכלי הבדיקה של WAVE.
- בודקים שיש H1 אחד, ושהוא תואם לנושא העמוד.
- קוראים רק את הכותרות, לפי הסדר. אם הבנתם מהן על מה העמוד ואיך הוא מחולק, המבנה טוב.
- מחפשים קפיצות ברמות (H2 ואחריו H4) וטקסט מודגש שאמור להיות כותרת.
- בודקים גם את התבנית: תפריט, סרגל צד ופוטר מוסיפים לפעמים כותרות מיותרות לכל עמוד.
כותרות הן רק חלק אחד מתוכן נגיש. את שאר הסעיפים שבאחריות מי שכותב את התוכן ריכזתי במאמר על הקריטריונים להנגשת תוכן. ואם כבר עובדים על מבנה העמוד, כדאי לעבור גם על הנגשת הקישורים בעמוד.
בונוס קטן: מבנה כותרות ברור עוזר גם לגוגל ולמנועי AI להבין את העמוד. זה לא הסיבה לעשות את זה, אבל זה לא מזיק.
שורה תחתונה
היררכיית כותרות נכונה היא אחד התיקונים הכי זולים בנגישות, ואחד המשפיעים ביותר. לפעמים מספיק לתקן את התבנית פעם אחת, וכל האתר מסתדר. אם אתם לא בטוחים איך המבנה באתר שלכם נראה, ב-WEB-A אנחנו בודקים את זה כחלק מהנגשת אתרים מלאה, כולל התבניות ולא רק התוכן. דברו איתי.
שאלות נפוצות על היררכיית כותרות
כמה כותרות H1 מותר בעמוד?
ההמלצה היא H1 אחד, לנושא העמוד. טכנית HTML מאפשר יותר, אבל H1 אחד ברור עוזר למשתמשים בתוכנה להקראת מסך להבין מיד איפה הם.
מה קורה אם מדלגים מ-H2 ל-H4?
מי שמנווט לפי כותרות עלול לחשוב שפספס פרק, כי ההיררכיה לא רציפה. אם צריך טקסט קטן יותר, משנים את העיצוב ומשאירים H3.
אפשר להשתמש בכותרת רק כדי שהטקסט יהיה גדול?
לא. כותרת מסמנת מבנה. לטקסט גדול שאינו פותח פרק משתמשים בעיצוב (גודל גופן), לא בתגית כותרת.
איך בודקים את מבנה הכותרות בלי ידע בקוד?
עם תוסף דפדפן כמו HeadingsMap או WAVE. הם מציגים את כל הכותרות בעמוד לפי הסדר והרמה, ורואים מיד אם יש קפיצות.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.