# תמונות מוכרחות להיות עם טקסט חלופי

<https://www.fixreports.com/he/issues/image-alt>

WCAG ⁨1.1.1 Non-text Content⁩ · רמה ⁨A⁩

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

## מה הכלל הזה בודק
מוודא שלאלמנטים של <img> יש טקסט חלופי או תפקיד של none או תצוגה.

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

## איך לתקן
### בכל אתר
1. מוסיפים תיאור קצר וספציפי בטקסט החלופי של כל תמונה, במערכת ניהול התוכן או בתבנית.
2. מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
3. לתמונות דקורטיביות צריך להיות מאפיין alt ריק (⁨alt=""⁩) כדי שקוראי מסך ידלגו עליהן.

### ב-Shopify
1. בממשק הניהול של Shopify, פותחים את Products > [המוצר] > Media, לוחצים על כל תמונה וממלאים את השדה 'Alt text'. לתמונות בתוך סקשנים, פותחים את Online Store > Themes > Customize ומגדירים את הטקסט החלופי של התמונה בהגדרות הסקשן.
2. מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
3. לתמונות דקורטיביות צריך להיות מאפיין alt ריק (⁨alt=""⁩) כדי שקוראי מסך ידלגו עליהן.

### ב-WooCommerce וב-WordPress
1. ב-WordPress, פותחים את Media > Library (מדיה > ספרייה), בוחרים כל תמונה וממלאים את השדה 'Alternative Text' (טקסט חלופי). תמונות בגלריית המוצר משתמשות באותו שדה.
2. מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
3. לתמונות דקורטיביות צריך להיות מאפיין alt ריק (⁨alt=""⁩) כדי שקוראי מסך ידלגו עליהן.

## איך לבדוק את התיקון
- סורקים שוב את העמודים שנפגעו.
- משתמשים בקורא מסך (VoiceOver: Cmd+F5 ב-Mac) כדי לשמוע איך תמונות המוצר מוקראות.

## מקורות
- תיעוד הכלל ב-axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- הבנת WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content