טקסט מוטמע בתמונה: למה זה לא נגיש ומה עושים במקום

טקסט מוטמע בתמונה הוא טקסט שהוא חלק מהקובץ הגרפי: באנר עם "50% הנחה", כותרת קטגוריה שעוצבה בפוטושופ, או צילום מסך של טבלה. בעין הוא נראה כמו טקסט. אבל לדפדפן ולקורא מסך זו תמונה, ולכן אי אפשר לקרוא אותו, להגדיל אותו בצורה חלקה, לתרגם אותו או לחפש בו.

למה טקסט מוטמע בתמונה לא נגיש

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

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

הטעויות הנפוצות, ומה לעשות במקום

• באנר מבצע שכל המידע שלו בתמונה: שימו את הכותרת והתנאים כטקסט אמיתי מעל התמונה, עם CSS. את התמונה השאירו כרקע.
• כותרות קטגוריה כתמונות: כותרת אמיתית, H2 למשל, בגופן שאתם אוהבים. קורא מסך מזהה אותה ככותרת, ואפשר לנווט אליה. אותו עיקרון חל גם על כותרת העמוד שבלשונית הדפדפן.
• צילום מסך של טבלה או מחירון: טבלת HTML.
• פוסטר אירוע: אם חייבים תמונה, הוסיפו לידה את כל הפרטים בטקסט: תאריך, שעה, מקום.

ואם אין ברירה?

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

שאלות נפוצות על טקסט מוטמע בתמונה