איך כותבים טקסט חלופי לתמונות, בעברית
טקסט חלופי (alt) הוא מה שקורא המסך מקריא במקום התמונה. הכלל הפשוט: כתבו את מה שהתמונה מוסרת בהקשר שלה, בקצרה ובעברית. תמונה קישוטית מקבלת alt ריק, ותמונה שהיא קישור או כפתור מתארת לאן היא מובילה או מה היא עושה.
נבדק מול המקורות:
בקצרה
- סעיף 1.1.1 ב-WCAG ובת"י 5568: חלופה טקסטואלית לכל תוכן שאינו טקסט.
- תמונה קישוטית: alt="" (ריק, לא חסר).
- לא לכתוב "תמונה של" או "לוגו של": קורא המסך כבר אומר שזו תמונה.
- לא להשאיר שם קובץ כמו IMG_2031.jpg.
עץ החלטות קצר
- התמונה היא קישור או כפתור? תארו את הפעולה או את היעד, לא את התמונה.
- יש בתמונה טקסט? כתבו את הטקסט עצמו.
- התמונה מוסיפה מידע לטקסט שלידה? תארו את המידע הזה במשפט קצר.
- התמונה רק מקשטת, או שהמידע כבר מופיע בטקסט? כתבו alt="".
- זה גרף או תרשים? כתבו את המסקנה ב-alt, ואת הנתונים המלאים בטקסט או בטבלה ליד.
מקור: W3C: עץ החלטות לטקסט חלופי (alt decision tree) (נפתח בחלון חדש)
דוגמאות לפני ואחרי
| סוג תמונה | לא טוב | טוב |
|---|---|---|
| לוגו שמקשר לדף הבית | alt="לוגו" | alt="מרפאת השן בגבעתיים – לדף הבית" |
| אייקון טלפון בכפתור חיוג | alt="phone-icon" | alt="התקשרו אלינו" |
| תמונת מוצר | alt="תמונה של נעל" | alt="נעל ריצה כחולה עם סוליה לבנה, מבט מהצד" |
| תמונת צוות באודות | alt="IMG_2031.jpg" | alt="שלושת עורכי הדין של המשרד בחדר הישיבות" |
| קו מפריד קישוטי | alt="קו" | alt="" |
| גרף מכירות | alt="גרף" | alt="המכירות עלו ב-12% ברבעון השלישי" + טבלה מתחת |
| באנר עם טקסט | alt="באנר" | alt="מבצע קיץ: 20% הנחה על כל המזגנים עד סוף אוגוסט" |
עברית, אורך וסגנון
- כתבו באותה שפה של הדף. באתר בעברית, alt באנגלית יוקרא בקול עברי ויישמע משובש.
- קצר עדיף: בדרך כלל משפט אחד. אין מגבלה רשמית, אבל תיאור ארוך מאוד מתאים יותר לטקסט בדף.
- בלי "תמונה של", "צילום של" או "אייקון". חוץ מכשסוג התמונה הוא המידע (למשל "ציור בצבעי מים").
- אל תדחסו מילות מפתח ל-SEO. זה פוגע במשתמשים ולא עוזר בדירוג.
- שימו לב לסימני פיסוק: נקודה בסוף עוזרת לקורא המסך לעצור.
בקוד
ככה זה נראה ב-HTML, כולל אייקון SVG קישוטי וכפתור אייקון:
<!-- תמונה עם מידע -->
<img src="clinic.jpg" alt="חדר ההמתנה במרפאה, עם כניסה נגישה לכיסא גלגלים">
<!-- תמונה קישוטית -->
<img src="wave.svg" alt="">
<!-- כפתור שיש בו רק אייקון -->
<button type="button" aria-label="חיפוש">
<svg aria-hidden="true" focusable="false">…</svg>
</button>מה הבודק שלנו מוצא
הבדיקה מסמנת תמונות בלי alt, וגם alt שנראה כמו שם קובץ (IMG_, DSC_, .jpg), מילה כללית ("תמונה", "image", "לוגו") או טקסט ארוך מאוד. היא לא יכולה לדעת אם התיאור נכון, לכן חלק מהממצאים מסומנים "לבדיקה".
איך לכתוב טקסט חלופי לתמונה
- שאלו מה התפקידקישור, כפתור, מידע או קישוט?
- דמיינו שהתמונה נעלמהמה המשתמש מפספס? את זה כותבים.
- כתבו קצר ובעבריתמשפט אחד, בלי "תמונה של".
- קישוט: alt ריקalt="" כדי שקורא המסך ידלג.
שאלות נפוצות
מה ההבדל בין alt ריק ל-alt חסר?
alt="" אומר לקורא המסך לדלג על התמונה. בלי alt בכלל, קורא המסך מקריא את שם הקובץ או את הכתובת, וזו הפרה של סעיף 1.1.1.
אפשר להשתמש בבינה מלאכותית לכתיבת alt?
אפשר כנקודת התחלה, אבל צריך לעבור על התוצאה. כלי אוטומטי לא יודע למה בחרתם את התמונה ומה חשוב בה בהקשר של הדף.
האם title מחליף alt?
לא. title מוצג כטולטיפ ולא נקרא באופן עקבי בכל קוראי המסך. השתמשו ב-alt.
מקורות
המידע בדף מבוסס על: W3C: עץ החלטות לטקסט חלופי (alt decision tree) (נפתח בחלון חדש) · WCAG 2.0 (W3C, 2008) (נפתח בחלון חדש) · ת"י 5568 חלק 1, ספטמבר 2023 (gov.il) (נפתח בחלון חדש)