טקסט חלופי לתמונות

הטקסט החלופי לתמונה צריך להיות

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

תקציר טיפים שימושיים

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

תמונות תרשימים

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

תמונות בתוכן

• אם בתמונה מופיע אדם, חיה, צמח וכד', ובסמוך לתמונה יש תיאור המתאר את האובייקט בקצרה או יותר באריכות מספיק לתאר את התמונה בקצרה כאשר שם האובייקט מצוין ב ALT
• כאשר הטקסט החלופי לתמונה נמצא בסמוך לתמונה, טקסט חלופי ריק יהיה מספק – מאחר והטקסט המתאר את התמונה כבר נמצא בסמוך לתמונה

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

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

קישורים ותמונות להורדת קבצים

• כאשר אייקון של מסמך דיגיטלי כלול בקישור, הטקסט החלופי לאייקון מסמך דיגיטלי יהיה סוג הפורמט כגון PDF, WORD וכד'.
• אין להגדיר לאייקון של מסמך דיגיטלי ALT ריק מכיוון שסוג הפורמט יכול לסייע למשתמשי תוכנות קוראות מסך להבין באיזה סוג פורמט מדובר. בהתאם לכך, משתמשי תוכנות קוראות מסך יוכלו גם להיערך לסוג הפורמט בהיבטי התאמות הנגישות השונות ו/או סוג התוכנה.
• אם האייקון של מסמך דיגיטלי הוא הדרך היחידה להציג את הקישור להורדת המסמך, אזי הטקסט החלופי לתמונת המסמך תכלול גם את שם המסמך וגם את סוג הפורמט.

תמונות קישוט

תמונות קישוט הן

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

טיפים

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

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

תמונות כפתורים בטפסים

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

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

תמונות וכפתורים במפות

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

תמונות ברקע

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

תמונות מורכבות ותרשימים

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

הפניות

• WCAG 2 SC1.1.1 Non-text Content A
• WebAIM: Alternative Text
• Image Analyser לבדיקה מקוונת למאפייני תמונה כולל ALT ו  LONGDESC  וכך לאבחן  לאילו תמונות צריך להוסיף טקסט חלופי תקין
• Image link with title
• An example of img with alt and figcaption
• W3C Images Concepts
• W3C Complex Images