כותרת עמוד נגישה: מה זה, למה זה חשוב ואיך משנים בוורדפרס
כותרת עמוד (title) היא השם של העמוד שמוגדר בקוד, בתוך תגית <title>. רואים אותה בלשונית של הדפדפן ובתוצאות החיפוש בגוגל, ותוכנה להקראת מסך משמיעה אותה ראשונה כשנכנסים לעמוד. לפי קריטריון 2.4.2 בתקן, לכל עמוד צריכה להיות כותרת ייחודית שמתארת את הנושא שלו.
את המאמר הזה כתבתי בעיקר בגלל מספר הפניות שאני מקבל בנושא. מתכנתים, אנשי תוכן ומנהלי אתרים שואלים אותי שוב ושוב: "למה הבדיקה אומרת שאין כותרת עמוד, הרי יש כותרת גדולה בראש העמוד?". אז בואו נבין מה ההבדל, למה זה חשוב, ואיך משנים את הכותרת בוורדפרס בכמה דקות.
מה זו כותרת עמוד, ובמה היא שונה מהכותרות שבתוכן?
בכל עמוד יש כמה סוגים של כותרות, ומכאן הבלבול:
- כותרת עמוד (title): מוגדרת בקוד, בתוך <head>. היא לא מופיעה בגוף העמוד, אלא בלשונית הדפדפן, בתוצאות החיפוש ובשם הסימנייה.
- כותרת ראשית (H1): הכותרת הגדולה שרואים בראש העמוד, למשל "צור קשר".
- כותרות משנה (H2 עד H6): הכותרות שמחלקות את התוכן לסעיפים.
כשבדיקת נגישות מצביעה על קריטריון 2.4.2, "כותרת דף", הכוונה היא לסוג הראשון. על הסדר הנכון של H1 עד H6 בתוך התוכן כתבתי במאמר איך בונים היררכיית כותרות נכונה.
למה כותרת עמוד חשובה לנגישות?
דמיינו משתמש עיוור שפתח חמש לשוניות בדפדפן. הוא לא רואה אותן. הוא מזהה כל לשונית רק לפי הכותרת שהתוכנה להקראת מסך משמיעה לו. אם בכל הלשוניות כתוב "דף הבית" או שם החברה בלבד, הוא פשוט לא יודע איפה הוא נמצא.
כותרת עמוד טובה עונה לו מיד על שתי שאלות: לאן הגעתי, והאם כדאי לי להישאר כאן. ויש בונוס: זו גם הכותרת שגוגל מציג בתוצאות החיפוש, כך שאותה עבודה משפרת את הנגישות ואת הקידום האורגני.
מה צריך להיות בכותרת עמוד נגישה?
אין נוסחה אחת, אבל אני תמיד אומר ללקוחות: חשבו איך הייתם מתארים את העמוד בשורה אחת, למישהו שלא רואה אותו. כמה כללים שעובדים:
- כותרת ייחודית לכל עמוד. שתי כותרות זהות באתר הן סימן לבעיה.
- הנושא קודם, שם העסק בסוף. למשל "צור קשר עם צוות התמיכה | שם העסק".
- קצרה וברורה, בערך עד 60 תווים, כדי שלא תיחתך בגוגל.
- בעמודים עם שלבים (טופס, קופה) מציינים את השלב: "שלב 2 מתוך 3: פרטי משלוח".
- אחרי שליחת טופס עם שגיאה, כדאי שהכותרת תשקף את זה, למשל "שגיאה בטופס ההרשמה".
דוגמה מהאתר שלנו: בעמוד "אודות" לא מספיק לכתוב "אודותינו". עדיף כותרת שאומרת מה יש בעמוד ומי אנחנו.
איך משנים כותרת עמוד בוורדפרס?
הדרך הקלה ביותר, גם למי שלא מבין בקוד, היא תוסף Yoast SEO. הגרסה החינמית מספיקה לגמרי:
- נכנסים לעריכת העמוד או הפוסט.
- גוללים לאזור Yoast SEO שמתחת לתוכן (או פותחים אותו בסרגל הצד).
- בשדה "כותרת SEO" כותבים את הכותרת שתרצו שתופיע בלשונית ובגוגל.
- שומרים, פותחים את העמוד ובודקים שהכותרת מופיעה בלשונית הדפדפן.
בסרטון: איך משנים כותרת עמוד ותיאור עמוד בוורדפרס
בסרטון אני מראה צעד אחר צעד איפה נמצא השדה ב-Yoast, איך כותבים כותרת ותיאור לעמוד, ואיך בודקים שהשינוי נכנס. אם אתם עובדים עם מתכנת, אפשר פשוט לבקש ממנו להתקין את התוסף ולהראות לכם את השדה. מדריך רחב יותר להנגשת תוכן בוורדפרס תמצאו במדריך הנגשת התוכן לאתרי וורדפרס.
קיבלתם הערה על קריטריון 2.4.2?
השאירו פרטים ונעבור יחד על הכותרות באתר, בלי התחייבות.
אל תבלבלו: כותרת עמוד מול תכונת title בקישורים
יש עוד דבר שנקרא "title", והוא הבועה הקטנה שקופצת כשמרחפים עם העכבר מעל קישור או אייקון. אנשים רבים אומרים לי "כתבתי טייטל ולא קרה כלום", ומתברר שהם התכוונו לבועה הזו, או להפך. אלה שני דברים שונים לגמרי.
התכונה הזו לא מחליפה טקסט ברור בקישור, ויש לה כמה חסרונות מבחינת נגישות:
- היא מופיעה רק בריחוף עכבר, ולכן מי שמנווט במקלדת לא רואה אותה.
- היא לא גדלה כשמגדילים את הטקסט בדפדפן.
- היא עלולה להסתיר תוכן שנמצא לידה.
לכן משתמשים בה רק כתוספת, לא למידע חשוב. אם יש באתר תכונת title מיותרת שחוזרת על טקסט הקישור, עדיף להסיר אותה.
שורה תחתונה
כותרת עמוד היא אחד התיקונים הכי פשוטים באתר, והיא משפיעה על כל משתמש בתוכנה להקראת מסך. אם בבדיקת הנגישות שלכם עלה קריטריון 2.4.2, ברוב המקרים מסדרים אותו בשעה. ב-WEB-A אנחנו מטפלים בזה כחלק משירות הנגשת האתר המלא. יש לכם שאלה על כותרות באתר שלכם? השאירו פרטים ואני אחזור אליכם.
שאלות נפוצות על כותרת עמוד
מה ההבדל בין כותרת עמוד ל-H1?
כותרת העמוד מוגדרת בקוד ומופיעה בלשונית הדפדפן ובגוגל. H1 היא הכותרת הגדולה שמופיעה בתוך העמוד עצמו. הן יכולות להיות דומות, אבל הן לא אותו דבר.
האם כותרת עמוד היא חובה לפי התקן?
כן. קריטריון 2.4.2 ב-WCAG, שהתקן הישראלי מאמץ, דורש שלכל עמוד תהיה כותרת שמתארת את הנושא או המטרה שלו.
צריך לשנות את הכותרת בכל עמוד בנפרד?
כן, כי כל עמוד צריך כותרת ייחודית. בוורדפרס אפשר להגדיר תבנית ברירת מחדל ב-Yoast, אבל בעמודים החשובים כדאי לכתוב כותרת ידנית.
איך בודקים שכותרת העמוד נקראת נכון?
פותחים את העמוד עם תוכנה להקראת מסך כמו NVDA ומקשיבים למשפט הראשון. אפשר גם פשוט לרחף מעל לשונית הדפדפן ולקרוא את הכותרת המלאה.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.