כמה כללים חשובים
- תיאור התמונה צריך להיות שווה ערך בייצוג תוכן ותפקוד, באופן שיהיה תמציתי ופונקציונלי – כמה מילים, משפט או שניים
- לא לספק את אותו המידע כמו שכבר קיים בטקסט בסמוך לתמונה (לא להעתיק משפט או פסקה שקיימים כבר בטקסט)
- אין להוסיף לתיאור תמונה את המילים תמונה, תמונת קישור וכד'. תוכנות קוראות מסך עושות זאת
- תמונות קישוט או תמונות שאינן מוסיפות מידע נוסף ניתן להגדיר בטקסט חלופי ריק
דוגמאות לסוגי תמונות
- אם תמונה כוללת טקסט בסמוך לתמונה, והטקסט מתאר את תכלית התמונה, ניתן להסתפק בטקסט חלופי ריק דוגמאות: אנשים, חפצים, מוצרים
- קישור הכולל תמונה וטקסט, ניתן להגדיר לתמונה טקסט חלופי ריק. טקסט הקישור צריך להיות ברור ותכליתי
- אייקונים להורדת מסמכים דיגיטליים הכוללים גם טקסט של שם המסמך, במקרה זה יש להגדיר טקסט חלופי לאייקון המסמך הדיגיטלי כגון PDF, Microsoft Word וכד'
רשימת מוצרים במבנה רשימה או במבנה אריחים (Grid):
- קישור לעמוד מוצר, הכולל תמונה וטקסט, ניתן להגדיר לתמונה טקסט חלופי ריק. טקסט הקישור צריך להיות ברור ותכליתי
- אם הקישור למוצר מציג גם אייקון של מבצע ו/או הטבה, במקרה זה יש לספק טקסט חלופי לתמונה, באופן שיבהיר את מהות המבצע
- תמונות בעמוד מוצר: לתאר במדוייק ובבירור את המוצר – במיוחד כשמדובר בפריטי לבוש, כולל צבע, חלק, פסים, פרחוני, נקודות וכד', אורך שרוולים, מחשוף, כפתורים, רוכסן, כיוון הבגד במקרה והוא מוצג מכמה זוויות וכל פריט מידע חשוב נוסף.
- קישור שכולל רק תמונה, חובה להגדיר טקסט חלופי לתמונה: לדוגמה אייקונים שהם קישורים לרשתות חברתיות
- תמונות כפתורי פעולה: להגדיר לתמונות טקסט חלופי ריק את הכפתור יש להגדיר עם aria-label
תמונות תרשימים
- יתארו את התרשים בהתאם לכמות המידע סביב התרשים.
- אם הטקסט הסמוך לתרשים כולל הסבר על מה שרואים בתרשים, ניתן להסתפק בטקסט חלופי קצר ותכליתי. לדוגמה: תרשים מס' 1 מתאר את התפלגות צמיחת פרחי הבר.
- אם בסמוך לתרשים אין מידע מספק, או אם לדוגמה מוצגים מספר תרשימים אחד אחרי השני ניתן להציג את כותרת התרשים ככותרת היררכית. בנוסף לכך, לכל תמונת תרשים יש להוסיף תיאור ממצה עבור התרשים בטכניקות כגון טקסט חלופי ב alt, figure ו figcaption כאשר ה figure עוטף את התמונה, והתיאור מסופק ע"י
תמונות כפתורים בטפסים
- תארו את הפעולה שהכפתור יבצע: בטפסים מקוונים, כאשר מוסיפים כפתור הכולל תמונה, הטקסט החלופי של התמונה יהיה הפעולה שתתבצע – כגון "חיפוש" לאייקון של זכוכית מגדלת המוגדרת ככפתור.
- באופן כללי מומלץ להשתמש בכפתורים הכוללים טקסט. הסיבה העיקרית לכך היא שחלק מהאנשים אינם מכירים את כל הסמלים המייצגים. פעמים רבות, מעצבי ומפתחי אתרים מכירים סמלים חברתיים שאחרים אינם מכירים. חלק מהסמלים אוניברסאליים יותר וחלק פחות ובגלל השונות הגדולה, כדאי להשתמש בכפתורים הכוללים טקסט. שימוש בכפתורים המשלבים טקסט ותמונות מייצגות הוא הדרך הנכונה ביותר לייצג את המידע למגוון רחב מאוד של אנשים.
תמונות וכפתורים במפות
- בתמונות שהן מפות, יש להגדיר ALT המציין את תוכן המפה כגון מפת ארץ ישראל
- אין להציג בטקסט החלופי של תמונת המפה את כל נקודות הציון המוצגות בו
- את נקודות הציון השונות המוצגות במפה, יש להגדיר ככפתורים כאשר כל נקודת ציון תקבל תווית מתאימה של שם נקודת הציון.
- עוד חשוב להקפיד על ניווט מקלדת בין נקודות הציון השונות על גבי המפה באופן שייראה ע"י משתמשי מקלדת, יזוהה למשתמשי תוכנות קוראות מסך ויוגדרו בסדר ניווט תקין.
תמונות ברקע
- ככל הניתן מומלץ להימנע משימוש בתמונות ברקע (ב CSS)
- מעבר לכך שלא ניתן להגיע אליהן באמצעות תוכנות קוראות מסך
- כאשר מגדירים צבעי רקע וטקסט מותאמים לצורכי המשתמש, חלק מהתמונות נעלמות ברקע המותאם אישית – כך שלא ניתן לראות אותם. במיוחד חשוב כשמדובר בתמונות בכפתורים.
תמונות מורכבות ותרשימים
- כאשר לא ניתן להכניס תיאור ארוך ל ALT ניתן לספק אותו בדרכים חלופיות כגון קישור לעמוד אחר ובו התיאור או קישור לאזור באותו עמוד עם תיאור.
- כאשר בגוף הטקסט מופיע הסבר המתאר את התרשים, הממצאים או התובנות בו, ניתן להסתפק בטקסט חלופי קצר.
- אם העמוד מציג רק תמונת תרשים ללא שום הסבר או הסבר מאוד מצומצם, אזי הטקסט החלופי לתרשים, שיכול להינתן באותו עמוד, או בעמוד נפרד, חייב להיות מפורט ומוסבר למשתמש.
הפניות