קריטריון 1.4.9: תמונות של טקסט (ללא חריגה) רמה AAA

בקצרה

קריטריון 1.4.9 תמונות של טקסט (ללא חריגה) (Images of Text - No Exception, רמה AAA) הוא הגרסה המחמירה של קריטריון 1.4.5. הוא מתיר שימוש בתמונות המכילות טקסט רק כאשר הטקסט אסנציאלי לתוכן (כגון לוגו), ומסיר את החריג לטקסט הניתן להתאמה אישית. קריטריון זה הוא רמה AAA ואינו נדרש לפי ת"י 5568.

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

מספר1.4.9
שםתמונות של טקסט (ללא חריגה) (Images of Text - No Exception)
רמהAAA
גרסהWCAG 2.0
עיקרון1 - מורגש (Perceivable)
הנחיה1.4 - ניתן להבחנה
מחייב לפי ת"י 5568לא - רמה AAA, אינה נדרשת

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

הקריטריון מגביל שימוש בתמונות המכילות טקסט למקרים מצומצמים בלבד. בניגוד לקריטריון 1.4.5 (רמה AA) שמתיר גם טקסט הניתן להתאמה אישית, כאן מותר להשתמש בתמונות טקסט רק בשני מקרים:

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

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

למי זה עוזר?

הקריטריון מיועד בעיקר ל:

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

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

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

טיפ

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

איך בודקים?

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

שאלות נפוצות

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

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

מהי רמת הקריטריון 1.4.9?

רמה AAA - הרמה המתקדמת ביותר. הקריטריון אינו מחייב לפי ת"י 5568, אך הוא מהווה גרסה מחמירה יותר של קריטריון 1.4.5 (רמה AA) שכן מסיר את חריג ההתאמה האישית.

מה ההבדל בין קריטריון 1.4.5 לקריטריון 1.4.9?

קריטריון 1.4.5 (רמה AA) מתיר תמונות טקסט כאשר ניתן להתאים אותן חזותית. קריטריון 1.4.9 (רמה AAA) מחמיר יותר ומאפשר תמונות טקסט רק כאשר הטקסט אסנציאלי - כלומר, הסרתו תשנה מהותית את המידע המועבר.

מקורות

צריכים לעמוד בקריטריון הזה באתר שלכם?

ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.

לצ'ק-ליסט הנגישות