טקסט חלופי לתמונות (alt)
בקצרה
טקסט חלופי (תכונת alt) הוא תיאור טקסטואלי של תמונה, שקורא מסך מקריא ושמוצג כשהתמונה לא נטענת. הכלל: תמונה אינפורמטיבית מקבלת alt שמתאר את המשמעות/התפקיד; תמונה דקורטיבית מקבלת alt="" ריק כדי שקורא המסך ידלג עליה. זו דרישה ברמה A (1.1.1).
למה צריך alt?
קורא מסך לא "רואה" תמונות - הוא מקריא את ה-alt. בלי alt, אדם עיוור מקבל "תמונה" או שם הקובץ, וזה חסר ערך.
איך כותבים alt טוב?
- תארו את המשמעות או התפקיד, לא כל פיקסל. למשל: "כפתור הוספה לעגלה", לא "תמונה כתומה".
- היו תמציתיים (בדרך כלל עד משפט).
- אל תתחילו ב"תמונה של..." - קורא המסך כבר מודיע שזו תמונה.
- אם התמונה היא קישור - ה-alt מתאר את היעד.
תמונות דקורטיביות
תמונת רקע או קישוט שאינו מוסיף מידע צריך alt="" (ריק) כדי שקורא המסך ידלג עליו. אסור פשוט להשמיט את התכונה - אז חלק מהקוראים יקריאו את שם הקובץ.
מקרים מיוחדים
- תמונה עם טקסט - הטקסט שבתמונה חייב להופיע גם ב-alt.
- גרפים ותרשימים - תיאור קצר ב-alt, ופירוט הנתונים בטקסט סמוך או בטבלה.
- לוגו מקושר - alt כמו "דף הבית - שם האתר".
מבחן מהיר
שאלו: אם התמונה תיעלם, איזה מידע יאבד? זה מה שצריך להיכנס ל-alt.
שאלות נפוצות
מתי משאירים alt ריק?
בתמונות דקורטיביות שאינן מוסיפות מידע - alt="".
האם לכתוב 'תמונה של'?
לא צריך. קורא המסך כבר מודיע שזו תמונה.
מה עושים עם גרף?
alt קצר, ופירוט הנתונים בטקסט או בטבלה סמוכה.
מקורות
- W3C - Images Tutorial (w3.org/WAI)