الرسوم المتحركة والحركة

هل سبق لك أن ركبت سيارة أو قارب أو طائرة وشعرت فجأة بالعالم يدور أو كنت تعاني من الصداع النصفي بشكل كبير لدرجة أن الصور المتحركة على هاتفك أو جهازك اللوحي، تم إنشاؤها لـ "المتعة" هل تجعلك تشعر بالمرض فجأة؟ أو ربما كنت دائمًا حساسًا لجميع أنواع الحركة؟ هذه أمثلة لأنواع مختلفة من الاضطرابات الدهليزية.

بحلول سن 40، سيكون أكثر من 35٪ من البالغين قد يعانون من بعض قصور وظيفي في الدهليزي. قد يؤدي هذا إلى التعويذة بالدوار المؤقتة أو الدوار الناتج عن الصداع النصفي أو إعاقة دائمة في الدهنية.

بالإضافة إلى نوبات الدوار، يجد الكثير من الأشخاص الحركة أو الوميض أو التمرير المحتوى مشتتًا للانتباه. الأشخاص الذين لديهم اضطراب نقص الانتباه مع فرط النشاط وغيرها من اضطرابات نقص الانتباه قد تشتت انتباهك بسبب على أنها ينسى سبب زيارة موقعك على الويب أو تطبيقك في المقام الأول.

في هذه الوحدة، سنلقي نظرة على بعض الطرق التي يمكن الاستعانة بها لتقديم دعم أفضل للأشخاص مع جميع أنواع الاضطرابات الناتجة عن الحركة.

محتوى متحرّك

عند إنشاء رسوم متحركة وحركة، يجب أن تسأل نفسك ما إذا كانت حركة العنصر زائدة عن الحد. على سبيل المثال، يمكن أن تؤدي الحركات التي تومض من الداكن إلى الفاتح أو الحركات السريعة على الشاشة إلى حدوث نوبات مرضية لدى الأشخاص الذين يعانون من صرع الحساسية للضوء. تشير التقديرات إلى أنّ 3% من الأشخاص الذين يعانون من الصرع يعانون من الحساسية للضوء، وهو أكثر شيوعًا بين النساء والشباب.

تقترح إرشادات "دليل إتاحة محتوى الويب" من "إرشادات إتاحة محتوى الويب" ما يلي:

• وميض لأكثر من ثلاث مرات في أي ثانية واحدة
• وميض أسفل الوميض العام وحدّ الوميض الأحمر.

وقد تتسبب هذه الوميض، في أحسن الأحوال، في عدم القدرة على استخدام صفحة ويب، أو في أسوأ الأحوال، أن تؤدي إلى المرض.

بالنسبة إلى أي حركة شديدة، من الضروري أن تختبرها باستخدام أداة تحليل الصرع الحسّاس للضوء (PEAT): أداة PEAT هي أداة مجانية لتحديد ما إذا كان محتوى الشاشة أو الفيديو أو الرسوم المتحركة إلى حدوث نوبات مرضية. لا يلزم تقييم كل المحتوى باستخدام أداة PEAT. ولكن المحتوى الذي يتضمّن تحوّلات وامضة أو سريعة بين الإضاءة والظلام تقييم ألوان الخلفية، فقط للحفاظ على أمانها.

سؤال آخر يجب أن تطرحه على نفسك حول الرسوم المتحركة والحركة هو ما إذا كانت حركة العنصر ضرورية لفهم المحتوى أو الإجراءات على الشاشة. إذا لم يكن ذلك ضروريًا، ففكر في إزالة كل الحركات - حتى الحركات الدقيقة - من العنصر الذي تقوم ببنائه أو تصميمه.

لنفترض أنك تعتقد أن حركة العنصر ليست ضرورية ولكنها يمكن أن تعزز مع تجربة المستخدم الإجمالية، أو لا يمكنك إزالة الحركة لجزء آخر السبب. في هذه الحالة، يجب عليك اتباع إرشادات WCAG إرشادات حول الحركة تنص الإرشادات على وجوب توفير خيار يتيح للمستخدمين الإيقاف المؤقت أو الإيقاف أو إخفاء الحركة لـ: العناصر المتحركة أو الوامضة أو التمرير غير الضرورية التي تبدأ تلقائيًا، وتستمر لأكثر من خمس ثوانٍ، وهي جزء من صفحة أخرى عناصر.

إيقاف الحركة أو إيقافها مؤقتًا أو إخفاؤها

إضافة إيقاف مؤقت أو إيقاف أو إخفاء آلية إلى صفحتك للسماح للمستخدمين بإيقاف تشغيل الحركة المتحركة. ويمكنك القيام بذلك على مستوى الشاشة أو على مستوى العنصر.

على سبيل المثال، لنفترض أن منتجك الرقمي يتضمن الكثير من الرسوم المتحركة. يمكنك إضافة زر إيقاف/تفعيل JavaScript يمكن الوصول إليه. لتتيح للمستخدمين التحكم في تجربتهم. عندما يتم تبديل الزر إلى و"إيقاف الحركة" يتم تجميد جميع الرسوم المتحركة على تلك الشاشة وجميع الأخرى.

استخدام الاستعلامات عن الوسائط

بالإضافة إلى كونك انتقائيًا بشأن الرسوم المتحركة، فإن منح المستخدمين خيارات لإيقاف الحركة مؤقتًا وإيقافها وإخفائها وتجنب حلقات الرسوم المتحركة اللانهائية، يمكنك يمكنك أيضًا إضافة استعلام وسائط يركز على الحركة. يمنح هذا المستخدمين لديك المزيد من الخيارات عندما يتعلق الأمر بما يتم عرضه على الشاشة.

@prefers-reduced-motion

كما هو الحال مع استعلامات الوسائط التي تركز على الألوان في وحدة اللون، يتحقق طلب الوسائط في @prefers-reduced-motion من إعدادات نظام التشغيل للمستخدم المتعلقة بالحركة.

يمكن للمستخدم ضبط الإعدادات المفضّلة للعرض لتقليل الحركة. هذه الإعدادات مختلفة عبر أنظمة التشغيل، وقد يتم وضعها بشكل إيجابي أو سلبي. باستخدام @prefers-reduced-motion، يمكنك تصميم موقع إلكتروني الذي يحترم هذه التفضيلات.

على نظامَي التشغيل MacOS وAndroid، يفعّل المستخدم الإعداد لتقليل الحركة. في نظام التشغيل MacOS، يمكن للمستخدم تعيين تقليل الحركة في الإعدادات > إمكانية الوصول > الشاشة الإعداد في Android هو إزالة الصور المتحركة. على نظام التشغيل Windows، يتم ضبط إطار الإعداد بشكل إيجابي مثل عرض الصور المتحركة، والتي تكون مفعَّلة بشكلٍ تلقائي. يجب على المستخدم تشغيل يتم إيقاف هذا الإعداد لتقليل الحركة.

بدلاً من ذلك، كما هو موضّح في المجموعة التالية من الأمثلة، يمكنك ترميز جميع الصور المتحركة لإيقاف الحركة في غضون خمس ثوانٍ أو أقل بدلاً من اللعب في حلقة لانهائية.

التحسين التدريجي للحركة

نحن مصمّمون ومطورون، لدينا العديد من الخيارات المتاحة، بما في ذلك حالات الحركة التلقائية وحجم الحركة التي يجب عرضها. لنلقِ نظرة أخرى على المثال الأخير حول الحركة.

لنفترض أننا قررنا أن الصورة المتحركة غير ضرورية لفهم المحتوى على الشاشة. في هذه الحالة، يمكننا اختيار تعيين الحالة الافتراضية على الرسوم المتحركة ذات الحركة المخفضة بدلاً من نسخة الحركة الكاملة. يتم إيقاف الرسوم المتحركة، ما لم يطلب المستخدمون رسومًا متحركة على وجه التحديد.

لا يمكننا التنبؤ بمستوى الحركة الذي سيؤدي إلى حدوث مشكلات للأشخاص الذين يعانون من النوبات والاضطرابات الدهليزية وغيرها من الاضطرابات البصرية. حتى القليل من الحركة على الشاشة الدوخة أو عدم وضوح الرؤية أو ما هو أسوأ. في المجمل المثال التالي، سنعتمد بشكل افتراضي على عدم وجود رسوم متحركة.

الاستعلامات عن الوسائط المتعددة الطبقات

يمكنك استخدام استعلامات متعددة عن الوسائط لمنح المستخدمين المزيد من الخيارات. هيا نرى استخدام @prefers-color-scheme و@prefers-contrast و@prefers-reduced-motion معًا.

السماح للمستخدمين بالاختيار

قد يكون من الممتع إنشاء صور متحركة في منتجاتنا الرقمية لإضفاء البهجة. المستخدمين، فمن الضروري أن نتذكر أن بعض الأشخاص سيتأثرون بهذه التصميمات. يمكن أن تؤثِّر الحساسية للحركة في أي شخص، بدءًا من الشعور بالانزعاج الطفيف وحتى التسبُّب في مرض أو نوبة مرضية ضعيفة.

يمكنك استخدام عدد من الأدوات المختلفة للسماح للمستخدم بتحديد أفضلها بالنسبة لهم، بدلاً من تخمين مقدار الحركة الكبيرة. على سبيل المثال، أضف لتفعيل الصور المتحركة أو إيقافها داخل موقعك الإلكتروني أو تطبيق الويب. ضع في اعتبارك وضبط مفتاح التبديل هذا على إيقاف.

التحقق من فهمك

اختبر معلوماتك حول إمكانية الوصول إلى الحركة والرسوم المتحركة.