יישום טקסט חלופי לתמונות לפי WCAG

יישום טקסט חלופי (Alt Text) לתמונות לפי WCAG

כמה פעמים ראיתם שגיאת "תמונה חסרה תכונת alt" בקונסולה? זו הפרה של WCAG SC 1.1.1, שעלולה לעלות לכם עד שליש מתנועת החיפוש ולהוביל להשלכות משפטיות. לפי WCAG 2.1, כל תוכן שאינו טקסט חייב להיות בעל חלופה טקסטואלית. בפרויקט אחד (חנות מסחר אלקטרוני עם 5,000 מוצרים), ביקורת גילתה ש-40% מהתמונות חסרות טקסט חלופי. לאחר תיקונן, שיעור ההמרה מהחיפוש עלה ב-12%, ותלונות ממשתמשי קוראי מסך ירדו לאפס. הצוות שלנו, עם ניסיון של 10 שנים ולמעלה מ-500 פרויקטי נגישות, מבטיח עמידה בדרישות. ביקורת טקסט חלופי אופיינית מונעת קנסות משמעותיים על חוסר נגישות. התמחור מותאם אישית לכל פרויקט.

כיצד לכתוב טקסט חלופי נכון

• תמונות אינפורמטיביות: תארו את התוכן והפונקציה בקצרה. הימנעו ממילים כמו "תמונה" או "צילום".
• תמונות דקורטיביות: השתמשו ב-alt ריק וב-role="presentation". קוראי מסך ידלגו עליהן, מבלי להפריע למשתמש.
• תמונות פונקציונליות (כפתורים, קישורים): תארו את הפעולה, לא את המראה.

דוגמאות:

<!-- Плохо -->
<img src="photo.jpg" alt="фото">
<img src="chart.png" alt="chart">
<!-- Хорошо -->
<img src="ceo-photo.jpg" alt="Иван Петров, генеральный директор компании">
<img src="revenue-q3.png" alt="График выручки текущий квартал: рост на 35% по сравнению с предыдущим">

לתמונות דקורטיביות:

<img src="bg-pattern.svg" alt="" role="presentation"> 

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

<a href="/home">
  <img src="logo.svg" alt="На главную страницу">
</a>
<button>
  <img src="search-icon.svg" alt="Поиск">
</button>

מדוע Alt ריק חשוב לתמונות דקורטיביות

אם תמונה דקורטיבית חסרה <!-- Плохо --> <img src="photo.jpg" alt="фото"> <img src="chart.png" alt="chart"> <!-- Хорошо --> <img src="ceo-photo.jpg" alt="Иван Петров, генеральный директор компании"> <img src="revenue-q3.png" alt="График выручки текущий квартал: рост на 35% по сравнению с предыдущим"> , חלק מקוראי המסך קוראים את שם הקובץ (לדוגמה, "bg-pattern.svg"), מה שמעמיס על זרימת המידע ומעצבן משתמשים. <img src="bg-pattern.svg" alt="" role="presentation"> ריק אומר במפורש לקורא המסך להתעלם מהתמונה. המהנדסים שלנו מוסמכים לנגישות ותמיד מוודאים זאת.

כיצד לשלב בדיקות טקסט חלופי ב-CI/CD

בדיקות נגישות אוטומטיות צריכות להיות חלק מהצינור (pipeline) שלכם. השתמשו ב-axe-core עם Playwright או Lighthouse CI. לדוגמה, ב-GitHub Actions אפשר להוסיף שלב שמפעיל את axe על כל PR. זה חוסך עד יומיים של בדיקות ידניות לכל גרסה. בדיקות אוטומטיות תופסות 90% מהבעיות, בעוד שבדיקה ידנית תופסת את 10% הנותרים עם הקשר.

ביקורת אוטומטית מהירה פי 50 מביקורת ידנית, אך גישה משולבת מספקת דיוק של 100%. צרו קשר כדי לשלב בדיקה זו בצינור שלכם.

יישום טקסט חלופי שלב אחר שלב

1. ביקורת תמונות נוכחיות – הפעילו את axe-core או WAVE על כל העמודים. אספו רשימה של תמונות חסרות alt או עם alt שגוי.
2. סיווג תמונות – אינפורמטיביות, דקורטיביות, פונקציונליות. הגדירו דרישות לכל קבוצה.
3. כתיבת טקסטים חלופיים – לאינפורמטיביות: תארו תוכן; לדקורטיביות: alt ריק; לפונקציונליות: פעולה.
4. אכיפת ולידציה – הוסיפו שדה alt חובה ב-CMS שלכם (Laravel, WordPress) וולידציה בתבניות (React, Blade).
5. הוספת בדיקות CI/CD – שלבו את axe-core בצינור שלכם. כל PR יאמת תמונות חדשות.
6. הדרכת הצוות – ספקו למנהלי תוכן דף עזר לכתיבת alt.

לתמונות מורכבות (תרשימים, אינפוגרפיקות), הטקסט החלופי צריך להכיל תיאור קצר של מגמות או נתונים מרכזיים. ניתן למקם פרטים מלאים ב-<a href="/home"> <img src="logo.svg" alt="На главную страницу"> </a> <button> <img src="search-icon.svg" alt="Поиск"> </button> או בטקסט סמוך. דוגמה: alt.

יישום ב-CMS ובפריימוורקים

בפרויקטים של Laravel, אנו אוכפים לעיתים קרובות ולידציה של alt="" בהעלאת תמונות כדי לבטל טעויות אנוש.

class ImageUploadRequest extends FormRequest {
    public function rules(): array {
        return [
            'image' => 'required|image|max:5120',
            'alt_text' => 'required|string|max:255|min:5',
        ];
    }

    public function messages(): array {
        return [
            'alt_text.required' => 'Укажите описание изображения для доступности',
        ];
    }
}

בתבניות Blade או React, אנו מציגים אזהרות אם alt חסר. להלן דוגמה לרכיב React שבו aria-describedby הוא prop חובה.

interface ImageProps {
  src: string;
  alt: string; // обязательный
  decorative?: boolean;
}

function Image({ src, alt, decorative = false }: ImageProps) {
  if (decorative) {
    return <img src={src} alt="" role="presentation" />;
  }
  return <img src={src} alt={alt} />;
}

// <Image src="photo.jpg" /> — ошибка компиляции

מה כלול

• ביקורת כל התמונות באתר (דוח עם בעיות alt והמלצות).
• כתיבה או תיקון טקסטים חלופיים לפי WCAG 2.1.
• הגדרת שדה alt חובה ב-CMS שלכם (Laravel, WordPress, Drupal וכו').
• שילוב בדיקות טקסט חלופי בצינור CI/CD שלכם.
• תיעוד תקנים והדרכה למנהלי תוכן.
• אחריות ל-3 חודשים על כל העבודה.

לוחות זמנים משוערים

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