קריטריון 1.4.12: ריווח טקסט רמה AA
בקצרה
קריטריון 1.4.12 ריווח טקסט (Text Spacing, רמה AA) דורש שכאשר משתמש משנה ארבעה מאפייני ריווח - גובה שורה, ריווח פסקאות, ריווח אותיות וריווח מילים - לא יאבד תוכן או פונקציונליות. קריטריון זה, שנוסף ב-WCAG 2.1, אינו נדרש לפי ת"י 5568 אך מומלץ ליישומו.
פרטי הקריטריון
| מספר | 1.4.12 |
|---|---|
| שם | ריווח טקסט (Text Spacing) |
| רמה | AA |
| גרסה | WCAG 2.1 |
| עיקרון | 1 - מורגש (Perceivable) |
| הנחיה | 1.4 - ניתן להבחנה |
| מחייב לפי ת"י 5568 | לא - מעבר לדרישת ת"י 5568 (מומלץ) |
מה דורש קריטריון 1.4.12?
הקריטריון מגדיר ארבעה שינויי ריווח שאם יוחלו, לא יגרמו לאובדן תוכן או פונקציונליות:
- גובה שורה (line-height) - עד פי 1.5 מגודל הגופן.
- ריווח בין פסקאות - עד פי 2 מגודל הגופן.
- ריווח בין אותיות (letter-spacing) - עד 0.12em.
- ריווח בין מילים (word-spacing) - עד 0.16em.
הדרישה היא שהאתר לא ישבר כאשר ערכים אלה מוחלים - כלומר, טקסט לא ייחתך בגלל גובה קבוע, לא יחפוף על תוכן אחר, ולא יסתיר רכיבי ממשק. האתר אינו חייב לספק בעצמו פקדים לשינוי ריווח זה.
למי זה עוזר?
- אנשים עם דיסלקציה - ריווח מוגדל בין שורות ומילים משפר משמעותית את יכולת הקריאה.
- אנשים עם לקויות קוגניטיביות - ריווח נאות מפחית את עומס הקריאה ומונע ערבוב בין שורות.
- משתמשי כלים מסייעים - כלים כמו תוספי דפדפן לשיפור ריווח טקסט (כגון Readability Tools) תלויים ביכולת זו.
- אנשים עם לקויות ראייה - המגדילים טקסט ומשנים ריווח לקריאה נוחה יותר.
איך עומדים בקריטריון?
- הימנעו מהגדרת
heightקבוע לאלמנטים המכילים טקסט - העדיפוmin-heightכדי לאפשר מתיחה. - השתמשו ביחידות יחסיות (
em,rem) לגובה שורות, ריווח ופינות, כדי שהפריסה תיענה לשינויים. - בדקו שתיבות עם
overflow: hiddenאינן מסתירות טקסט שמתרחב בשל ריווח מוגדל. - ודאו שרכיבי ממשק (כפתורות, שדות) אינם עם גבולות קבועים שחוסמים טקסט מוגדל.
טיפ
ה-bookmarklet בשם "Text Spacing" של Steve Faulkner מאפשר להחיל בלחיצה אחת את ערכי הריווח של הקריטריון על כל עמוד - כלי נוח לבדיקה מהירה.
איך בודקים?
- bookmarklet: השתמשו ב-Text Spacing bookmarklet להחלת הערכים בלחיצה ובדקו את התוצאה.
- CSS ידני: הזריקו לעמוד את ה-CSS הבא ובדקו שלא נשברת הפריסה:
* { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-bottom: 2em !important; } - בדיקה ויזואלית: חפשו טקסט שנחתך, כפתורות שתוכנם מוסתר, תיבות עם
overflow: hiddenשאינן מתרחבות. - כלים אוטומטיים: axe DevTools יכולים לסייע בזיהוי גבהים קבועים, אך בדיקת הפריסה הסופית דורשת בדיקה ידנית.
שאלות נפוצות
מה דורש קריטריון 1.4.12?
הקריטריון דורש שכאשר המשתמש משנה ארבעה מאפייני ריווח - גובה שורה ל-1.5, ריווח פסקאות לפי 2 מגובה הגופן, ריווח אותיות ל-0.12em, ריווח מילים ל-0.16em - לא יאבד תוכן או פונקציונליות. האתר אינו חייב לספק פקדים לשינוי אלה, רק לא לשבור בעת שינוי.
מהי רמת הקריטריון 1.4.12?
רמה AA, נוסף ב-WCAG 2.1. הקריטריון אינו מחייב לפי ת"י 5568 (שמבוסס על WCAG 2.0), אך יישומו חשוב לאנשים עם דיסלקציה ולקויות קריאה אחרות.
האם האתר חייב לספק כפתורים לשינוי ריווח הטקסט?
לא. הקריטריון אינו דורש שהאתר עצמו יספק פקדי ריווח. הדרישה היא שכאשר המשתמש (או כלי עזר) משנה את הריווח בדפדפן, התוכן לא ייחתך, לא יחפוף ולא יאבד.
מקורות
- W3C - Understanding SC 1.4.12 Text Spacing (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות