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

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

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

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

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

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

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

تنصح إرشادات الوميض في WCAG بعدم استخدام ما يلي:

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

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

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

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

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

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

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

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

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

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

@prefers-reduced-motion

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

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

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

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

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

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

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

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

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

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

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

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

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