WCAG2.co.ilפורטל התקן הישראלי לנגישות
כלים חינמיים בדיקה עצמית

קריטריון 2.3.3: אנימציה מאינטראקציות רמה AAA

עודכן לאחרונה: יוני 2026זמן קריאה: כ-4 דקותנכתב ונבדק ע"י מערכת WCAG2.co.il

בקצרה

קריטריון 2.3.3 אנימציה מאינטראקציות (Animation from Interactions, רמה AAA) דורש שאנימציות תנועה המופעלות על ידי אינטראקציה (כמו גלילה מונפשת, אפקט פרלקס, מעברי עמוד) ניתנות לביטול - אלא אם הן חיוניות לתפקוד. קריטריון זה אינו נדרש לפי ת"י 5568 (נוסף ב-WCAG 2.1, רמה AAA), אך יישומו מומלץ.

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

מספר2.3.3
שםאנימציה מאינטראקציות (Animation from Interactions)
רמהAAA
גרסהWCAG 2.1
עיקרון2 - ניתן לתפעול (Operable)
הנחיה2.3 - התקפים ותגובות פיזיות
מחייב לפי ת"י 5568לא - רמה AAA, אינה נדרשת

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

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

  • גלילה מונפשת - smooth scrolling שמנפש את הגלילה לאט.
  • אפקט פרלקס - תנועת רקע בקצב שונה מתנועת התוכן.
  • מעברי עמוד - אנימציות zoom, slide, fade בעת מעבר בין עמודים.
  • אנימציות תגובה - רכיבים שזזים בתגובה לגלילה, לאינטראקציה עם עכבר, או לטעינת תוכן.

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

למי זה עוזר?

  • אנשים עם הפרעות וסטיבולריות (vestibular disorders) - תנועה בממשק עלולה לגרום לסחרחורת, בחילה ואובדן שיווי משקל.
  • אנשים עם מחלת תנועה (motion sickness) - גם בסביבה ממוחשבת.
  • אנשים עם הפרעות קשב ריכוז - תנועה בממשק מסיחה את הדעת ומפריעה לריכוז.
  • משתמשים עם מיגרנות - אנימציות מהירות יכולות לעורר תסמינים.

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

  • השתמשו ב-CSS media query prefers-reduced-motion: reduce כדי לבטל אנימציות עבור משתמשים שהגדירו זאת במערכת ההפעלה שלהם.
  • הוסיפו כפתור "כבה אנימציות" בממשק שמגדיר preference מקומי ל-session.
  • הימנעו מאפקט פרלקס ומגלילה מונפשת כברירת מחדל - או ספקו אפשרות לכבות אותם.
  • מעברי עמוד - העדיפו fade מהיר על פני אנימציות zoom או slide גדולות.
  • בגרסאות mobile - בדקו שהגדרת "Reduce Motion" של iOS ו-Android מכובדת.

טיפ

כלל CSS בסיסי שכדאי לכלול בכל פרויקט: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } - מבטל כמעט כל אנימציה עבור משתמשים שביקשו זאת.

איך בודקים?

  • הגדירו "Reduce Motion" (הפחתת תנועה) בהגדרות מערכת ההפעלה (macOS, iOS, Windows, Android) ובדקו שהאנימציות מבוטלות או מצומצמות.
  • בדיקת DevTools: ב-Chrome DevTools ניתן לדמות prefers-reduced-motion ב-Rendering panel.
  • עברו על הדף ואתרו את כל האנימציות המופעלות על ידי גלילה, קליקים, ומעברים.
  • בדקו שקיים מנגנון ביטול לכל אנימציה שאינה חיונית לתפקוד.
  • כלים אוטומטיים אינם בודקים תאמה לקריטריון זה - נדרשת בדיקה ידנית.

שאלות נפוצות

איזה סוג אנימציה מכסה קריטריון 2.3.3?

קריטריון 2.3.3 מכסה אנימציות תנועה המופעלות על ידי אינטראקציה של המשתמש - כמו גלילה מונפשת, מעברי עמוד עם זום, פרלקס, ואנימציות parallax. הוא אינו מכסה הבזקים (עליהם חלים קריטריונים 2.3.1 ו-2.3.2).

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

רמה AAA - הרמה הגבוהה ביותר. הקריטריון נוסף ב-WCAG 2.1 ואינו נדרש לפי ת"י 5568, אך יישומו מומלץ לנגישות מקסימלית.

איך מיישמים את prefers-reduced-motion?

מוסיפים ב-CSS כלל @media (prefers-reduced-motion: reduce) ובתוכו מבטלים או מצמצמים אנימציות. לדוגמה: הגדרת animation: none ו-transition: none עבור רכיבים שיש בהם תנועה.

מקורות

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

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

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