אנימציה ותנועה

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

עד גיל 40, יותר מ-35% מהמבוגרים חווים תפקוד לקוי של האוזן הפנימית. כתוצאה מכך, יכול להיות שתסבלו מהתקף סחרחורת זמני, מתנודות חזקות בראש שנגרמות ממיגרנה או מנכות שפוגעת באיזון היציבה באופן קבוע יותר.

בנוסף לכך, אנשים רבים מתקשים להתמקד בתוכן נע, מהבהב או שצריך לגלול בו. אנשים עם ADHD והפרעות אחרות של קשב וריכוז עלולים להיות מוסחים כל כך מהרכיבים האנימציה שלכם עד שהם שוכחים למה הם נכנסו לאתר או לאפליקציה מלכתחילה.

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

תוכן מהבהב או נע

כשאתם יוצרים אנימציה ותנועה, כדאי לשאול את עצמכם אם התנועה של הרכיב היא מוגזמת. לדוגמה, צבעים מהבהבים מחשוך לאור או תנועות מהירות במסך עלולים לגרום להתקפי אפילפסיה אצל אנשים עם אפילפסיה שמקורה ברגישות לאור. ההערכה היא ש3% מהאנשים עם אפילפסיה סובלים מרגישות יתר לאור, והיא נפוצה יותר בקרב נשים ובקרב אנשים צעירים.

בהנחיות של WCAG בנושא הבהוב מומלץ לא להשתמש בדברים הבאים:

במקרה הטוב, הבהוב יכול לגרום לכך שלא תוכלו להשתמש בדף אינטרנט, ובמקרה הרע הוא עלול לגרום למחלה.

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

שאלה נוספת שצריך לשאול את עצמכם לגבי אנימציה ותנועה היא אם התנועה של הרכיב חיונית להבנת התוכן או הפעולות במסך. אם אין צורך בתנועה, כדאי להסיר את כל התנועה – גם תנועות מיקרו – מהרכיב שאתם יוצרים או מעצבים.

נניח שאתם סבורים שהתנועה של הרכיב לא חיונית, אבל היא יכולה לשפר את החוויה הכוללת של המשתמש, או שאתם לא יכולים להסיר את התנועה מסיבה אחרת. במקרה כזה, עליכם לפעול לפי ההנחיות של WCAG בנושא תנועה. בהנחיות מצוין שצריך ליצור אפשרות למשתמשים להשהות, לעצור או להסתיר תנועה של: רכיבים נעים, מהבהבים או רכיבים שגלול בהם, שאינם חיוניים, מתחילים באופן אוטומטי, נמשכים יותר מחמש שניות וחלק מרכיבים אחרים בדף.

השהיה, עצירה או הסתרה של תנועה

מוסיפים לדף מנגנון להשהיה, לעצירה או להסתרה כדי לאפשר למשתמשים להשבית אנימציות תנועה שעלולות לגרום לבעיות. אפשר לעשות זאת ברמת המסך או ברמת הרכיב.

לדוגמה, נניח שהמוצר הדיגיטלי שלכם כולל הרבה אנימציות. מומלץ להוסיף מתג JavaScript נגיש כדי לאפשר למשתמשים לשלוט בחוויה שלהם. כשהלחצן מוגדר למצב 'תנועה מושבתת', כל האנימציות קופאות במסך הזה ובכל שאר המסכים.

שימוש בשאילתות מדיה

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

@prefers-reduced-motion

בדומה לשאילתות המדיה שמתמקדות בצבע במודול הצבע, שאילתת המדיה @prefers-reduced-motion בודקת את ההגדרות של מערכת ההפעלה של המשתמש שקשורות לאנימציה.

ממשק המשתמש של הגדרות המסך ב-MacOS, שבו ההגדרה 'תנועה מופחתת' מופעלת.

משתמשים יכולים להגדיר העדפות תצוגה כדי לצמצם את התנועה. ההגדרות האלה משתנות במערכות הפעלה שונות, ויכול להיות שהן יוצגו בצורה חיובית או שלילית. בעזרת ‎@prefers-reduced-motion תוכלו לעצב אתר ששומר על ההעדפות האלה.

Browser Support

  • Chrome: 74.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 10.1.

Source

ב-macOS וב-Android, המשתמש מפעיל את ההגדרה כדי לצמצם את התנועה. ב-macOS, משתמשים יכולים להגדיר את האפשרות צמצום תנועה בקטע 'הגדרות' > 'נגישות' > 'תצוגה'. ההגדרה של Android היא הסרת אנימציות. ב-Windows, ההגדרה מנוסחת באופן חיובי כהצגת אנימציות, והיא מופעלת כברירת מחדל. כדי לצמצם את התנועה, המשתמש צריך להשבית את ההגדרה הזו.

כדי להבטיח נגישות לאנשים שיש להם קשיים עם תנועה, צריך להשתמש באנימציות באורך של פחות מ-5 שניות בזהירות, גם אם הן קצרות מהסף שמתואר בהנחיות WCAG 2.0 AA. השיטה המהימנת ביותר היא לתת למשתמשים שציינו שהם מעדיפים תנועה מוגבלת שליטה בלעדית על האנימציות, כדי לאפשר להם להפעיל ולהפסיק את האנימציה באמצעות פקדים ייעודיים, כמו לחצן הפעלה ולחצן השהיה.

שיפור הדרגתי לתנועה

כמעצבים ומפתחים, יש לנו הרבה אפשרויות לבחור, כולל מצבי תנועה שמוגדרים כברירת מחדל ומידת התנועה שרוצים להציג. כדאי לעיין שוב בדוגמה האחרונה לגבי תנועה.

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

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

שאילתות מדיה בשכבות

אתם יכולים להשתמש בכמה שאילתות מדיה כדי לתת למשתמשים עוד יותר אפשרויות. נשתמש ב-@prefers-color-scheme, ב-@prefers-contrast וב-@prefers-reduced-motion ביחד.

מאפשרים למשתמשים לבחור

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

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

בדיקת ההבנה

מבחן בנושא נגישות של תנועה ואנימציה.

מה נוכל ליצור שיצג את הגדרות התנועה של מערכת ההפעלה?

@prefers-reduced-motion
כן! שאילתה המדיה הזו מאפשרת לכם להחליט כמה תנועה להשתמש בה על סמך הגדרות התצוגה של המשתמש. ההגדרות האלה משתנות בין מערכות הפעלה, לכן מומלץ להטמיע אפשרות בחירה לתנועה בנוסף לשאילתת המדיה הזו.
מתגים של JavaScript
לא בדיוק. מתגים מאפשרים למשתמש לבצע בחירה אחרי שהוא מגיע לאתר, אבל לא ניתן לקרוא את ההגדרות של המשתמש.