אנימציה: אימות תנועה מופחתת, השהיה והבנה

מה מדריך זה עוזר להשיג

• טריגרים של מלאי
• הגדרת התנהגות מופחתת
• קריטריונים נפרדים של WCAG
• בדיקת כל היישומים

בדיקה מהירה

• האם תנועה מופחתת אוסרת על כל אנימציה?
• האם קריטריון 2.3.3 ברמה AA?
• האם כלל CSS גלובלי מספיק?

שיטה שלב אחר שלב

1. 1

   טריגרים של מלאי

   רשימת תנועה אוטומטית, מופעלת על ידי אינטראקציה וקשורת גלילה. הפרד מידע מצב מקישוט. בדוק גם אנימציות JavaScript, וידאו ואלמנטים מוטמעים.

   תוצר: אפקטים ורגיסטר מטרה.

2. 2

   הגדרת התנהגות מופחתת

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

   תוצר: התנהגות מופחתת לכל רכיב.

3. 3

   קריטריונים נפרדים של WCAG

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

   תוצר: קריטריונים ובקרות עבור כל אפקט.

4. 4

   בדיקת כל היישומים

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

   תוצר: טעינה קרה, שינוי בזמן אמת וניסויי מצב סופי.

5. 5

   שימור מידע ובקרות.

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

   תוצר: ראיות ומגבלות.

גליון עבודה לשימוש חוזר

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

הבחנה בין המנגנונים

מדדי ניהול

טעויות נפוצות

• בדיקת סקריפטים גם כן
• הפעלה באמצעות מקלדת
• אל תסיר משוב על התקדמות או שגיאה