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

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

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

بالإضافة إلى إثارة الدوار، يجد الكثير من الأشخاص أنّ المحتوى المتحرّك أو الوامض أو القابل للتمرير يشتّت الانتباه. ADHD

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

المحتوى الوامض والمتحرّك

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

توصي إرشادات WCAG بشأن الوميض بتجنُّب ما يلي:

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

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

بالنسبة إلى أي حركة مفرطة، من الضروري إجراء اختبار لها باستخدام الـ Photosensitive Epilepsy Analysis Tool (PEAT). أداة PEAT هي أداة مجانية لتحديد ما إذا كان من المحتمل أن يؤدي محتوى الشاشة أو الفيديو أو الرسوم المتحركة إلى حدوث نوبات صرع. ليس من الضروري أن يتم تقييم كل المحتوى باستخدام أداة PEAT، ولكن يجب تقييم المحتوى الذي يتضمّن وميضًا أو انتقالات سريعة بين ألوان الخلفية الفاتحة والداكنة، وذلك من باب الاحتياط.

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

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

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

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

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

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

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

@prefers-reduced-motion

على غرار طلبات الاستعلام عن الوسائط التي تركز على الألوان في الـ color module، يتحقّق طلب الاستعلام عن الوسائط @prefers-reduced-motion من الـ user's OS settings المتعلّقة بالرسوم المتحركة.

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

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

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

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

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

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

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

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

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

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

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

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