טקסט חלופי (alt text) הוא תיאור קצר של תמונה, שנכתב בתכונה alt בקוד. קורא מסך מקריא אותו במקום התמונה, הדפדפן מציג אותו כשהתמונה לא נטענת, ומנועי חיפוש משתמשים בו כדי להבין מה בתמונה. הכלל הבסיסי: הטקסט החלופי צריך להעביר את מה שהתמונה מעבירה בהקשר שלה — לא לתאר כל פיקסל. ותמונה שהיא קישוטית בלבד צריכה טקסט חלופי ריק, כדי שקורא המסך ידלג עליה.
למה זה חשוב
לפי WebAIM Million 2026, טקסט חלופי חסר הוא אחת השגיאות הנפוצות ביותר באתרים: הוא נמצא ב-53.1% מעמודי הבית, ו-16.2% מכלל התמונות שנבדקו היו בלעדיו — כ-10.8 תמונות בעמוד בממוצע. וגם כשיש טקסט חלופי, 10.8% ממנו היה חסר ערך: שם קובץ, או מילה כללית כמו "תמונה". זה קריטריון בסיסי בהנחיות WCAG (1.1.1, תוכן שאינו טקסט), ולכן גם חלק מהדרישות של ת"י 5568.
חמש שאלות שמכריעות מה לכתוב
ארגון W3C פרסם עץ החלטות לטקסט חלופי. בתמצית:
- יש בתמונה טקסט? אם אותו טקסט כבר מופיע לידה בטקסט אמיתי — alt ריק. אם לא — הטקסט שבתמונה נכנס ל-alt.
- התמונה היא קישור או כפתור? מתארים לאן היא מובילה או מה היא עושה — לא מה רואים בה.
- התמונה מוסיפה מידע? תיאור קצר של המידע הזה. גרף או תרשים מורכב — המידע עצמו מופיע גם בטקסט בעמוד.
- היא חוזרת על טקסט שכבר כתוב? alt ריק.
- היא קישוט בלבד? alt ריק.
דוגמאות לפי סוג תמונה
| תמונה | טקסט חלופי חלש | טקסט חלופי טוב |
|---|---|---|
| לוגו בראש האתר, מקשר לדף הבית | לוגו | WebUp — לדף הבית |
| אייקון זכוכית מגדלת בכפתור חיפוש | זכוכית מגדלת | חיפוש |
| תמונת מוצר בחנות | IMG_4471.jpg | כיסא משרדי שחור עם משענת רשת, מבט מהצד |
| צילום של צוות במסעדה | תמונה של אנשים | השף מגיש מנה בדלפק הפתוח של המסעדה |
| קו מפריד מעוצב בין אזורים | קו | (ריק) |
| תמונה ליד כותרת שאומרת את אותו דבר | חזרה על הכותרת | (ריק) |
alt ריק זה לא alt חסר
זו נקודה שמבלבלת הרבה: alt="" (ריק) אומר לקורא המסך "דלג על התמונה". תכונת alt חסרה לגמרי אומרת "אין לי מידע" — ואז חלק מקוראי המסך מקריאים את שם הקובץ. כל תמונה צריכה תכונת alt; השאלה היא רק אם היא מלאה או ריקה.
איך כותבים טקסט חלופי טוב
- קצר ולעניין. משפט אחד בדרך כלל מספיק. מה שלא נכנס — שייך לטקסט בעמוד.
- בלי "תמונה של". קורא המסך כבר מודיע שזו תמונה.
- לפי ההקשר. אותה תמונה של משרד יכולה לקבל טקסט שונה בעמוד אודות ("חדר הישיבות במשרד של העסק") ובמאמר על ארגונומיה ("עמדת עבודה עם מסך בגובה העיניים").
- בשפת העמוד. באתר עברי — בעברית.
- לא מקום למילות מפתח. טקסט חלופי שנכתב בשביל גוגל ולא בשביל אנשים הוא גם גרוע לנגישות וגם לא עוזר בחיפוש.
תמונות מורכבות: גרפים, תרשימים ואינפוגרפיקה
תרשים עם עשרה נתונים לא נכנס לשורת alt. הפתרון: טקסט חלופי קצר שאומר מה התרשים מראה ("תרשים זמני טעינה לפני ואחרי האופטימיזציה"), והנתונים עצמם בטבלה או בפסקה בעמוד. כך הם זמינים לכולם — כולל מי שמגדיל מסך ומתקשה לקרוא טקסט קטן בתוך תמונה.
בוורדפרס: איפה זה נכתב ומה נשבר
בוורדפרס ממלאים את הטקסט החלופי בספריית המדיה, בשדה "טקסט חלופי" — לא בשדה "כותרת" ולא ב"כיתוב". שני דברים שכדאי לדעת:
- הטקסט נשמר עם הקובץ. אם אותה תמונה משמשת בשני הקשרים שונים, כדאי לבדוק אם התבנית מאפשרת טקסט שונה לכל שימוש.
- תמונות רקע ב-CSS לא מקבלות alt בכלל. אם תמונת רקע מעבירה מידע — זה סימן שהיא צריכה להיות תמונה רגילה.
על ניהול התמונות בוורדפרס כתבתי בספריית המדיה בוורדפרס, ועל צילומי מוצר בצילום מוצרים לאתר.
ומה עם טקסט חלופי אוטומטי?
כלים שמייצרים תיאור אוטומטי לתמונות יכולים לעזור כטיוטה — במיוחד בקטלוג גדול. אבל הם לא יודעים מה ההקשר: שהתמונה היא קישור, שהיא קישוטית, או מה בדיוק חשוב להדגיש. טיוטה אוטומטית צריכה עין אנושית לפני פרסום.
שאלות נפוצות
מה ההבדל בין טקסט חלופי לכיתוב (caption)?
כיתוב מוצג לכל הגולשים מתחת לתמונה. טקסט חלופי מיועד למי שלא רואה את התמונה. אם הכיתוב כבר מתאר את התמונה, ה-alt יכול להיות קצר או ריק כדי לא לחזור פעמיים.
כמה תווים מותר?
אין מגבלה בתקן. ההמלצה המעשית היא משפט אחד; תיאור ארוך יותר שייך לטקסט בעמוד.
לוגו צריך טקסט חלופי?
כן — שם העסק. אם הלוגו הוא קישור לדף הבית, אפשר להוסיף את זה לטקסט.
מאמרים קשורים: ARIA בקצרה: מתי צריך, מתי מזיק, ודוגמאות קוד.
טקסט חלופי הוא חלק מכל הנגשה שאני עושה, יחד עם תבנית שמכריחה מילוי נכון. פרטים בעמוד הנגשת אתרים, ואפשר לשאול אותי על האתר שלכם.
אהבתם את המאמר?
