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

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

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

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

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

محتوى متحرّك

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

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

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

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

بالنسبة إلى أي حركة مفاجئة، من الضروري اختبارها باستخدام أداة تحليل النوبات الصرعية الحساسة للضوء (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 معًا.

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

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

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

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

اختبِر معلوماتك حول تسهيل استخدام الصور المتحركة والعناصر المتحركة.