מה הכלל הזה בודק
מוודא שלאלמנטים של <img> יש טקסט חלופי או תפקיד של none או תצוגה.
למה זה חשוב
WCAG 1.1.1 דורש טקסט חלופי לתמונות בעלות משמעות. בלעדיו, משתמשי קוראי מסך לא יכולים לדעת איזה מוצר מופיע בתמונה.
איך לתקן
בכל אתר
- מוסיפים תיאור קצר וספציפי בטקסט החלופי של כל תמונה, במערכת ניהול התוכן או בתבנית.
- מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
- לתמונות דקורטיביות צריך להיות מאפיין alt ריק (alt="") כדי שקוראי מסך ידלגו עליהן.
ב-Shopify
- בממשק הניהול של Shopify, פותחים את Products > [המוצר] > Media, לוחצים על כל תמונה וממלאים את השדה 'Alt text'. לתמונות בתוך סקשנים, פותחים את Online Store > Themes > Customize ומגדירים את הטקסט החלופי של התמונה בהגדרות הסקשן.
- מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
- לתמונות דקורטיביות צריך להיות מאפיין alt ריק (alt="") כדי שקוראי מסך ידלגו עליהן.
ב-WooCommerce וב-WordPress
- ב-WordPress, פותחים את Media > Library (מדיה > ספרייה), בוחרים כל תמונה וממלאים את השדה 'Alternative Text' (טקסט חלופי). תמונות בגלריית המוצר משתמשות באותו שדה.
- מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
- לתמונות דקורטיביות צריך להיות מאפיין alt ריק (alt="") כדי שקוראי מסך ידלגו עליהן.
איך לבדוק את התיקון
- סורקים שוב את העמודים שנפגעו.
- משתמשים בקורא מסך (VoiceOver: Cmd+F5 ב-Mac) כדי לשמוע איך תמונות המוצר מוקראות.
איך FixReports מזהה את הבעיה
הסריקה שלנו מריצה את הכלל image-alt של axe-core בדפדפן Chrome אמיתי בכל עמוד שהיא בודקת, ומדווחת על כל רכיב שנכשל יחד עם העמוד שלו, ה-markup שלו, ובמקרים הרלוונטיים גם צילום מסך.
בדיקה אוטומטית מאשרת שהבעיה הספציפית הזו קיימת. היא לא יכולה לקבוע אם שאר העמוד נגיש: חלק מהחסמים מתגלים רק כשאדם בודק את העמוד.