קריטריון 1.4.10: זרימה מחדש רמה AA
בקצרה
קריטריון 1.4.10 זרימה מחדש (Reflow, רמה AA) דורש שתוכן יהיה ניתן לקריאה ולפעולה ב-viewport רוחב 320 פיקסלים ללא גלילה אופקית. זאת כדי לאפשר הגדלת טקסט ל-400% בדפדפן שולחני ללא אובדן תוכן. קריטריון זה, שנוסף ב-WCAG 2.1, אינו נדרש לפי ת"י 5568 אך מומלץ ליישום.
פרטי הקריטריון
| מספר | 1.4.10 |
|---|---|
| שם | זרימה מחדש (Reflow) |
| רמה | AA |
| גרסה | WCAG 2.1 |
| עיקרון | 1 - מורגש (Perceivable) |
| הנחיה | 1.4 - ניתן להבחנה |
| מחייב לפי ת"י 5568 | לא - מעבר לדרישת ת"י 5568 (מומלץ) |
מה דורש קריטריון 1.4.10?
הקריטריון דורש שתוכן יוכל להיות מוצג ולפעול ללא גלילה בשני הכיוונים בגדלי viewport הבאים:
- תוכן אנכי (גלילה מטה) - 320 פיקסלים רוחב (מה שמקביל להגדלת 400% בדפדפן שולחני ברוחב 1280px).
- תוכן אופקי (גלילה לצד) - 256 פיקסלים גובה.
הדרישה נועדה לאפשר למשתמשים עם לקויות ראייה להגדיל את הטקסט מאוד - עד 400% - ועדיין לקרוא את כל התוכן מבלי לגלול גם לרוחב וגם לאורך.
חריגים - תוכן שמטבעו דורש פריסה דו-ממדית פטור מהדרישה:
- טבלאות נתונים גדולות
- מפות גיאוגרפיות
- דיאגרמות ותרשימים מורכבים
- ממשקי עריכה עם סרגלי כלים (כמו עורכי תמונה)
- מצגות וסרטי וידאו
למי זה עוזר?
הקריטריון מיועד בעיקר ל:
- אנשים עם לקויות ראייה - המגדילים טקסט לרמות גבוהות (200%-400%) ואינם יכולים לגלול בשני כיוונים בו-זמנית.
- משתמשי מסכים קטנים - בעלי מוגבלות המשתמשים בטלפונים חכמים כציוד גישה עיקרי.
- משתמשים עם עייפות קוגניטיבית - גלילה אופקית מוסיפה מאמץ מיותר ומקשה על מעקב אחר תוכן.
איך עומדים בקריטריון?
- עצבו את האתר בגישה Responsive Design עם Flexbox או CSS Grid שמאפשרים זרימה מחדש בגדלים שונים.
- הגדירו את ה-viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">. - השתמשו ביחידות יחסיות (
%,vw,em) במקום פיקסלים קבועים לרוחבים. - בדקו שתפריטי ניווט, כרטיסיות ותמונות גדולות אינם יוצרים גלילה אופקית בגדלים קטנים.
- לרכיבים שאינם יכולים לזרום מחדש (טבלאות גדולות) - עטפו אותם ב-
overflow-x: autoכדי להגביל את הגלילה לאזור הרכיב בלבד.
טיפ
ניתן לדמות רוחב viewport של 320px בכלי המפתחים של הדפדפן (DevTools) - פשוט הגדירו את גודל הדפדפן ל-320x568 pixels ובדקו שאין גלילה אופקית בתוכן הרגיל.
איך בודקים?
- הגדלת דפדפן: הגדילו את הטקסט ל-400% (Ctrl/Cmd + Plus ארבע פעמים) ובדקו שאין גלילה אופקית.
- כלי מפתחים: שנו את גודל ה-viewport ל-320px רוחב ובחנו כל עמוד.
- בדיקה במובייל: בדקו את האתר בטלפונים חכמים עם מסכים קטנים.
- כלים אוטומטיים: axe ו-Lighthouse יכולים לזהות חלק מבעיות הזרימה, אך בדיקה ידנית נחוצה לאישור מלא.
שאלות נפוצות
מה דורש קריטריון 1.4.10?
הקריטריון דורש שתוכן יוכל להיקרא ולפעול בגודל viewport של 320 פיקסלים רוחב (עבור תוכן אנכי) ו-256 פיקסלים גובה (עבור תוכן אופקי) ללא צורך בגלילה בשני הכיוונים. המטרה היא לאפשר הגדלת טקסט ל-400% ללא אובדן תוכן.
מהי רמת הקריטריון 1.4.10?
רמה AA, נוסף ב-WCAG 2.1. הקריטריון אינו מחייב לפי ת"י 5568 (שמבוסס על WCAG 2.0), אך הוא מומלץ ליישום ומיטיב עם משתמשים עם לקויות ראייה המגדילים טקסט.
אילו סוגי תוכן פטורים מקריטריון 1.4.10?
תוכן שדורש מטבעו פריסה דו-ממדית - כמו טבלאות נתונים גדולות, מפות, דיאגרמות מורכבות, ממשקי עריכה מתקדמים וסרטי וידאו - פטור מהדרישה כי שינוי הפריסה שלהם יאבד מידע חיוני.
מקורות
- W3C - Understanding SC 1.4.10 Reflow (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות