טיפול אלטרנטיבי לתמונות

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

<img src=”cute_cat.jpg” alt=”חתלתול קטן וחמוד” >

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

אם כך התפקיד של הטקסט האלטרנטיבי:

1. להבהיר את המשמעות והפונקציונליות של תמונה עבור משתמשים בקורא מסך.
2. להיות מוצג כאשר לא ניתן לטעון תמונות
3. הטקסט האלטרנטיבי מספק ויוצר. את הקשר של התמונה לתוכן עבור מנועי חיפוש.

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

תמונות ותוכן

דוגמה ראשונה

מודעותו ורגשותיו של הרצל לגבי מעמד היהודים ומצבם העמיקו כאשר סיקר את משפט דרייפוס כשליח "נויה פרייה פרסה" בפריז. הרצל לא האמין תחילה בחפותו של דרייפוס, אולם בהמשך היה משוכנע יותר ויותר, כי דרייפוס חף מפשע. הוא נכח באולם בית משפט בעת מתן פסק הדין ב-22 בדצמבר 1894, בו הוכרז שדרייפוס אשם ונידון למאסר עולם, וכעבור שבועיים, ב-5 בינואר 1895, היה בין מספר העיתונאים שהורשו להיכנס לכיכר הגדולה בה נערך טקס השפלתו הפומבית של דרייפוס. הרצל התרשם מעמידתו האיתנה.

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

תפקיד התמונה בקטע שלמעלה הוא להציג בפנינו את הרצל, כיצד נראה האדם שעליו מדובר בטקסט,  שימוש בתגית alt ריקה לא נכון פה, 'איש מזוקן'  – אומנם נכון אבל התמונה בא להציג לנו איש מזוקן מאוד ספציפי, הטקסט האלטרנטיבי הנכון לתמונה הוא "בינימין זאב הרצל".

דוגמה שניה

בינימין זאב הרצל

מודעותו ורגשותיו של הרצל לגבי מעמד היהודים ומצבם העמיקו כאשר סיקר את משפט דרייפוס כשליח "נויה פרייה פרסה" בפריז. הרצל לא האמין תחילה בחפותו של דרייפוס, אולם בהמשך היה משוכנע יותר ויותר, כי דרייפוס חף מפשע. הוא נכח באולם בית המשפט בעת מתן פסק הדין ב-22 בדצמבר 1894, בו הוכרז שדרייפוס אשם ונידון למאסר עולם, וכעבור שבועיים, ב-5 בינואר 1895, היה בין מספר העיתונאים שהורשו להיכנס לכיכר הגדולה בה נערך טקס השפלתו הפומבית של דרייפוס. הרצל התרשם מעמידתו האיתנה.

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

דוגמה שלישית

בינימין זאב הרצל

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

תמנות פונקציונליות

דוגמה רביעית

להורדת טופס הצהרת בריאות

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

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

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

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

דוגמה חמישית

התמונה שבין הכותרת "הקונגרס הציוני העולמי" לבין הטקסט שאחריו תפקידה קישוטי ודקורטיבי בלבד ואין צורך לתת לה טקסט אלטרנטיבי alt=“” יהיה הפתרון המתאים.

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

תמונה מורכבת

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

<img src="sales.jpg" alt="גרף עמודות של ההכנסות בשנת 2019" ><br>
<a href="salesdata.htm">צפה בנתוני ההכנסות</a>

אל תעשו

הטכניקה של טקסט בנפרד לתמונה נפרדת לא צריכה לאפשר את מנהג המגונה לשים עלון (ברושור) שלם של מידע כתמונה, התוכן הרב של ברושור, כותרות. טבלאות ורשימות, ניתן להציג בצורה נגישה בעמוד אינטרנט רגיל, שנבנה ב-html או נכתב במערכת ניהול התוכן של האתר. יש לכם עלון, בורשור או כל דבר אחר שהוא תמונה שמכילה המון טקסט? או תבנו את זה בטקסט חי באתר, הרבה יותר נכון, לפעמים יותר קריא ובטוח שזה עושה את האתר יותר נגיש. תשאירו את הברושור להזדמנות אחרת.

סיכום

בהרבה מקרים השאלה "אם לא היינו יכול להכניס את התמונה, מה היינו מכניסים במקום" יכולה לעזור להחליט מהו הטקסט האלטרנטיבי הטוב ביותר.

בהנגשת אתר, חשוב לזכור את הנקודות הבאות כאשר כותבים את תוכן לתגית ה-alt לתמונות:

1. מדויק ושווה -הטקסט האלטרנטיבי צריך להציג את אותו תוכן של התמונה ואת אותה פונקציונליות
2. תמציתי – צריך לכתוב טקסט מדויק ותמציתי ככל האפשר, נדיר שצריל משפט או יותר כדי להנגיש את התאר.
3. להמנע מכפילות – אם יש תוכן צמוד וקשור לתמונה אשר חוזר על תוכן ופונקציונליות של התמונה, הוא למעשה הטקסט האלטרנטיבי שלה ו,תגית הalt צריכה להיות ריקה.
4. אין צורך ב "תמונה של…", בתגית ה-alt, קורא המסך יודע כבר לזהות "ולהכריז" שמדובר בתמונה וגרפיקה.