הנגשת תמונות באתר: 3 סוגי תמונות, מה כותבים בטקסט החלופי ואיך מוסיפים אותו

הנגשת תמונות באתר נעשית בעיקר באמצעות טקסט חלופי (alt), תיאור כתוב שמשויך לכל תמונה. קודם מזהים את סוג התמונה: תמונה דקורטיבית מקבלת alt ריק, תמונה שמעבירה מסר מקבלת תיאור קצר של מה שחשוב בה, ותמונה מורכבת כמו פלייר מקבלת תיאור קצר ועוד כל המידע שלה כטקסט חי בעמוד. ובכל מקרה, טקסט חשוב לא נכתב בתוך התמונה.

מה זה טקסט חלופי, ומי נחשף אליו

טקסט חלופי, טקסט אלטרנטיבי ו-alt text הם שמות שונים לאותו דבר: טקסט שיושב "מאחורי" התמונה. משתמש שרואה את התמונה לא נחשף אליו. מי שכן:

• משתמשים עם קורא מסך, שהתוכנה מקריאה להם את הטקסט כשהם מגיעים לתמונה.
• משתמשים עם חיבור איטי, או שחסמו הצגת תמונות. הטקסט מופיע במקום התמונה, והם מבינים אם כדאי לחכות או ללחוץ.
• מנועי חיפוש, שמבינים מה בתמונה ויכולים להציג אותה גם בחיפוש תמונות.

טקסט חלופי הוא גם הקריטריון הראשון בהנחיות WCAG, שעליהן מבוסס התקן הישראלי 5568.

3 סוגי תמונות ומה כל אחד צריך

סוג	דוגמאות	מה עושים
דקורטיבית	אייקון לקישוט, תמונת רקע, כוכבים, קווים	alt ריק (alt="") או הגדרה כתמונת רקע ב-CSS
מעבירה מסר	תמונת מוצר, תמונת צוות, מנה בתפריט, תמונת קטגוריה	תיאור קצר של מה שחשוב למשתמש בהקשר של העמוד
מורכבת	פלייר, הזמנה לאירוע, אינפוגרפיקה, תרשים	תיאור קצר ב-alt, ואת כל המידע כטקסט חי ליד התמונה או בקובץ נגיש

תמונה דקורטיבית

המבחן שאני עושה בהדרכות: אם משתמש לא יראה את התמונה, האם הוא יפספס משהו? האם היא מעבירה מסר? אם התשובה לא, היא דקורטיבית. משאירים לה alt ריק, כלומר זוג מירכאות בלי כלום ביניהן, או מגדירים אותה כתמונת רקע, וקורא המסך מדלג עליה.

תמונה שמעבירה מסר

כאן משתמש שלא יראה את התמונה עלול להתקשות לקבל שירות או לקנות מוצר. תמונת נעל בחנות: איך משתמש עיוור ידע מה הצבע והדגם? בתמונת מוצר מתארים צבע, מבנה וכל פרט ייחודי. בתמונת איש צוות כותבים את השם. אם בתמונה יש טקסט קצר ופשוט, כוללים אותו ב-alt בדיוק כפי שהוא כתוב.

תמונה מורכבת

פלייר עם תאריכים, מחירים ופרטי הרשמה לא נכנס ל-alt. קורא המסך מקריא את ה-alt ברצף אחד, ומשתמש שישמע שלושה נושאים בנשימה אחת לא יבין כלום. יש שתי דרכים:

1. לכתוב את כל המידע שבתמונה כטקסט חי בעמוד, ממש ליד התמונה, עם כותרות ומבנה.
2. לצרף ליד התמונה קישור לקובץ נגיש (למשל PDF שעבר הנגשה מלאה) עם כל התוכן.

בסרטון: טקסט חלופי שמעביר מידע

• 0:33 תמונת נעל בחנות: מה משתמש עיוור צריך לדעת.
• 1:33 שילוב ביטוי מפתח בתיאור, רק כשהוא טבעי.
• 2:05 חיפוש תמונות כמקור תנועה נוסף.
• 3:08 תמונה עם טקסט: את הטקסט כותבים ב-alt בדיוק כפי שהוא מופיע.

איך כותבים טקסט חלופי טוב

• תארו את מה שחשוב בהקשר של העמוד, לא כל פרט שרואים.
• אל תתחילו ב"תמונה של" או "קישור ל". קורא המסך כבר מודיע שזו תמונה.
• קצר ותמציתי. אין מגבלת תווים בתקן, אבל אני ממליץ על משפט אחד, בדרך כלל עד כ-100 תווים. מידע ארוך יותר שייך לטקסט בעמוד.
• תמונה שהיא קישור או כפתור: תארו את היעד או את הפעולה, למשל "יצירת קשר", ולא את הציור.
• ביטוי מפתח רק כשהוא מתאים לתמונה באמת. איך עושים את זה נכון, במאמר טקסט חלופי לקידום אורגני.

טקסט על תמונה: הבעיה הנפוצה ביותר

הכלל שלי: לא כותבים מידע חשוב בתוך קובץ התמונה. מידע כזה צריך להיות טקסט חי, שנמצא "מעל" התמונה ולא חלק ממנה, כך שקורא מסך ומקלדת מגיעים אליו. איך בודקים? מעבירים את העכבר על הטקסט ומנסים לסמן אותו. אם אפשר לסמן, הוא חי. אם לא, הוא חלק מהתמונה, וצריך לכתוב אותו ב-alt או, עדיף, להפוך אותו לטקסט חי. הרחבה במאמר טקסט מוטמע בתמונה.

איך מוסיפים טקסט חלופי בוורדפרס

לא צריך ידע טכני. אם אתם יודעים להעלות פוסט או מוצר, תדעו גם את זה. הממשק נראה אותו דבר בעברית, באנגלית או בכל שפה אחרת.

1. במערכת הניהול, היכנסו למדיה > ספרייה.
2. לחצו על התמונה. ייפתח חלון עם התמונה בצד אחד ושדות עריכה בצד השני.
3. בשדה העליון, "טקסט חלופי", כתבו את התיאור.
4. לחצו מחוץ לשדה או Enter. השמירה אוטומטית, ותופיע הודעה שהשינוי נשמר.
5. בתמונה חדשה, אותו חלון נפתח כבר בהעלאה, בכל מקום באתר: תמונה ראשית, גלריה או תוכן. מלאו את השדה לפני שאתם מכניסים אותה.

תמונות קבועות, כמו לוגו בכותרת העליונה או תמונות בפוטר, מקבלות טקסט חלופי באותה דרך, דרך ספריית המדיה.

בסרטון: טקסט חלופי בספריית המדיה

• 0:00 כניסה למערכת הניהול ולספריית המדיה.
• 0:30 לחיצה על תמונה ושדה הטקסט החלופי.
• 1:01 העתקת הטקסט שעל התמונה לשדה, ושמירה אוטומטית.
• 1:42 היתרון לקידום במנועי חיפוש.

ברשתות החברתיות ובמסמכים

אותם עקרונות חלים על תמונות שאתם מעלים לרשתות החברתיות. ברוב הפלטפורמות יש אפשרות להוסיף טקסט חלופי בהגדרות המתקדמות של הפוסט או בעריכת התמונה. ובמסמכים, התהליך מוסבר צעד אחר צעד במדריך טקסט חלופי בוורד.

הבדל קריטי: alt ריק אומר לקורא המסך "דלג". תמונה בלי מאפיין alt בכלל עלולה להקריא את שם הקובץ, למשל IMG_4521.jpg. שדה הכותרת (title) בוורדפרס לא מחליף את הטקסט החלופי. ועדכון בספריית המדיה חל על הכנסות חדשות בלבד: תמונה שכבר בעמוד מתקנים בהגדרות הבלוק בעורך.