קריטריון 1.4.8: הצגה חזותית רמה AAA

בקצרה

קריטריון 1.4.8 הצגה חזותית (Visual Presentation, רמה AAA) מגדיר חמישה תנאים לעיצוב בלוקי טקסט: בחירת צבעים על-ידי המשתמש, רוחב שורה עד 80 תווים, הימנעות מיישור דו-צדדי, ריווח שורות של לפחות 1.5, ויכולת הגדלה של 200% ללא גלילה אופקית. קריטריון זה הוא רמה AAA ואינו נדרש לפי ת"י 5568, אך יישומו מיטיב עם קוראים עם דיסלקציה ולקויות קריאה.

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

מספר1.4.8
שםהצגה חזותית (Visual Presentation)
רמהAAA
גרסהWCAG 2.0
עיקרון1 - מורגש (Perceivable)
הנחיה1.4 - ניתן להבחנה
מחייב לפי ת"י 5568לא - רמה AAA, אינה נדרשת

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

הקריטריון חל על בלוקי טקסט (פסקאות וקטעי תוכן) ודורש שיתקיימו כל חמשת התנאים הבאים:

  • בחירת צבעים - המשתמש יכול לבחור את צבע הקדמה וצבע הרקע של הטקסט (בין אם על-ידי הדפדפן, הגדרות המערכת, או פקדים שהאתר מספק).
  • רוחב שורה - רוחב בלוק הטקסט אינו עולה על 80 תווים (לשפות CJK - 40 תווים).
  • יישור טקסט - הטקסט אינו מיושר משני הצדדים בו-זמנית (אין justify שיוצר רווחים לא אחידים).
  • ריווח שורות - גובה השורה (line-height) הוא לפחות 1.5 ביחס לגודל הגופן, ובין פסקאות הרווח הוא לפחות פי 1.5 מגובה השורה.
  • שינוי גודל טקסט - ניתן להגדיל את הטקסט עד פי 2 (200%) בחלון דפדפן ברוחב 256 פיקסלים ומעלה, מבלי שתידרש גלילה אופקית לקריאת שורה שלמה.

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

למי זה עוזר?

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

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

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

  • הגדירו ב-CSS את line-height לערך של לפחות 1.5 לגוף הטקסט, ורווח פסקה (margin-bottom) של לפחות פי 1.5 מגובה השורה.
  • הגבילו את רוחב עמודות הטקסט - שימוש ב-max-width: 65ch עד 80ch הוא גישה נפוצה ומתאימה.
  • הימנעו מ-text-align: justify בבלוקי תוכן ארוכים.
  • אל תשתמשו ב-!important בצבעי טקסט וצבעי רקע, כדי שהגדרות המשתמש בדפדפן יוכלו לדרוס אותם.
  • בדקו שהגדלת טקסט ל-200% בדפדפן (Ctrl+Plus) אינה גורמת לתוכן לחרוג מהמסך אופקית.

טיפ

שימוש ביחידות יחסיות כמו em ו-rem לגודל גופן, ריווח שורות ורוחב עמודה מקל על עמידה בתנאי ההגדלה ומאפשר גמישות רבה יותר.

איך בודקים?

  • בדיקה ידנית: בחנו את ה-CSS עבור line-height, max-width, text-align ו-margin בין פסקאות.
  • הגדלת טקסט: הגדילו את הטקסט בדפדפן ל-200% (Ctrl/Cmd + Plus) ובדקו שאין גלילה אופקית בקריאת שורות.
  • בדיקת צבעים: השתמשו בכלי "Override Colors" בדפדפן כדי לוודא שניתן לדרוס את צבעי הקדמה והרקע.
  • ספירת תווים: בדקו שרוחב עמודת הטקסט אינו עולה על 80 תווים בשורה ממוצעת.
  • כלים אוטומטיים יכולים לאתר חלק מהבעיות (כגון text-align: justify), אך בדיקת ה-UX הכוללת דורשת בדיקה ידנית.

שאלות נפוצות

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

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

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

רמה AAA - הרמה המתקדמת ביותר. הקריטריון אינו מחייב לפי ת"י 5568 אך יישומו משפר משמעותית את קריאות הטקסט עבור אנשים עם לקויות קריאה.

האם יישור טקסט משני הצדדים (justify) פסול לפי הקריטריון?

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

מקורות

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

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

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