קריטריון 1.4.5: תמונות של טקסט רמה AA

פרטי הקריטריון

מה דורש קריטריון 1.4.5?

הקריטריון עוסק בשימוש בתמונות המציגות טקסט - כלומר קבצי תמונה (JPG, PNG, GIF וכדומה) שתוכנם הוא מילים, כותרות, ציטוטים או כל טקסט אחר - במקום שימוש בטקסט HTML אמיתי. הדרישה: אם ניתן להשיג את אותו מראה חזותי עם טקסט אמיתי מעוצב ב-CSS, יש להעדיף את הטקסט האמיתי. שני חריגים מוכרים:

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

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

למי זה עוזר?

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

איך עומדים בקריטריון?

• העדיפו תמיד טקסט HTML אמיתי עם עיצוב CSS על פני תמונות שמציגות טקסט.
• לכותרות עם גופן מיוחד - טענו את הגופן ב-CSS (@font-face או Google Fonts) ועצבו אותו בטקסט אמיתי.
• לתמונות קיימות של טקסט - ודאו שיש alt מלא ומדויק שמשכפל את הטקסט שבתמונה.
• בנרות, באנרים ותמונות hero - בחנו האם ניתן להחליף את הטקסט שבתמונה בשכבת HTML מעל התמונה.

איך בודקים?

• בדיקה ידנית: עברו על הדף ובדקו אם יש אלמנטים שנראים כטקסט אך בפועל הם תמונות (לחצו עליהם לחיצה ימנית ובדקו אם האפשרות "העתק טקסט" זמינה).
• בדיקת קוד: חפשו תגי <img> שה-alt שלהם מכיל טקסט ממשי - אלו עשויות להיות תמונות טקסט.
• כבו CSS ובדקו אם תוכן הדף עדיין מוצג כטקסט ולא נעלם לגמרי.
• נסו לסמן את הטקסט בדף - טקסט אמיתי ניתן לסימון ולהעתקה, תמונה לא.